5일차(CSS-변형과 전환)-24.11.20

변형과 전환 효과

변형과 transform 속성

웹 요소에는 CSS를 사용하면 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 x축과 y축을 기준으로 바꾼다.
변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에서 CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정한다.

함수	설명
translate(x,y)	지정한 크기만큼 x축, y축 방향으로 이동한다.
scale(x,y)	지정한 크기만큼 x축, y축 방향으로 확대 및 축소한다.
skew(x,y)	지정한 크기만큼 x축,y축 방향으로 비틀어 왜곡한다.
rotate(deg)	지정한 각도만큼 회전한다.

 

transition 속성을 이용한 변화

transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형 (크기기반) 이다.

transition속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있다.
또한 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과를 만들 수도 있다.
단축속성으로, 변화를 주고자하는 속성이나 실행시간, 실행방법, 그리고 딜레이 시간등에 대한 정보를 포함할 수 있다.

transition의 하위 속성들

접미사	설명
-property	변화 대상 속성을 지정한다.
-duration	변화가 실행될 시간을 지정한다.
-delay	변화 시작 전 지연시간을 지정한다.
-timing-function	변화 실행시 실행 곡선 방식을 지정한다. (듀레이션 동안에 어떤 식으로 속도제어할 것인지)

transition-timing-function

transition에 의한 변화가 실행될때는 실행시간(duration)을 지정해 원하는 시간 동안 변화가 일어나게 할 수 있다. 그리고 transition-timing-function속성을 추가 정의하면 실행기간 동안의 속도 변화방식을 지정할 수 있다.
속성값으로는 별도의 키워드를 지정한다.