HTML.고급 CSS

CSS3 고급 기능: 웹 페이지를 생동감 있게 만드는 애니메이션과 변환

안녕하세요! 웹 페이지의 스타일링을 넘어서, 더욱 동적이고 인터랙티브한 경험을 제공하고 싶으신가요? 오늘은 CSS3의 꽃이라고 할 수 있는 전환(Transition), 변환(Transform) 기능에 대해 알려드릴게요.

📌 목차

• 1. CSS3 전환(Transition): 부드러운 변화의 마법
• 2. CSS3 변환(Transform): 요소의 기하학적 조작
• 3. 다양한 변환 사례 예제
• 4. 마무리하며

1. CSS3 전환(Transition): 부드러운 변화의 마법

transition은 요소가 변화할 때 부드럽고 자연스럽게 바뀌게 도와주는 기능입니다. 대표적인 예시는 버튼에 마우스를 올렸을 때 배경색이나 크기가 부드럽게 변하는 것입니다.

예제: font-size 전환 효과

div {
  font-size: 16px;
  transition: font-size 0.5s;
}

div:hover {
  font-size: 500%;
}
    

transition 속성 구성

• transition-property: 대상 속성 (예: all, color)
• transition-duration: 변화 시간 (ex: 0.5s)
• transition-timing-function: 속도 곡선 (ex: ease, linear)
• transition-delay: 지연 시간 (ex: 0.2s)

2. CSS3 변환(Transform): 요소의 기하학적 조작

transform 속성은 요소를 회전하거나, 이동하거나, 확대/축소할 수 있도록 만들어줍니다. 레이아웃에는 영향을 주지 않고 시각적인 효과만 부여합니다.

주요 2D 변환 함수

• rotate(deg): 회전
• scale(x, y): 확대/축소
• translate(x, y): 이동
• skew(x, y): 기울이기

예제: 요소 기하학적 조작

div#rotate    { transform: rotate(20deg); }
div#scale     { transform: scale(1.5, 1); }
div#translate { transform: translateY(50px); }
div#skew      { transform: skew(0deg, -20deg); }
    

3. 다양한 변환 사례 예제

아래는 다양한 transform을 적용한 예시입니다.

Rotate

Skew

Translate

Scale

👆 마우스를 올려보세요! 각기 다른 transform 효과를 실습해볼 수 있습니다.

4. 마무리하며

CSS3의 Transition과 Transform은 웹사이트를 단순한 정보 전달 도구가 아니라, 사용자를 끌어당기는 멋진 공간으로 바꿔주는 핵심 기능입니다. 

📚 더 많은 실습과 도전을 통해 자신만의 인터랙티브한 웹 페이지를 완성해보세요!

---