CSS 속성(3)

Dev_Sumni·2022년 4월 21일
0
post-thumbnail

전환

  • transition : 1s 1초
    요소의 전환(시작과 끝)효과를 지정하는 단축 속성
    transition: 속성명 지속시간(필수 포함 속성) 타이밍함수 대기시간;

  • transition-property
    전환 효과를 사용할 속성 이름을 지정
    ex) width

  • transition-duration
    전환 효과의 지속시간을 지정 (필수 포함 속성)

  • transition-timing-function
    전환 효과의 타이밍(easing)함수를 지정

    • ease 느리게-빠르게-느리게 (기본값)
      linear 일정하게
      ease-in 느리게-빠르게
      ease-out 빠르게-느리게
      ease-in-out 느리게-빠르게-느리게
  • transition-delay
    전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
    ex) transition: 1s .5s
    지속시간 뒤쪽에 작성 (지속시간, 대기시간)

변환(1)

  • 2D 변환 함수

    • px
      translate(x,y) 이동(x,y축)
      translateX(x) 이동(x축)
      translateY(y) 이동(y축)
    • 없음(배수)
      scale(x,y) 크기(x,y축)
    • deg
      rotate(degree) 회전(각도)
      skewX(x) 기울임(x축)
      skewY(y) 기울임(y축)
  • 3D 변환 함수

    • deg
      rotateX(x) 회전(x축)
      rotateY(y) 회전(y축)
    • px
      perspective(n) 원근법(거리px) > 무조건 함수 목록 제일 앞에 작성하기!
      ex) transform: perspective(500px) rotateX(45deg);

변환(2)

  • perspective
    하위 요소를 관찰하는 원근 거리를 지정 (속성)

  • 속성과 함수 차이점과 적용 대상
    속성 perspective: 600px; 관찰 대상의 부모
    함수 transform: perspective(600)px 관찰 대상

  • backface-visibility
    3D 변환으로 회전된 요소의 뒷면 숨김 여부

Overwatch 캐릭터 선택 예제

max-width: 700px;
700px이상으로는 더이상 늘어나지 않고 이하로는 자동으로 줄어들기

margin: 0 auto;
블럭요소에 가로 사이즈가 있는 상태에서 margin 값의 좌우가 auto라면 가운데 정렬 가능

transform: skewX(-14deg) scale(1.3);
transition: 1s;
transform은 변환 속성, transition은 지속시간

요소 하나를 정렬할때는 flex 대신에 margin을 사용
ex) margin: 0 auto;

profile
개발 일지 끄적 끄적,,

0개의 댓글