Layout

헤더, 사이드바, 본문과 푸터로 페이지의 골격을 구성합니다.

<sy-layout>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

사이드바헤더·푸터 크기

헤더 표시푸터 표시

코드 보기

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

사용 가이드

앱의 헤더·사이드바·본문·푸터 뼈대를 구성합니다. 각 영역은 Layout의 직접 자식으로 배치하세요.

Header / Footer: size는 높이입니다. small·medium·large 또는 CSS 크기를 사용하세요.
Sider: size는 너비입니다. Content 뒤에 배치하면 오른쪽에 놓입니다.
Content: 나머지 본문 영역을 채웁니다. 직접 자식인 각 영역은 자동으로 슬롯에 배치됩니다.

예제

헤더와 본문

사이드바 없이 상하 영역으로 구성합니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

왼쪽 탐색 영역

사이드바 다음에 본문을 배치하면 왼쪽 메뉴 구조가 됩니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

오른쪽 보조 영역

본문 뒤에 사이드바를 두어 상세 정보나 보조 설정을 배치합니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-header size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Header</div>
  </sy-layout-header>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Details</div>
  </sy-layout-sider>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

본문 중심

선택적인 헤더와 푸터를 생략할 수 있습니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:280px">
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Side navigation</div>
  </sy-layout-sider>
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
</sy-layout>

명시적으로 영역 배치

header·content·footer와 양쪽 sider 슬롯을 지정해 영역을 배치합니다. 왼쪽은 탐색, 오른쪽은 보조 정보처럼 역할을 구분할 수 있습니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:260px">
  <sy-layout-header slot="header">페이지 제목</sy-layout-header>
  <sy-layout-sider slot="sider-start" size="20%">탐색</sy-layout-sider>
  <sy-layout-content slot="content">본문</sy-layout-content>
  <sy-layout-sider slot="sider-end" size="20%">보조 정보</sy-layout-sider>
  <sy-layout-footer slot="footer">푸터</sy-layout-footer>
</sy-layout>

콘텐츠와 푸터

헤더 없이 콘텐츠, 오른쪽 사이드바, 푸터를 구성합니다.

코드 보기

HTML

<sy-layout style="--layout-min-height:280px" id="supplement-1">
  <sy-layout-content
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">페이지의 주요 콘텐츠가 표시되는 영역입니다.
    </div>
  </sy-layout-content>
  <sy-layout-sider size="28%"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Details</div>
  </sy-layout-sider>
  <sy-layout-footer size="small"
    style="background:rgba(103,80,164,.07);border:1px solid rgba(103,80,164,.15);"
  >
    <div style="padding:16px;overflow-wrap:anywhere">Footer</div>
  </sy-layout-footer>
</sy-layout>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {});
</script>

기능별 예제

4개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

속성 · Size

설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

메서드 · None

예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.

코드 보기

HTML

예제를 불러오고 있습니다.

이벤트 · None

컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.

코드 보기

HTML

예제를 불러오고 있습니다.

API reference

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

`<sy-layout>`

Slots

Slot	Description
	header 영역에 표시할 내용입니다.
	sider-start 영역에 표시할 내용입니다.
	content 영역에 표시할 내용입니다.
	sider-end 영역에 표시할 내용입니다.
	footer 영역에 표시할 내용입니다.
	컴포넌트의 본문 또는 자식 항목입니다.

`<sy-layout-header>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	헤더 높이입니다. small·medium·large 또는 CSS 길이입니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

`<sy-layout-sider>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	사이드바 너비입니다. small·medium·large 또는 CSS 길이입니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

`<sy-layout-content>`

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.

`<sy-layout-footer>`

Properties

Attribute / Property	Type	Default	Description
	`LayoutSize`	`'medium'`	푸터 높이입니다. small·medium·large 또는 CSS 길이입니다.

Slots

Slot	Description
	컴포넌트의 본문 또는 자식 항목입니다.