탐색·주 콘텐츠·맥락을 함께 봐야 할 때 독립 영역으로 조율합니다.
식물 박물관 페이지에서 방문자는 전시물을 고르고 특징을 관찰합니다. 목록·표본·설명을 오가면 비교가 끊깁니다. 해설도 독립적으로 보여야 하므로 단순한 사이드바만으로는 부족합니다.
로즈메리 잎을 고르면 가운데 사진·이름과 옆 해설이 함께 바뀝니다. 관찰 질문도 펼칠 수 있습니다. 좁은 화면에서는 탐색·전시물·설명 순서로 이어집니다.
그늘 전시실
허브 전시실
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
다중 영역 레이아웃은 페이지의 독립 영역을 조율합니다. 열 사이로 본문이 흐르는 CSS 다단과는 다른 페이지 구성입니다. 영역이 늘면 주의가 나뉘므로 모바일·키보드 순서를 정해야 합니다.
선택해서 읽는 자료 · 개요 읽기 시간과 별도
선택·작업·독립된 맥락이 함께 필요할 때 씁니다. 주요 과업 하나와 보조 조작 하나라면 사이드바가 간단합니다. 영역 수 자체는 사용성의 증거가 아닙니다.
박물관은 전시물마다 사진과 관찰 질문을 연결합니다. 편집기나 참고 도구에도 적용할 수 있습니다. 생성 식물 사진은 페이지 구조를 보여주며 실제 소장품 기록은 아닙니다.
CSS Grid는 독립 영역을 배치하고 CSS 다단은 하나의 콘텐츠 흐름을 나눕니다. DOM을 탐색→전시물→설명으로 두고 작은 화면도 같은 순서를 따릅니다. 하나의 선택 상태로 사진과 맥락을 갱신합니다.
후보 권고 초안은 2차원 그리드 배치를 정의하며 이 사이트의 페이지 분류를 규정하지 않습니다.
확인좁은 화면과 확대 검사의 근거이며 레이아웃·서체의 정의는 아닙니다.
확인페이지 영역과 별개로 텍스트를 여러 단에 나누는 방식을 정의합니다.
확인| 개념 | 특징 | 장점 | 제약 | 적합한 상황 | 조합 조건 |
|---|---|---|---|---|---|
| 다중 영역 레이아웃 | 탐색·주 콘텐츠·맥락을 함께 봐야 할 때 독립 영역으로 조율합니다. | 진행 중인 작업 옆에 참고 자료를 유지합니다. | 영역이 많으면 주의가 분산되므로 작은 화면의 순서를 정하세요. | 작업 옆에서 맥락을 계속 확인해야 할 때 어울립니다. | 영역 안에는 평면 컨트롤, 모바일에는 단일 열을 씁니다. |
프로젝트를 처음 시작하나요? 설명을 입력해 첫 프롬프트를 준비하세요.
맞춤 프롬프트 만들기 →이미 외부 AI와 대화 중이라면 이 글의 링크와 내 프로젝트에 맞는 이유, 중요하게 보는 장단점을 전달하세요. 합의한 요구사항에 어떻게 적용할지 요청하세요.
이 글 링크: 다중 영역 레이아웃
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.