메인 헤더
모바일 레이아웃 페이지 참고해주세요.
<header class="v-main-header"> <div class="v-main-header__inner"> <div class="v-main-header__bar"> <div class="v-main-header__main"> <div class="v-main-header__logo"> <div class="v-logo-shinsegaev"> <a href="#"> <svg class="v-logo-shinsegaev__letters" viewBox="0 0 161 56"> <title>SHINSEGAE V</title> <path fill="currentColor" d="M150.238 24.3293h10.408v2.3h-7.779v5.5047h7.517v2.3129h-7.517v5.6081h8.029v2.3h-10.658V24.3293ZM134.918 24.2259h1.853l8.214 18.155h-2.694l-2.445-5.3496h-7.806l-2.313 5.3496h-2.694l7.885-18.155Zm3.851 10.5053-2.957-6.5383-2.747 6.5383h5.704ZM115.826 33.4907h6.164v7.6497c-2.261.9648-4.504 1.4472-6.729 1.4472-3.04 0-5.471-.87-7.294-2.6102-1.813-1.7487-2.72-3.9023-2.72-6.4608 0-2.6963.942-4.9404 2.825-6.7322 1.884-1.7918 4.245-2.6877 7.084-2.6877 1.034 0 2.015.112 2.944.3359.928.2154 2.102.616 3.522 1.2018v2.636c-2.191-1.2491-4.363-1.8737-6.519-1.8737-2.006 0-3.697.672-5.072 2.0158-1.376 1.3439-2.064 2.9935-2.064 4.949 0 2.0503.688 3.7258 2.064 5.0266 1.375 1.3007 3.145 1.9511 5.309 1.9511 1.051 0 2.308-.2369 3.772-.7107l.249-.0775v-3.7602h-3.535v-2.3001ZM89.2173 24.3293h10.4083v2.3h-7.78v5.5047h7.5171v2.3129h-7.5171v5.6081h8.0297v2.3h-10.658V24.3293ZM78.2078 34.8088 76.2102 33.62c-1.2529-.7495-2.1465-1.486-2.6809-2.2096-.5257-.7323-.7885-1.5722-.7885-2.5198 0-1.4214.4994-2.5757 1.4981-3.463 1.0076-.8873 2.313-1.3309 3.9163-1.3309 1.5332 0 2.9394.4221 4.2185 1.2663v2.9332c-1.3229-1.2491-2.7466-1.8736-4.2711-1.8736-.8586 0-1.5639.1981-2.1158.5944-.552.3876-.8279.8873-.8279 1.4989 0 .5427.2015 1.051.6045 1.5248s1.0557.9691 1.9581 1.4859l2.0107 1.163c2.2429 1.3094 3.3643 2.9806 3.3643 5.0136 0 1.4472-.495 2.6231-1.485 3.5276-.9813.9046-2.2604 1.3568-3.8374 1.3568-1.8136 0-3.4651-.547-4.9545-1.641v-3.2822c1.4193 1.766 3.0621 2.649 4.9282 2.649.8235 0 1.5069-.224 2.0501-.6719.552-.4566.8279-1.0252.8279-1.7057 0-1.1026-.806-2.145-2.418-3.127ZM63.9913 24.3293h2.4969v18.0516h-2.2603L51.9534 28.4901v13.8908h-2.4706V24.3293h2.1289l12.3796 14.0071V24.3293ZM39.472 24.3293h2.6284v18.0516H39.472V24.3293ZM29.5266 24.3293h2.6284v18.0516h-2.6284v-7.8564H19.2103v7.8564H16.582V24.3293h2.6283v7.8047h10.3163v-7.8047ZM5.57245 34.8088 3.5749 33.62c-1.25285-.7495-2.14649-1.486-2.680924-2.2096-.525672-.7323-.788507-1.5722-.788507-2.5198 0-1.4214.499388-2.5757 1.498161-3.463 1.00754-.8873 2.31296-1.3309 3.91625-1.3309 1.53321 0 2.93938.4221 4.21852 1.2663v2.9332c-1.32294-1.2491-2.74664-1.8736-4.27108-1.8736-.8586 0-1.56388.1981-2.11583.5944-.55196.3876-.82793.8873-.82793 1.4989 0 .5427.2015 1.051.60452 1.5248.40301.4738 1.05572.9691 1.95813 1.4859l2.01069 1.163c2.24286 1.3094 3.3643 2.9806 3.3643 5.0136 0 1.4472-.49501 2.6231-1.48503 3.5276-.98125.9046-2.26038 1.3568-3.8374 1.3568-1.81356 0-3.46505-.547-4.954451-1.641v-3.2822c1.419311 1.766 3.062041 2.649 4.928171 2.649.82355 0 1.50692-.224 2.05012-.6719.55195-.4566.82793-1.0252.82793-1.7057 0-1.1026-.80603-2.145-2.41809-3.127Z" ></path> </svg> </a> </div> <button data-command="show-modal" data-commandfor="vMallSelector" type="button" class="v-button v-main-header__button v-main-header__button--mall" > <svg viewBox="0 0 10 5" class="v-main-header__icon"> <title>몰 이동</title> <path fill="none" stroke="currentColor" d="m0 0 5 5 5-5" opacity=".7" ></path> </svg> </button> </div> </div>
<!-- 좌측 영역 --> <div class="v-main-header__lead"> <!-- <slot name="lead" /> --> <button type="button" class="v-button v-main-header__button"> <svg viewBox="0 0 20 20" fill="none" class="v-main-header__icon"> <path fill="#fff" d="M0 0h20v20H0z"></path> <path stroke="currentColor" stroke-miterlimit="10" d="m13.164 14.121 5 5" ></path> <circle cx="7.999" cy="9.002" r="7.167" stroke="currentColor" ></circle> </svg> </button> </div>
<!-- 우측 영역 --> <div class="v-main-header__trail"> <!-- <slot name="trail" /> --> <button type="button" class="v-button v-main-header__button"> <svg viewBox="0 0 20 20" fill="none" class="v-main-header__icon"> <path stroke="currentColor" stroke-miterlimit="10" d="M7.66699 6.70898v-.97276c0-2.22762 1.24196-4.02724 3.32931-4.02724 2.0874 0 3.3374 1.80934 3.3374 4.02724v.97276" ></path> <path stroke="currentColor" d="M3.2435 17.8756 4.76731 7.20898H17.2333l1.5239 10.66662H3.2435Z" ></path> </svg> </button> </div> </div> </div></header>
<dialog id="vMallSelector" class="v-bottom-sheet" aria-label="몰 이동"> <div class="v-bottom-sheet__container"> <button data-command="close" data-commandfor="vMallSelector" aria-label="몰 이동 닫기" type="button" class="v-button v-bottom-sheet__handle" ></button>
<div class="v-bottom-sheet__content"> <div class="v-mall-selector"> <p>무엇을 찾으시나요?</p> <ul class="v-mall-selector__list"> <li> <a href="#"> <div class="v-mall-selector-unit"> <div class="v-mall-selector-unit__name">JAJU</div> <div class="v-mall-selector-unit__subline"> 자주 쓰는 것들의 최상 </div> </div> </a> </li> <li> <a href="#"> <div class="v-mall-selector-unit"> <div class="v-mall-selector-unit__name">TBD</div> <div class="v-mall-selector-unit__subline"> 소제목 브랜드 성격을 알릴 수 있는 메세지 </div> </div> </a> </li> </ul> </div> </div> </div></dialog>