다중 영역 레이아웃
탐색·주 콘텐츠·맥락을 함께 봐야 할 때 독립 영역으로 조율합니다.
글 읽기페이지 구성
주 콘텐츠와 보조 영역을 배치합니다. 본문이 이어지는 CSS 다단과 구분합니다.
검색 범위: 페이지 구성
3 편의 글
| 개념 | 특징 | 장점 | 제약 | 적합한 상황 | 조합 조건 |
|---|---|---|---|---|---|
| 다중 영역 레이아웃 | 탐색·주 콘텐츠·맥락을 함께 봐야 할 때 독립 영역으로 조율합니다. | 진행 중인 작업 옆에 참고 자료를 유지합니다. | 영역이 많으면 주의가 분산되므로 작은 화면의 순서를 정하세요. | 작업 옆에서 맥락을 계속 확인해야 할 때 어울립니다. | 영역 안에는 평면 컨트롤, 모바일에는 단일 열을 씁니다. |
| 단일 열 레이아웃 | 다음에 읽을 순서가 분명해야 하는 콘텐츠를 하나의 세로 흐름에 배치합니다. | 하나의 흐름이 다음 읽기 순서를 알려줍니다. | 긴 페이지는 스크롤이 필요하므로 한 줄 길이를 제한하세요. | 순서대로 읽는 콘텐츠에 어울립니다. | 미니멀한 스타일과 제한된 본문 줄 길이를 조합합니다. |
| 사이드바 레이아웃 | 주 영역 옆에 더 좁은 보조 영역 배치 | 필터와 결과를 함께 확인 | 읽기 폭이 부족해지면 세로 배치 필요 | 콘텐츠 옆에서 탐색·필터 유지 | 주 영역 안에 리스트·그리드 배치 가능 |