레이아웃

매뉴얼 · docs/layout.md

체크포인트

스킵 href ↔ 대상 id · 폭 --layout-max · 현재 위치(GNB·브레드크럼·좌메뉴) · 모달 사용 시 #wrap 유지 · 화면 확대/축소 90%–200% (10% 단계)

* head · 메뉴 · 위치 · 푸터: head · menu · breadcrumb · footer

화면 확대 / 축소

헤더 상단(.header-util)에 배치합니다. 사이트 위젯으로 rem 기준을 조절하며, 브라우저 자체 확대(Ctrl + / −)와는 별개입니다.

  • 하한 90% — 과도한 축소로 가독성이 깨지지 않도록 (공공·기관 사이트 위젯 관례)
  • 상한 200% — WCAG 1.4.4 텍스트 크기 조정(200%)에 맞춤
  • 단계 10% — 기본 100% · 버튼으로 ±10%

* 실제 조작은 페이지 맨 위 헤더의 글자 크기 컨트롤을 사용하세요. · 마크업: .zoom-ctrl · JS: common.js · CSS: --page-zoom · 설정은 localStorage에 저장됩니다.

페이지 셸 구조

이 페이지 자체가 아래 셸로 구성되어 있습니다. Tab으로 스킵 → 본문을 확인해 보세요.

스킵 네비게이션 #skipToContent · common.css · Tab 시 노출

헤더 / GNB #header · .header-util(글자 크기) · .logo · #gnb

컨테이너 #container → #location + #contents 본문 바로가기 기본 대상

푸터 · 맨 위로 #footer · #quick .gotop

콘텐츠 폭 · 변수

헤더·location·contents가 같은 --layout-max를 씁니다.

  • --layout-max — 기본 120rem
  • --layout-pad-x — 좌우 여백 (PC 2rem / 모바일 1.6rem)
  • --layout-aside-w — 좌메뉴 폭 22rem
  • --layout-gap — 좌메뉴↔본문 간격

1단 레이아웃

#contents 안에 본문만 두는 기본형 (게시판·안내 페이지)

1단은 별도 래퍼 없이 #contents 하위에 바로 콘텐츠를 넣으면 됩니다. 페이지 타이틀(.ptitle-head) 다음에 본문이 이어집니다.

본 킷의 데모 페이지 대부분이 이 1단 구조입니다.

2단 레이아웃 (좌메뉴 + 본문)

.layout-body--aside · 좌메뉴는 aside + aria-label · 현재 항목 aria-current="page"

좌측은 서브메뉴, 우측은 본문입니다. 900px 이하에서는 위·아래로 쌓입니다.

복잡한 GNB·전체메뉴·모바일 햄버거는 menu.html 패턴을 사용하세요. 이 블록은 페이지 골격용 단순 LNB입니다.

하지 말 것

  • 스킵 링크만 두고 대상 id 없음
  • 본문을 #header 안에 넣어 랜드마크가 깨짐
  • 좌메뉴 현재 위치를 색만으로 표시 (aria-current 없음)
  • 콘텐츠 최대 폭·여백을 페이지마다 제각각으로 둠
  • 모달 때문에 #wrap을 제거하거나 구조를 깨뜨림
  • user-scalable=no / maximum-scale로 브라우저 확대를 막음
  • 사이트 줌만 두고 브라우저 200% 확대에서 레이아웃이 깨짐