CSS 전환 효과 마스터! ✨ 애니메이션 속성으로 웹 페이지를 생동감 있게!
6.6 CSS 전환 효과 속성 적용하기
이번 영상에서는 CSS에서 전환 효과를 어떻게 적용하는지 배워볼 거야. 전환 효과는 어떤 스타일이 다른 스타일로 바뀌는 걸 말해.
전환 효과란?
예를 들어, box라는 클래스를 가진 요소에 마우스를 올렸을 때 배경색이 빨간색에서 파란색으로 바뀌는 걸 생각해보자. 이렇게 기존 스타일이 다른 스타일로 부드럽게 바뀌는 걸 '전환'이라고 해.
전환 효과를 제어하는 속성들
CSS에는 이런 전환 효과를 제어할 수 있는 여러 가지 속성이 있어.
1. transition-property
이 속성은 어떤 속성에 전환 효과를 적용할지 정하는 거야.
all: 모든 속성에 전환 효과를 적용해.none: 전환 효과를 적용하지 않아.background-color:background-color속성에만 전환 효과를 적용해.
예를 들어, transition-property: background-color;라고 하면 배경색만 부드럽게 변할 거야.
2. transition-duration
이 속성은 전환 효과가 얼마나 오래 지속될지 시간을 정하는 거야. 단위는 초(s)나 밀리초(ms)를 사용해.
예를 들어, transition-duration: 2s;라고 하면 전환 효과가 2초 동안 지속돼.
3. transition-delay
이 속성은 전환 효과가 시작되기 전에 얼마나 기다릴지 시간을 정하는 거야. 이것도 초(s)나 밀리초(ms)를 사용해.
예를 들어, transition-delay: 3s;라고 하면 전환 효과가 3초 뒤에 시작돼.
4. transition-timing-function
이 속성은 전환 효과가 진행되는 동안 속도가 어떻게 변할지 정하는 거야. 마치 자동차가 출발하고 멈출 때 속도가 변하는 것처럼 말이지.
linear: 처음부터 끝까지 일정한 속도로 변해.ease: 처음에는 느리다가 빨라지고, 마지막에는 다시 느려져. (가장 많이 사용돼)ease-in: 처음에는 느리다가 점점 빨라져.ease-out: 처음에는 빠르다가 점점 느려져.ease-in-out: 처음과 끝은 느리고 중간은 빨라져.
이 외에도 다양한 값을 사용할 수 있는데, 크롬 개발자 도구를 이용하면 직접 그래프를 조절해서 원하는 속도를 만들 수도 있어.
transition 속성 (축약형)
이 속성들은 각각 따로따로 써도 되지만, 한 번에 묶어서 쓸 수도 있어. 이걸 '축약형'이라고 해.
transition 속성은 보통 다음과 같은 순서로 값을 넣어줘.
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
예를 들어, transition: background-color 2s ease 1s; 라고 하면, background-color 속성이 1초 뒤에 시작해서 2초 동안 ease 속도로 변하는 거야.
주의할 점:
transition-property에 여러 속성을 지정하고 싶을 때는 콤마(,)로 구분해서 따로따로 써야 해.all이라는 값을 사용하면 모든 속성에 전환 효과가 적용돼.
이 전환 효과 속성들을 잘 활용하면 웹사이트를 훨씬 더 동적이고 멋지게 만들 수 있을 거야!