CSS: two-column ​

div[class~="instui-two-column"] — 왼쪽 및 오른쪽 콘텐츠 영역을 가진 두 칼럼 레이아웃.

✅ Two-Column 사용 시:

  • 두 콘텐츠 영역의 중요도가 대체로 비슷한 경우

  • 두 세트의 콘텐츠를 나란히 비교하거나 대조할 때

  • 모바일에서 쌓이는 반응형 레이아웃을 구축할 때 🚫 Two-Column을 사용하지 마세요:

  • 한 칼럼이 페이지를 지배하는 경우 — 대신 비대칭 레이아웃을 사용하세요

  • 콘텐츠가 나란히 배치되어도 이점이 없는 경우

접근성 ​

  • 좁은 뷰포트에서도 두 칼럼이 인지 가능하고 사용 가능하도록 하세요
  • 열 콘텐츠를 감쌀 때 의미론적 랜드마크(예: <section>)를 사용하세요
  • 칼럼 사이에 충분한 여백과 대비를 유지하세요

사용법 ​

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

예제들 ​

부분 ​

부분설명
.instui-divider칼럼 사이의 선택적 시각 구분선.
.instui-left왼쪽 칼럼 콘텐츠 영역.
.instui-right오른쪽 칼럼 콘텐츠 영역.

상태 ​

상태설명
:optional—

조건 ​

타입쿼리설명
media(max-width: 768px)—

사용된 토큰 ​

Token타입값
--instui-color-border——
--instui-space-large——
--instui-space-medium——

관련 항목 ​