03 · Components · 아이덴티티
브랜드 헤더Brand Header
사이트 최상단의 고정된 신원 표시 영역. 로고·주 내비게이션·유틸리티(언어·로그인) 3영역으로 구성합니다.
StableWCAG AA
구성
EN · 한로그인
본문 영역
배치 규칙
- 좌: 로고(홈 링크) / 중: 내비게이션 / 우: 유틸리티의 3영역을 유지.
- 스크롤 시 축소하거나 border를 추가해 본문과 경계를 명확히 하세요.
- 내비게이션은 5~7개, 그 이상이면 드롭다운 또는 Side Navigation.
- 모바일(<640px)에서는 햄버거 메뉴로 전환하고 오프캔버스 Drawer를 사용합니다.
<header> 안에 <nav aria-label="주 내비게이션">을 두어 랜드마크를 부여합니다. 페이지 첫 포커스가 내비게이션을 건너 뛸 수 있도록 SkipNavigation을 함께 배치하세요.