HTML/CSS 실무 체크리스트

요약: 페이지를 내보내기 전에 시맨틱·박스·레이아웃·반응형·토큰·포커스를 한 번씩 확인한다.

---

언제 이 목록을 보는가

기능은 됐는데 모바일에서 가로 스크롤이 나거나, Tab으로 버튼을 못 찾거나, 제목이 div인 페이지에 쓴다. 앞 글에서 다룬 규칙을 한 화면에서 다시 통과시키려는 목록이다.

새 페이지를 열기 전과 리뷰 직전에 같은 순서로 훑는다. 항목마다 “왜”가 붙어 있다. 체크만 하고 이유를 건너뛰면 다음 페이지에서 같은 실수가 반복된다.

---

1. HTML 뼈대

• html에 lang을 실제 언어로 둔다. 스크린 리더 발음과 번역 힌트가 여기서 갈린다.
• charset과 viewport 메타가 있다. 없으면 한글이 깨지거나 모바일에서 화면이 축소되지 않는다.
• 페이지 h1은 하나이고 제목은 계층을 건너뛰지 않는다. 문서 목차가 스크린 리더 탐색 경로이다.
• main은 문서당 하나이다. 반복 헤더·내비와 본문을 구분한다.
• 이동은 a, 동작은 button이다. 클릭 가능한 div는 키보드 초점에서 빠진다.
• 의미 있는 이미지에 구체적 alt를 두고, 장식은 alt=""이다. 빈 alt="이미지"는 소음이다.
• img에 width·height(또는 동등한 aspect-ratio)를 둔다. 로드 전 자리 붕괴(CLS, 누적 레이아웃 이동)를 줄인다.
• 폼 입력은 label의 for와 id가 연결된다. placeholder만으로는 이름이 남지 않는다.

---

2. 박스와 레이아웃

• 전역 box-sizing: border-box이다. width에 padding·border가 포함되어야 칸이 안 넘친다.
• 한 줄·한 열 정렬은 Flex, 행과 열을 함께 정할 때는 Grid이다. 역할을 섞으면 예외 CSS가 는다.
• 아이템 간격은 부모 gap으로 통일한다. 자식 margin이 겹치면 세로 간격이 의도와 달라진다.
• Grid 열 넘침은 minmax(0, 1fr), Flex 자식 넘침은 min-width: 0을 검토한다. 기본 최소 너비가 내용 크기이기 때문이다.
• 본문 폭은 min(100% - gutter, max)처럼 상한을 둔다. width: 100%만 있으면 좌우 여백이 사라진다.

---

3. 반응형·시각

• 좁은 화면 스타일이 기본이고, min-width로만 확장한다. 데스크톱을 깎아 모바일 예외를 만들면 분기가 쌓인다.
• 브레이크포인트는 기기 이름이 아니라 레이아웃이 깨지는 폭이다. 비슷한 px가 파일마다 흩어지지 않게 한다.
• 제목 크기에 상한이 있는지 본다. vw만 쓰면 넓은 모니터에서 제목이 과해진다. clamp를 검토한다.
• 색·간격·글자는 CSS 변수(토큰)를 참조한다. 컴포넌트 hex가 흩어지면 다크 모드와 리브랜딩이 빠진다.
• 본문과 배경 대비를 확인한다. 브랜드 색을 본문 색으로 쓰지 않는다.
• 호버 전용 정보가 터치에서도 열리는지 본다. hover: hover 미디어로 장식 호버만 제한한다.

---

4. 접근성·품질

• :focus-visible 윤곽이 있다. outline: none만 남기면 Tab 위치를 잃는다.
• 키보드만으로 주요 흐름(내비, 폼 제출, 모달 닫기)이 가능하다. 커스텀 위젯은 Tab·Enter·Esc를 직접 확인한다.
• 오류·성공은 색 옆 텍스트가 있다. 스크린 리더와 색각 사용자에게 색만으로는 부족하다.
• prefers-reduced-motion에서 장식 애니메이션을 끈다. 전정기관 부담과 집중 방해를 줄인다.
• 아이콘 단독 버튼에 aria-label(또는 보이는 텍스트)이 있다. 장식 SVG는 aria-hidden="true"이다.
• 불필요한 !important와 과한 특이도를 줄인다. 다음 수정이 덮이지 않는 쪽이 기본선이다.

---

5. 새 CSS 기능(필요할 때만)

새 문법은 지원 범위와 팀 합의 후에 넣는다. 없어도 체크리스트 1–4를 통과하면 페이지는 내보낼 수 있다.

기능	쓰는 상황
Container Queries	뷰포트가 아니라 컴포넌트 폭에 따라 카드 레이아웃을 바꿀 때
:has()	자식 상태(체크됨, 에러)에 따라 부모 카드 스타일을 바꿀 때
cascade layers	라이브러리 CSS와 앱 CSS의 우선순위를 층으로 나눌 때
color-mix()	토큰 색에서 hover·disabled 파생색을 계산할 때

도입 전에 대상 브라우저에서 한 번씩 렌더를 확인한다. 폴백이 없으면 핵심 레이아웃에 쓰지 않는다.

---

정리

HTML/CSS 기본선은 트릭 목록이 아니다. 뼈대 태그, 박스 계산, 한 방향 Flex와 두 방향 Grid, 좁은 화면 기본, 이름 붙은 토큰, 보이는 포커스가 반복해서 통과하는지가 품질이다. 위 항목을 페이지마다 같은 순서로 훑으면 된다.