(최종제출) html 다운로드 링크: **https://bigcat-diary.tistory.com/81**
(최종제출) figma: **https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_강소연?node-id=1943-2&p=f&t=7ZGQwx0dQnSpJdNx-0**
| 항목 | 설명 | 예시 코드 | 비고 |
|---|---|---|---|
nav 태그 |
내비게이션 메뉴 전체를 감싸는 시맨틱 태그 | <nav> ... </nav> |
스크린리더에서 의미 파악 용이 |
| 메뉴 구조 | 메뉴 항목을 리스트로 구성 | <ul><li><a href="#about">About</a></li></ul> |
#id로 연결 |
href="#섹션ID" |
특정 섹션으로 스크롤 이동 | <a href="#projects">Projects</a> |
id가 정확히 일치해야 작동 |
section id="" |
스크롤 대상이 되는 각 섹션 | <section id="about">...</section> |
고유 id 필요 |
고정 헤더 (position: fixed) |
스크롤 시에도 상단 고정 | nav { position: fixed; top: 0; ... } |
z-index와 background 지정 필요 |
부드러운 이동 (scroll-behavior) |
클릭 시 부드럽게 스크롤 이동 | html { scroll-behavior: smooth; } |
CSS 전역 설정 |
| 반응형 처리 (선택 사항) | 모바일 메뉴 전환 시 사용 | @media 및 hamburger menu |
필요 시 JS와 함께 구현 |
| 활성화 상태 표시 | 현재 위치한 섹션 강조 | JS로 class 추가 또는 :target 활용 |
선택적 고급 기능 |