[CSS] 인터랙션 & 정렬 개념

👩🏼‍💻 CSS transition, transform, hover 효과, 수직 정렬 등 인터랙션과 레이아웃 제어에 관한 개념 예제 기반으로 정리!

---

1️⃣ CSS Transition

개념

transition 속성은 CSS 속성의 변화에 시간적 애니메이션 효과를 적용하는 데 사용합니다.

transition: [property] [duration] [timing-function] [delay];

주요 구성요소

속성명	의미
property	변화시킬 CSS 속성 (ex: width, height)
duration	애니메이션 지속 시간 (ex: 0.3s)
timing-function	가속도 곡선 (ease, linear 등)
delay	시작 전 대기 시간

📁 예제: transitionEx6.html

div:hover { width: 300px; }

div:nth-of-type(1) {
  transition: width 1s ease-in 1s;
}
div:nth-of-type(2) {
  transition: 1s;
}

---

2️⃣ CSS Transform

개념

transform 속성은 요소에 회전, 확대/축소, 기울이기, 이동 등을 적용할 수 있습니다.

transform: translate(x, y) scale(n) rotate(deg) skew(deg);

📁 예제: transformEx1.html

.box:hover {
  transform: translate(50px, 50px) scale(1.2) rotate(45deg);
}

📁 예제: transformEx2.html

transform-origin: center center;

---

3️⃣ Rollover & Hover 효과

📁 예제: rollover_button.html

• 마우스를 올렸을 때 이미지 전환
• :hover 활용

📁 예제: tabs.html

• 탭 UI 구조
• .tab:hover 상태에서 색상 및 강조 스타일 적용

---

4️⃣ 수직 가운데 정렬 방법 총정리

방식	설명	예제 파일
padding 사용	상하 패딩으로 간격 맞춤	vertical-center1.html
margin 사용	외부 여백으로 조절	vertical-center2.html
table-cell 사용	display: table-cell + vertical-align	vertical-center3.html
flexbox 사용	align-items: center	vertical-center4.html
align-content 사용	align-content: center	vertical-center5.html

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

---

✅ 마무리 요약

개념	핵심 속성	요약
transition	duration, timing, delay	CSS 속성의 부드러운 변화
transform	scale, rotate, translate	요소를 변형시킴
hover 효과	:hover	상호작용 시 시각 효과
수직 정렬	padding, flex, align-content 등	다양한 방식 존재