CSS 속성(3)

전환

• 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;