[Week 1] 주영

[woodzverse]

📝 학습 내용 요약

• 이번 4장에서는 웹에 인터랙션과 동적인 시각 효과를 더하는 다양한 CSS 기법을 배웠다.
• hover, transition, transform, animation 등 기본적인 동작부터,
  ::before, ::after 가상 요소를 활용한 오버레이 효과까지 실습을 통해 익혔다.
• @property를 사용해 CSS 변수의 타입과 초기값을 정의하고, 이 변수를 이용해 opacity를 부드럽게 조정하는 방법도 배웠다.
• 선택자 중첩(&)과 가상 상태(:hover, :focus, :active)를 함께 사용하는 패턴도 익숙해졌다.
• 마지막으로 @media와 @supports를 통해 반응형·적응형 웹 구현 방법을 학습했다.

---

📁 실습 파일 설명

4-1 인터랙티브 웹이란?

• 01_interactive : 이미지에 마우스를 올렸을 때 배경이 어두워지고, 텍스트가 천천히 드러나는 효과 구현.

4-2 레이아웃이 서서히 노출되도록 하기

• 02_opacity : 제목 영역에 hover 시, 컨테이너가 fade-in 되는 전환 효과.
• 03_transition : opacity, translate, rotate, scale 속성의 변화를 이용한 시각적 전환 실습.

4-3 카드 목록에서의 애니메이션

• 01_hover_focus_active : 마우스나 키보드 입력에 따른 UI 반응(hover, focus, active) 비교.
• 02_transform : 카드 hover 시 회전하는 애니메이션, text-shadow로 빛 번짐 효과 추가.
• 03_animation : @keyframes를 이용해 이미지들이 원형으로 회전하는 3D 캐러셀 구현.

animation.mov

4-4 SVG 활용하기

• 01_basic : circle, rect, path 등 SVG 기본 도형 요소 학습.
• 02_animate : <animate> 태그로 벡터 그래픽에 동적 효과 적용.
• 03_stylesheet : CSS 파일을 분리해 SVG 애니메이션을 구성하는 방법 실습.

4-5 반응형 웹

• 01_media_query : 다양한 해상도에 대응하도록 레이아웃 자동 조정.
• 02_supports : 브라우저가 특정 기능을 지원하는지에 따라 조건부 스타일을 적용.

---

🌟 느낀 점 및 피드백 요청 사항

• 평소에 “보기 좋은 웹페이지”가 단순히 색감이나 정렬의 문제라고만 생각했는데, 이번 장을 통해 사용자의 동작에 반응하는 웹이 얼마나 큰 차이를 만드는지 알게 되었다.
• 특히 transition과 transform만으로도 부드럽고 직관적인 인터랙션을 만들 수 있다는 점이 인상 깊었다.
• 예전엔 애니메이션을 구현하려면 자바스크립트가 꼭 필요하다고 생각했는데, 순수 CSS만으로도 충분히 풍부한 효과를 줄 수 있다는 걸 체감했다.
• 반응형 웹에서는 단순히 화면 크기에 맞추는 것이 아니라, 콘텐츠의 우선순위와 가독성까지 고려해야 한다는 점이 흥미로웠다.
• 앞으로는 실제 프로젝트에서도 hover나 transition을 적극적으로 활용해서 더 직관적이고 살아있는 웹 UI를 만들어보고 싶다.
• 생각보다 양이 많다... 다음에는 미리미리 해야겠다.🥲

[jisooooooooooo]

캐러셀에서 호버 확대까지 ! 실습 열심히 하셨네용🤩🤩
저도 과제하면서 CSS 만으로 구현할 수 있는 효과가 생각보다 많아서 놀랐답니다!!
저희 스터디 목표기도 한데 사용자 동작에 따라 반응하는 웹을 만들 수 있는 그날까지 열심히 해보자구요 ~~👍🏻✨