요구사항

HTML 구조:
- <body> 바로 아래에 <header class="main-header">를 만듭니다. 헤더 안에 간단한 로고 텍스트 (<h1>)를 넣습니다.
- 헤더 아래에는 스크롤을 길게 할 수 있도록 높이가 매우 큰 (예: 200vh 이상) 더미 콘텐츠를 담는 <div class="content">를 만듭니다.
CSS - 기본 헤더 및 콘텐츠 설정:
- .main-header의 배경색은 #282c34 (짙은 회색)으로, 글자색은 white로 설정하고 padding: 15px을 적용합니다.
- .content에 충분한 높이를 설정하여 페이지에 스크롤 바가 생기도록 합니다.
CSS - 스크롤 반응 (Sticky Header):
- .main-header가 페이지를 스크롤해도 화면의 가장 위쪽에 항상 고정되어 따라다니도록 설정합니다. (힌트: position 속성 중 하나)
CSS - 애니메이션 효과 (로딩 애니메이션):
- 헤더 안의 <h1> 로고 텍스트에 CSS Keyframes를 사용하여 애니메이션을 적용합니다.
- 애니메이션 내용:
  - 시작 (0%): 요소의 투명도(opacity)가 0이고, 수직 위치가 20px 아래에서 시작합니다.
  - 끝 (100%): 요소의 투명도(opacity)가 1이 되고, 원래 위치로 돌아옵니다.
- 애니메이션 설정: 이 애니메이션이 1s 동안 한 번만 실행되고, 시작할 때 부드럽게(ease-out) 가속도가 감소하도록 설정합니다. (힌트: animation-name, animation-duration, animation-timing-function, animation-fill-mode)

여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기

'w. Gemini' 카테고리의 다른 글

여덟 번째 문제: Grid Area를 활용한 블로그 레이아웃 만들기 (0)	2025.10.27
일곱 번째 문제: Grid와 Flexbox를 혼합한 대시보드 레이아웃 만들기 (0)	2025.10.27
다섯 번째 문제: CSS 변수를 활용한 커스텀 입력 필드 만들기 (0)	2025.10.27
네 번째 문제: 툴팁을 포함하는 버튼 만들기 (0)	2025.10.27
세 번째 문제: 반응형 3열 카드 레이아웃 만들기 (0)	2025.10.27

요구사항

'w. Gemini' 카테고리의 다른 글

티스토리툴바