HTML 반영하기

<shopby-header shopby-platform-type="PC"> <div> <header slot="visibleSubHeader" class="header"> <!-- 로고 --> {{#if visibleLogo}} <h1 slot="logo" class="header__logo"> <div class="header__logo-img"> {{#with logo}} {{#if landingUrl}} <a href="{{landingUrl}}" target="{{openLocationType}}"> {{img imageUrl '' '' description '' (append 'width: ' width ';' 'height: ' height ';')}} </a> {{else}} {{img imageUrl '' '' description '' (append 'width: ' width ';' 'height: ' height ';')}} {{/if}} {{/with}} </div> </h1> {{/if}} <!-- 검색창 --> <search-field shopby-module-key="header-product-search-field"> <p class="header__search"> <input class="header__search-input font-montserrat" type="text" placeholder="Search for items" shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD" shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD" value="{{keywords}}" /> <button class="sprite-image header__search-btn" shopby-on:click="SEARCH"></button> </p> </search-field> <!-- 우측 상단 메뉴 --> <div class="member"> <!-- my menu --> <ul slot="memberMenu" class="member__menu"> <li class="my-menu"> <label class="my-menu__label font-montserrat">MY</label> <ul class="my-menu__list"> <li><a class="my-menu__link" href="/pages/my/my-page.html" shopby-action="GO_MY_MENU">마이페이지</a></li> <li><a class="my-menu__link" href="/pages/my/modify-member.html" shopby-action="GO_MY_MENU">내 정보 수정</a></li> <li><a class="my-menu__link" href="/pages/my/order-list.html" shopby-action="GO_MY_MENU">주문조회</a></li> <li><a class="my-menu__link" href="/pages/my/like-product-list.html" shopby-action="GO_MY_MENU">좋아요</a></li> <li><a class="my-menu__link" href="/pages/my/inquiry-list.html" shopby-action="GO_MY_MENU">1:1 문의</a></li> </ul> </li> {{#if isSignedIn}} <li><a class="member__menu-link font-montserrat" shopby-action="SIGN_OUT">logout</a></li> {{else}} <li><a class="member__menu-link font-montserrat" href="/pages/sign-up/sign-up-method.html">join</a></li> <li><a class="member__menu-link font-montserrat" href="/pages/sign-in/sign-in.html">login</a></li> {{/if}} <li slot="count"> <a class="member__menu-link font-montserrat" href="/pages/order/cart.html"> cart <span class="badge badge--fill-point badge--round member__menu-link-badge">{{count}}</span> </a> </li> </ul> </div> </header> <nav class="nav"> <!-- 전체 카테고리 버튼 --> <button class="nav__all-menu-btn font-montserrat" shopby-on:click="TOGGLE_ALL_CATEGORY_PANEL">ALL CATEGORY</button> <!-- 1차 카테고리 슬라이더 --> <div class="nav__slide"> <nav class="nav__slider" slot="categorySlider"> {{#if multiLevelCategories}} <button shopby-slider-nav-prev type="button" class="sprite-image nav__slide-btn nav__slide-prev"></button> <div shopby-slider shopby-slider-id="{{slider.id}}" class="swiper nav__slider-wrap"> <ul class="swiper-wrapper"> {{#each multiLevelCategories}} <li class="swiper-slide nav__slider-item-wrap"> <a class="nav__slider-item" href="/pages/product/product-list.html?categoryNo={{categoryNo}}">{{label}}</a> </li> {{/each}} </ul> </div> <button shopby-slider-nav-next type="button" class="sprite-image nav__slide-btn nav__slide-next"></button> {{/if}} </nav> </div> <!-- 기획전/공지사항 --> <div slot="boardCategory" class="nav__link-wrap"> <span class="nav__link font-noto"><a href="/pages/event/event-list.html">기획전</a></span> {{#if noticeBoard.used}} <span class="nav__link font-noto"><a href="/pages/board/post-list.html?boardNo={{noticeBoard.boardNo}}">{{noticeBoard.boardName}}</a></span> {{/if}} </div> <!-- 전체 카테고리 패널 --> <!-- hook (is-active) --> <section shopby-all-category-panel slot="all-category-panel" class="all-menu nav__all-menu"> <dl> {{#if multiLevelCategories}} {{#each multiLevelCategories}} <div class="all-menu__category"> <dt class="all-menu__tit"> <a class="all-menu__link" href="/pages/product/product-list.html?categoryNo={{categoryNo}}">{{label}}</a> </dt> <dd class="font-noto"> <ul class="all-menu__list"> {{#each children}} <li><a class="all-menu__link" href="/pages/product/product-list.html?categoryNo={{categoryNo}}">{{label}}</a></li> {{/each}} </ul> </dd> </div> {{/each}} {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>노출 중인 카테고리가 없습니다.</em> </div> {{/if}} </dl> </section> </nav> <div class="header__bottom-line"></div> </div> </shopby-header> <shopby-header shopby-platform-type="MOBILE"> <header> <div slot="visibleSubHeader"> <div class="header"> <!-- 로고 --> {{#if visibleLogo}} <h1 class="header__logo" slot="logo"> {{#with logo}} {{#if landingUrl}} <a href="{{landingUrl}}" target="{{openLocationType}}"> {{img imageUrl '' '' description '' (append 'width: ' width ';' 'height: ' height ';')}} </a> {{else}} {{img imageUrl '' '' description '' (append 'width: ' width ';' 'height: ' height ';')}} {{/if}} {{/with}} </h1> {{/if}} <!-- 로고 --> <!-- 햄버거 메뉴 --> {{#if visibleHamburgerButton}} <button class="header__hamburger" shopby-on:click="OPEN_HEADER_SLIDE_MENU"> <span class="ico ico--hamburger-black-24"></span> </button> {{/if}} <!-- 햄버거 메뉴 --> <!-- 뒤로가기 --> {{#unless visibleSubHeader}} {{#if visibleBackButton}} <button class="header__back" shopby-on:click="BACK"> <span class="ico ico--arrow-left-black-24"></span> </button> {{/if}} {{/unless}} <!-- 뒤로가기 --> <!-- 타이틀 --> {{#unless visibleSubHeader}} {{#if subTitle}} <h1 class="header__title" slot="subTitle">{{subTitle}}</h1> {{/if}} {{/unless}} <!-- 타이틀 --> <!-- 카트 --> {{#if visibleCartButton}} <a class="header__link-basket" href="/pages/order/cart.html" title="장바구니 가기"> <span class="ico ico--bag-black-24"></span> <span class="badge badge--round badge--fill-point header__link-basket-badge" slot="count">{{count}}</span> </a> {{/if}} <!-- 카트 --> </div> {{#if visibleSubHeader}} <div class="header header--sub"> <!-- 뒤로가기 --> <button class="header__back" shopby-on:click="BACK"> <span class="ico ico--arrow-left-black-24"></span> </button> <!-- 뒤로가기 --> <!-- 타이틀 --> <h1 class="header__title" slot="subTitle">{{subTitle}}</h1> <!-- 타이틀 --> </div> {{/if}} </div> </header> </shopby-header>

CSS 반영하기

/* 여기에 스타일 코드를 작성해주세요. */