레이아웃 Layout
웹사이트의 전체 레이아웃 구조를 제공하는 컴포넌트이다. 스크롤 방향에 따라 자동으로 scroll-up/scroll-down 클래스를 추가한다.
기본
#wrap 요소를 만들고 창 스크롤 방향에 따라 scroll-up/scroll-down 클래스를 붙여 헤더를 숨기거나 다시 보여 줍니다. 창 스크롤에 의존하므로 예제를 별도 화면(iframe)에 띄웁니다. 스크롤 위치를 #container 요소 기준으로 판단하므로 본문은 id="container" 요소에 넣습니다. 예제는 1024px 폭 화면을 축소해 PC 레이아웃으로 보여 줍니다. 1024px 미만 화면에서는 헤더 유틸리티 메뉴, 주 메뉴, 사이드 메뉴가 숨겨지고 전체메뉴 버튼이 표시됩니다.
vue
<script setup lang="ts">
import {
KrdsBreadcrumb,
KrdsButton,
KrdsFooter,
KrdsHeader,
KrdsIdentifier,
KrdsLayout,
KrdsMainMenu,
KrdsMasthead,
KrdsSkipLink
} from '@krds.ui/vue'
</script>
<template>
<KrdsLayout class="custom-layout">
<KrdsSkipLink href="#container">본문 바로가기</KrdsSkipLink>
<KrdsMasthead>이 누리집은 대한민국 공식 전자정부 누리집입니다.</KrdsMasthead>
<KrdsHeader>
<template #utility>
<ul class="utility-list">
<li>
<a href="#" class="krds-btn small text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i> </a>
</li>
<li>
<div class="krds-drop-wrap">
<button type="button" class="krds-btn small text drop-btn">메뉴명 <i class="svg-icon ico-toggle"></i></button>
<div class="drop-menu">
<div class="drop-in">
<ul class="drop-list">
<li><a href="#" class="item-link">메뉴명</a></li>
<li><a href="#" class="item-link">메뉴명</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</template>
<template #branding>
<h2 class="logo">
<a href="#">
<span class="sr-only">KRDS - Korea Design System</span>
</a>
</h2>
<div class="header-actions">
<button type="button" class="btn-navi sch" title="통합검색 레이어">통합검색</button>
<a href="#" class="btn-navi login">로그인</a>
<button type="button" class="btn-navi join">회원가입</button>
<button type="button" class="btn-navi all" aria-controls="mobile-nav">전체메뉴</button>
</div>
</template>
<template #navigation>
<KrdsMainMenu
:items="[
{ text: '1Depth', subItems: [{ text: '2Depth-menu', items: [{ text: '3Depth-menu', href: '#' }] }] },
{ text: '1Depth', subItems: [{ text: '2Depth-menu', items: [{ text: '3Depth-menu', href: '#' }] }] },
{ text: '링크(anchor)', href: '#' }
]"
/>
</template>
</KrdsHeader>
<div id="container">
<div class="inner in-between">
<nav class="krds-side-navigation">
<h2 class="lnb-tit">1Depth-title</h2>
<!-- lnb-list -->
<ul class="lnb-list">
<li class="lnb-item">
<button type="button" class="lnb-btn lnb-toggle" aria-controls="lnbmenu-e7xeix1" aria-expanded="false">2Depth-menu</button>
<!-- lnb-submenu -->
<div class="lnb-submenu">
<ul id="lnbmenu-e7xeix1">
<li class="lnb-subitem">
<button
type="button"
class="lnb-btn lnb-toggle-popup"
aria-controls="lnbmenu-o4g3re9"
aria-expanded="false"
aria-haspopup="true"
>
3Depth-menu
</button>
<!-- lnb-submenu-lv2 -->
<div class="lnb-submenu-lv2" id="lnbmenu-o4g3re9">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
</ul>
</div>
<!-- //lnb-submenu-lv2 -->
</li>
<li class="lnb-subitem"><a href="#" class="lnb-btn lnb-link">3Depth-link</a></li>
<li class="lnb-subitem"><a href="./sample_sub_02.html" class="lnb-btn lnb-link">3Depth-link</a></li>
</ul>
</div>
<!-- //lnb-submenu -->
</li>
<li class="lnb-item">
<button type="button" class="lnb-btn lnb-toggle" aria-controls="lnbmenu-jxx21y4" aria-expanded="false">2Depth-menu</button>
<!-- lnb-submenu -->
<div class="lnb-submenu">
<ul id="lnbmenu-jxx21y4">
<li class="lnb-subitem">
<button
type="button"
class="lnb-btn lnb-toggle-popup"
aria-controls="lnbmenu-j6hmfzo"
aria-expanded="false"
aria-haspopup="true"
>
3Depth-menu
</button>
<!-- lnb-submenu-lv2 -->
<div class="lnb-submenu-lv2" id="lnbmenu-j6hmfzo">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
</ul>
</div>
<!-- //lnb-submenu-lv2 -->
</li>
<li class="lnb-subitem"><a href="#" class="lnb-btn lnb-link">3Depth-link</a></li>
<li class="lnb-subitem"><a href="#" class="lnb-btn lnb-link">3Depth-link</a></li>
</ul>
</div>
<!-- //lnb-submenu -->
</li>
<li class="lnb-item">
<button type="button" class="lnb-btn lnb-toggle" aria-controls="lnbmenu-7fsvaio" aria-expanded="false">2Depth-menu</button>
<!-- lnb-submenu -->
<div class="lnb-submenu">
<ul id="lnbmenu-7fsvaio">
<li class="lnb-subitem">
<button
type="button"
class="lnb-btn lnb-toggle-popup"
aria-controls="lnbmenu-uk7pakf"
aria-expanded="false"
aria-haspopup="true"
>
3Depth-menu
</button>
<!-- lnb-submenu-lv2 -->
<div class="lnb-submenu-lv2" id="lnbmenu-uk7pakf">
<button type="button" class="lnb-btn-tit">3Depth-title</button>
<ul>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
<li><a href="#" class="lnb-btn">4Depth</a></li>
</ul>
</div>
<!-- //lnb-submenu-lv2 -->
</li>
<li class="lnb-subitem"><a href="#" class="lnb-btn lnb-link">3Depth-link</a></li>
<li class="lnb-subitem"><a href="#" class="lnb-btn lnb-link">3Depth-link</a></li>
</ul>
</div>
<!-- //lnb-submenu -->
</li>
</ul>
<!-- //lnb-list -->
</nav>
<div class="contents">
<KrdsBreadcrumb :items="[{ text: '홈' }, { text: '컴포넌트' }]" />
<div class="page-title-wrap" data-type="responsive">
<h1 class="h-tit">page title</h1>
<div class="krds-drop-wrap h-tit-drop">
<button type="button" class="h-tit drop-btn" aria-expanded="false">page title</button>
<div class="drop-menu" style="display: none">
<div class="drop-in">
<ul class="drop-list">
<li>
<a href="#" class="item-link">서비스 소개<span class="sr-only"></span></a>
</li>
<li>
<a href="#" class="item-link">국내에서 외국발간자료 신청<span class="sr-only"></span></a>
</li>
<li>
<a href="#" class="item-link">해외에서 국내발간자료 신청<span class="sr-only"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<KrdsFooter>
<template #top>
<button type="button" class="link" title="관련 사이트 레이어">related_site</button>
<button type="button" class="link" title="관련 사이트 레이어">related_site</button>
<button type="button" class="link" title="관련 사이트 레이어">related_site</button>
<button type="button" class="link" title="관련 사이트 레이어">related_site</button>
</template>
<template #logo>
<span v-sr-only>KRDS - Korea Design System</span>
</template>
<template #content>
<div class="f-info">
<p class="info-addr">(26464) 강원특별자치도 원주시 건강로 32(반곡동) 국민건강보험공단</p>
<ul class="info-cs">
<li><strong class="strong">대표전화 1577-1000</strong><span class="span">(유료, 평일 09시~18시)</span></li>
<li><strong class="strong">해외이용 82-33-811-2001</strong><span class="span">(유료, 평일 09시~18시)</span></li>
</ul>
</div>
<div class="f-link">
<div class="link-go">
<KrdsButton text size="medium">찾아오시는 길 <i class="svg-icon ico-angle right"></i></KrdsButton>
<KrdsButton text size="medium">이용안내 <i class="svg-icon ico-angle right"></i></KrdsButton>
<KrdsButton text size="medium">직원검색 <i class="svg-icon ico-angle right"></i></KrdsButton>
</div>
<div class="link-sns">
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">인스타그램</span>
<i class="svg-icon ico-instagram"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">유튜브</span>
<i class="svg-icon ico-youtube"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">X</span>
<i class="svg-icon ico-sns-x"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">페이스북</span>
<i class="svg-icon ico-facebook"></i>
</a>
<a href="#" class="krds-btn xlarge icon border" target="_blank" title="새 창 열기">
<span class="sr-only">블로그</span>
<i class="svg-icon ico-blog"></i>
</a>
</div>
</div>
</template>
<template #bottom>
<div class="f-btm-text">
<div class="f-menu">
<a href="#" class="point">개인정보처리방침</a>
<a href="#">저작권 정책</a>
<a href="#">웹 접근성 품질인증 마크 획득</a>
</div>
<p class="f-copy">© 2023 National Health Insurance Service. All rights reserved.</p>
</div>
<KrdsIdentifier>이 누리집은 보건복지부 누리집입니다.</KrdsIdentifier>
</template>
</KrdsFooter>
</KrdsLayout>
</template>스크롤 감지 비활성화
enableScrollDetection을 false로 지정하면 스크롤 클래스를 붙이지 않습니다.
vue
<script setup lang="ts">
import { KrdsLayout } from '@krds.ui/vue'
</script>
<template>
<KrdsLayout :enable-scroll-detection="false">
<div id="container" style="height: 200px; padding: 2rem">
<p>스크롤 감지가 비활성화된 레이아웃</p>
</div>
</KrdsLayout>
</template>KrdsLayout
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
class | KrdsClassValue | - | CSS 클래스 |
id | string | 'wrap' | 레이아웃 ID |
enableScrollDetection | boolean | true | 스크롤 감지 활성화 여부 |
Events
| 이름 | 인자 | 설명 |
|---|---|---|
resize | [size: LayoutSize] | 창 크기가 바뀔 때 (레이아웃 크기) |
scroll | [details: ScrollDetails] | 스크롤할 때 (위치·방향) |
scroll-height | [height: number] | 문서 스크롤 높이가 바뀔 때 |
Slots
| 이름 | 설명 |
|---|---|
default | 페이지 내용 (공식 배너·헤더·본문·푸터) |