CSS: page-layout

div[class~="instui-page-layout"] — 헤더, 사이드바, 메인 콘텐츠가 있는 표준 3열 페이지 레이아웃입니다.

✅ Page-Layout을 사용할 때:

• 탐색 및 콘텐츠 영역이 있는 고전적인 페이지 구조가 필요할 때

• 페이지에 보조 영역으로 둘러싸인 명확한 메인 콘텐츠 영역이 있을 때

• 레이아웃 전반에 걸쳐 일관된 간격과 정렬을 원할 때 🚫 Page-Layout을 사용하지 마세요:

• 단일 열 페이지를 만드는 경우 — 대신 더 단순한 레이아웃을 사용하세요

• 사이드바가 메인 콘텐츠와 중요도 경쟁을 할 때

접근성

• 메인 콘텐츠 영역을 <main> 랜드마크에 매핑하세요
• 사이드바에 적절하게 role="navigation" 또는 role="complementary"를 부여하세요
• 랜드마크 영역에 고유한 aria-label을 설정하세요

사용법

@import "@pantoken/plugin-layouts/layouts.css";

부분

부분	설명
.instui-body	사이드바와 콘텐츠를 포함하는 본문 영역.
.instui-footer	하단 푸터 영역.
.instui-header	상단 헤더 영역.
.instui-main	중앙 콘텐츠 영역.
.instui-sidebar	왼쪽 탐색 또는 보조 열.

상태

상태	설명
:optional	—

사용된 토큰

Token	타입	값
--instui-color-border	—	—
--instui-color-footer-background	—	—
--instui-color-footer-text	—	—
--instui-color-header-background	—	—
--instui-color-sidebar-background	—	—
--instui-font-size-small	<length>	—
--instui-space-medium	—	—

관련 항목

• wrapper