헤더
사이트 상단 헤더 영역입니다.
#header #top #gnb
HTML
<header id="krds-header">
<div class="header-in">
<div class="header-container">
<div class="inner">
<div class="header-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>
<li>
<div class="krds-drop-wrap krds-resize">
<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><button type="button" class="item-link sm">메뉴명</button></li>
<li><button type="button" class="item-link md active">메뉴명</button></li>
<li><button type="button" class="item-link lg">메뉴명</button></li>
<li><button type="button" class="item-link xlg">메뉴명</button></li>
<li><button type="button" class="item-link xxlg">메뉴명</button></li>
</ul>
<div class="drop-bottom">
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-reset"></i> 초기화
</button>
</div>
</div>
</div>
</div>
</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 ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
<li><a href="#" class="item-link ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
<li><a href="#" class="item-link ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="header-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>
<div class="krds-drop-wrap my-drop">
<button type="button" class="btn-navi my drop-btn">나의 GOV</button>
<div class="drop-menu">
<div class="drop-in">
<div class="drop-top">
<p class="my-name">홍길동님</p>
<dl class="my-time">
<dt>로그아웃까지 남은 시간</dt>
<dd>
<span class="time">12:00</span>
<button type="button" class="krds-btn medium text">시간 연장</button>
</dd>
</dl>
</div>
<ul class="drop-list">
<li><a href="#" class="item-link">나의 GOV 홈</a></li>
<li><a href="#" class="item-link">나의 신청내역</a></li>
<li><a href="#" class="item-link">나의 생활정보</a></li>
<li><a href="#" class="item-link">나의 정보관리</a></li>
</ul>
<div class="drop-bottom">
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-logout"></i> 로그아웃
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn-navi all" aria-controls="mobile-nav">전체메뉴</button>
</div>
</div>
</div>
</div>
<nav class="krds-main-menu">
<div class="inner">
<ul class="gnb-menu">
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list">
<div class="gnb-sub-list single-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</a>
</li>
<li>
<button type="button" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</button>
</li>
</ul>
</div>
</nav>
</div>
<div id="mobile-nav" class="krds-main-menu-mobile">
<div class="gnb-wrap">
<div class="gnb-header">
<div class="gnb-utils">
<ul class="utility-list">
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
</ul>
</div>
<div class="gnb-login">
<button type="button" class="krds-btn large text"><i class="svg-icon ico-log"></i> 로그인을 해주세요</button>
</div>
<div class="gnb-service-menu">
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
</div>
<div class="sch-input">
<input type="text" class="krds-input" placeholder="찾고자 하는 메뉴명을 입력해 주세요" title="찾고자 하는 메뉴명 입력" />
<button type="button" class="krds-btn medium icon ico-search">
<span class="sr-only">검색</span>
<i class="svg-icon ico-sch"></i>
</button>
</div>
</div>
<div class="gnb-body">
<div class="gnb-menu">
<div class="menu-wrap">
<ul>
<li>
<a href="#mGnb-anchor1" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor2" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor3" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor4" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor5" class="gnb-main-trigger">1Depth</a>
</li>
</ul>
</div>
<div class="submenu-wrap">
<div class="gnb-sub-list" id="mGnb-anchor1">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor2">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor3">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li>
<a href="#" class="gnb-sub-trigger has-depth3">2Depth</a>
<div class="depth3-wrap">
<ul>
<li>
<a href="#" class="depth3-trigger has-depth4">3Depth</a>
<div class="depth4-wrap">
<div class="depth4-head">
<button type="button" class="krds-btn icon trigger-prev">
<span class="sr-only">이전화면</span>
<i class="svg-icon ico-angle left"></i>
</button>
<button type="button" class="krds-btn icon trigger-close">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
<ul class="depth4-body">
<h4 class="sub-title">4Depth title</h4>
<ul class="depth4-ul">
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor4">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor5">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
</div>
</div>
<div class="gnb-bottom">
<a href="#" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i></a>
</div>
</div>
<button type="button" class="krds-btn medium icon" id="close-nav">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
</div>
</header>Vue 컴포넌트
<template>
<header id="krds-header">
<div class="header-in">
<div class="header-container">
<div class="inner">
<div class="header-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>
<li>
<div class="krds-drop-wrap krds-resize">
<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><button type="button" class="item-link sm">메뉴명</button></li>
<li><button type="button" class="item-link md active">메뉴명</button></li>
<li><button type="button" class="item-link lg">메뉴명</button></li>
<li><button type="button" class="item-link xlg">메뉴명</button></li>
<li><button type="button" class="item-link xxlg">메뉴명</button></li>
</ul>
<div class="drop-bottom">
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-reset"></i> 초기화
</button>
</div>
</div>
</div>
</div>
</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 ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
<li><a href="#" class="item-link ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
<li><a href="#" class="item-link ico-go" target="_blank" title="새 창 열림">메뉴명</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="header-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>
<div class="krds-drop-wrap my-drop">
<button type="button" class="btn-navi my drop-btn">나의 GOV</button>
<div class="drop-menu">
<div class="drop-in">
<div class="drop-top">
<p class="my-name">홍길동님</p>
<dl class="my-time">
<dt>로그아웃까지 남은 시간</dt>
<dd>
<span class="time">12:00</span>
<button type="button" class="krds-btn medium text">시간 연장</button>
</dd>
</dl>
</div>
<ul class="drop-list">
<li><a href="#" class="item-link">나의 GOV 홈</a></li>
<li><a href="#" class="item-link">나의 신청내역</a></li>
<li><a href="#" class="item-link">나의 생활정보</a></li>
<li><a href="#" class="item-link">나의 정보관리</a></li>
</ul>
<div class="drop-bottom">
<button type="button" class="krds-btn medium text">
<i class="svg-icon ico-logout"></i> 로그아웃
</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn-navi all" aria-controls="mobile-nav">전체메뉴</button>
</div>
</div>
</div>
</div>
<nav class="krds-main-menu">
<div class="inner">
<ul class="gnb-menu">
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title">
2Depth title
<a href="#" class="krds-btn link basic small">
<span class="underline">바로가기</span>
<i class="svg-icon ico-angle right"></i>
</a>
</h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><button type="button">Last depth</button></li>
<li><button type="button">Last depth</button></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list" data-has-submenu="true">
<ul>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-sub-trigger" data-trigger="gnb">2Depth</button>
<div class="gnb-sub-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul class="type-description">
<li>
<h3 class="tit">
<a href="#" target="_blank" title="새 창 열림">3Depth title <i class="svg-icon ico-go"></i></a>
</h3>
<p class="txt">메뉴명과 메뉴에 관한 간략한 설명이 표시되는 스타일입니다.</p>
</li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link" data-trigger="gnb">2Depth</a>
</li>
<li>
<a href="#" class="gnb-sub-trigger is-link external-link" data-trigger="gnb" target="_blank" title="새 창 열림">2Depth</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<button type="button" class="gnb-main-trigger" data-trigger="gnb">1Depth</button>
<div class="gnb-toggle-wrap">
<div class="gnb-main-list">
<div class="gnb-sub-list single-list between">
<div class="gnb-sub-content">
<h2 class="sub-title"><span>2Depth title</span></h2>
<ul>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
<li><a href="#">Last depth</a></li>
</ul>
</div>
<div class="gnb-sub-banner">
<span class="krds-badge bg-secondary">신규 서비스</span>
<button type="button" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></button>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</a>
</li>
<li>
<button type="button" class="gnb-main-trigger is-link" data-trigger="gnb">링크(anchor)</button>
</li>
</ul>
</div>
</nav>
</div>
<div id="mobile-nav" class="krds-main-menu-mobile">
<div class="gnb-wrap">
<div class="gnb-header">
<div class="gnb-utils">
<ul class="utility-list">
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
<li><button type="button" class="krds-btn xsmall text">메뉴명</button></li>
</ul>
</div>
<div class="gnb-login">
<button type="button" class="krds-btn large text"><i class="svg-icon ico-log"></i> 로그인을 해주세요</button>
</div>
<div class="gnb-service-menu">
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
<a href="#" class="link">메뉴명</a>
</div>
<div class="sch-input">
<input type="text" class="krds-input" placeholder="찾고자 하는 메뉴명을 입력해 주세요" title="찾고자 하는 메뉴명 입력" />
<button type="button" class="krds-btn medium icon ico-search">
<span class="sr-only">검색</span>
<i class="svg-icon ico-sch"></i>
</button>
</div>
</div>
<div class="gnb-body">
<div class="gnb-menu">
<div class="menu-wrap">
<ul>
<li>
<a href="#mGnb-anchor1" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor2" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor3" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor4" class="gnb-main-trigger">1Depth</a>
</li>
<li>
<a href="#mGnb-anchor5" class="gnb-main-trigger">1Depth</a>
</li>
</ul>
</div>
<div class="submenu-wrap">
<div class="gnb-sub-list" id="mGnb-anchor1">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor2">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor3">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li>
<a href="#" class="gnb-sub-trigger has-depth3">2Depth</a>
<div class="depth3-wrap">
<ul>
<li>
<a href="#" class="depth3-trigger has-depth4">3Depth</a>
<div class="depth4-wrap">
<div class="depth4-head">
<button type="button" class="krds-btn icon trigger-prev">
<span class="sr-only">이전화면</span>
<i class="svg-icon ico-angle left"></i>
</button>
<button type="button" class="krds-btn icon trigger-close">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
<ul class="depth4-body">
<h4 class="sub-title">4Depth title</h4>
<ul class="depth4-ul">
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
<li><a href="#">depth title</a></li>
</ul>
</ul>
</div>
</li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
<li><a href="#" class="depth3-trigger">3Depth</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor4">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
<div class="gnb-sub-list" id="mGnb-anchor5">
<h2 class="sub-title">1Depth</h2>
<ul>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
<li><a href="#" class="gnb-sub-trigger">2Depth</a></li>
</ul>
</div>
</div>
</div>
<div class="gnb-bottom">
<a href="#" class="krds-btn medium text">메뉴명 <i class="svg-icon ico-angle right"></i></a>
<a href="#" class="krds-btn medium text" target="_blank" title="새 창 열기"> 메뉴명 <i class="svg-icon ico-go"></i></a>
</div>
</div>
<button type="button" class="krds-btn medium icon" id="close-nav">
<span class="sr-only">전체메뉴 닫기</span>
<i class="svg-icon ico-popup-close"></i>
</button>
</div>
</div>
</header>
</template>
<script setup lang="ts">
// 헤더 컴포넌트
// 사이트 상단 헤더 영역입니다.
import { ref } from 'vue'
// 필요한 상태 및 메서드 정의
const isActive = ref(false)
const handleClick = () => {
isActive.value = !isActive.value
}
</script>컴포넌트 정보
- 파일명
- header.html
- 카테고리
- 네비게이션
- 난이도
- 어려움