스타일 가이드
섹션 제목 (제목1)
제목1은 페이지 내 주요 구역의 제목입니다. 페이지에는 보통 여러 개의 h2가 올 수 있습니다.
하위 주제 제목 (제목2)
제목2는 제목1의 하위 주제를 설명할 때 사용합니다. 문단은 명확하고 간결하게 작성합니다.
세부 항목 제목 (제목3)
제목3는 세부적인 내용을 그룹화할 때 유용합니다. 필요하다면 강조나 기울임을 적절히 사용합니다.
보조 설명 제목 (제목4)
제목4는 문서 구조상 깊이가 더 필요한 경우에만 사용합니다. 과도한 단계 구분은 피합니다.
추가 메모 제목 (제목5)
제목5는 가장 낮은 단계의 제목입니다. 꼭 필요한 경우에만 사용하세요.
표(Table) 예시
표는 thead/tbody를 포함하고, 헤더 셀에는 scope를 지정합니다. 제목 셀에는 th 를 사용합니다.
| 구분 | 방문자수 | 페이지뷰 | 평균 체류시간 |
|---|---|---|---|
| 데스크톱 | 12,340 | 58,902 | 3분 12초 |
| 모바일 | 21,875 | 74,331 | 2분 45초 |
| 태블릿 | 3,102 | 9,884 | 3분 05초 |
| 합계 | 37,317 | 143,117 | — |
순서 없는 목록 (ul/li) 예시
상위-하위 항목을 단계적으로 나열합니다.
- 콘텐츠 가이드
- 문장 길이는 짧고 명확하게
- 불필요한 외래어 최소화
- 접근성 고려(대체 텍스트, 의미 요소)
- 디자인 가이드
- 가독성 높은 폰트 크기
- 충분한 대비와 여백
- 반응형 레이아웃
- 성능 가이드
- 이미지 최적화
- 불필요한 스크립트 지양
- 캐싱 전략 수립
순서 있는 목록 (ol/li) 예시
절차나 우선순위가 있는 항목에 사용합니다.
- 요구사항 정리
- 정보 구조 설계
- 컨텐츠 모델 정의
- 내비게이션 구조 확정
- 디자인/퍼블리싱
- 개발/테스트
- 배포/모니터링
문단과 인라인 요소
링크는 의미가 분명한 텍스트로 제공합니다. 예: 접근성 가이드 보기.
강조가 필요할 때는 strong 또는 em을 사용합니다.
“좋은 마크업은 의미가 선명하고, 구조가 명확하며, 장식과 분리되어야 합니다.”