HTML 반영하기

<main class="l-page"> <article-list-info board-no:query="boardNo" board-id:query="boardId"> <div> <h3 class="font-montserrat article-list__board-name" slot="boardName" shopby-board-name="{{boardName}}">{{boardName}}</h3> </div> </article-list-info> <article-total-count board-no:query="boardNo" board-id:query="boardId"> <div class="article-list__top"> <p class="total-count"> 총  <em class="highlight bold" slot="totalCount">{{totalCount}}</em> 건 </p> <div class="article-list__search-field" shopby-helper-key="article-search-field"> <span class="search-field"> <span class="select select--md search-field__select-box"> <select shopby-on:change="CHANGE_SEARCH_TYPE"> <option value="TITLE">제목</option> <option value="CONTENT">내용</option> <option value="WRITER">작성자</option> </select> </span> <span class="search-field__input"> <span class="input-field input-field--md"> <input type="text" value="{{keyword}}" placeholder="검색어를 입력해 주세요." shopby-on:input="CHANGE_SEARCH_FIELD_KEYWORD" shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD" /> </span> <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH"> <span class="ico ico--magnet-black-24"></span> </button> </span> </span> <div slot="boardConfig"> {{#if hasPostingPermission}} <button type="button" class="btn btn--fill-point btn--sm" slot="boardName" shopby-board-name="{{boardName}}" shopby-can-post-by-member="{{boardConfig.canPostByMember}}" shopby-can-post-by-guest="{{boardConfig.guestPostingUsed}}" shopby-can-secret-posting="{{boardConfig.canPostBySecret}}" shopby-uses-attachment="{{boardConfig.canAttach}}" shopby-action="WRITE" > 글쓰기 </button> {{/if}} </div> </div> </div> </article-total-count> <article-list class="board" board-no:query="boardNo" board-id:query="boardId" page-size:query="pageSize" initial-page-number:query="pageNumber" keyword:query="keyword" search-type:query="searchType" uses-pagination > <div> <div slot="items" class="article-list"> <table class="l-table"> <colgroup> <!-- 번호 --> <col width="120px" /> <!-- 제목--> <col /> <!-- 조회수--> <col width="120px" /> <!-- 작성자 --> <col width="140px" /> <!-- 작성일 --> <col width="140px" /> </colgroup> <thead> <tr> <th>번호</th> <th>제목</th> <th>조회수</th> <th>작성자</th> <th>작성일</th> </tr> </thead> <tbody> {{#each items}} <tr> <td> {{pageNumber}} {{pageSize}} {{#if notice}} <span class="badge badge--line-point">공지</span> {{else}} {{listIndex @index ../pageNumber ../pageSize}} {{/if}} </td> <td class="td_left"> <a class="article-list__item-link" href="./post-detail.html?boardNo={{../boardNo}}&articleNo={{articleNo}}"> {{#if secreted}} <span class="article-list__item-title"> <span class="ico ico--lock-black-16 article-list__item-title-icon"></span> <span class="article-list__item-title-text">{{isWriter ../memberNo registerType registerNo modifierNo title}}</span> {{#if attached}} <span class="ico ico--clip-16 article-list__item-title-icon"></span> {{/if}} {{#isNewPost registerYmdt}} <span class="ico ico--n-white-16 article-list__item-new-icon"></span> {{/isNewPost}} </span> {{else}} <span class="article-list__item-title"> <span class="article-list__item-title-text">{{title}}</span> {{#if attached}} <span class="ico ico--clip-16 article-list__item-title-icon"></span> {{/if}} {{#isNewPost registerYmdt}} <span class="ico ico--n-white-16 article-list__item-new-icon"></span> {{/isNewPost}} {{#isBestPost viewCnt}} <span class="ico-hot"></span> {{/isBestPost}} </span> {{/if}} </a> </td> <td> <span class="font-montserrat article-list__item-view-cnt">{{viewCnt}}</span> </td> <td> <span class="article-list__item-register-name">{{registerName}}</span> </td> <td> <span class="font-montserrat article-list__item-register-ymdt">{{formatUseByDate registerYmdt}}</span> </td> </tr> {{/each}} </tbody> </table> <div slot="totalCount"> {{#ifEq totalCount 0 }} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>게시글이 없습니다.</em> </div> {{/ifEq}} </div> </div> {{#if totalCount}} <div class="pagination" slot="pagination"> <a href="?{{pagination.firstPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-lt"></button> </a> <a href="?{{pagination.prevPage}}"> <button class="sprite-image pagination__btn pagination__btn--lt"></button> </a> {{#each pagination.pages}} <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}">{{page}}</a> {{/each}} <a href="?{{pagination.nextPage}}"> <button class="sprite-image pagination__btn pagination__btn--rt"></button> </a> <a href="?{{pagination.lastPage}}"> <button class="sprite-image pagination__btn pagination__btn--double-rt"></button> </a> </div> {{/if}} </div> </article-list> </main> <main class="l-content"> <div> <article-total-count board-no:query="boardNo" board-id:query="boardId"> <summary class="l-title l-title__align-end"> <div class="article-list__total-count font-montserrat"> 총 <span class="highlight bold" slot="totalCount">{{totalCount}}</span> 건 </div> <div slot="boardConfig"> {{#if hasPostingPermission}} <button type="button" class="btn btn--fill-point btn--sm" slot="boardName" shopby-board-name="{{boardName}}" shopby-can-post-by-member="{{boardConfig.canPostByMember}}" shopby-can-post-by-guest="{{boardConfig.guestPostingUsed}}" shopby-can-secret-posting="{{boardConfig.canPostBySecret}}" shopby-uses-attachment="{{boardConfig.canAttach}}" shopby-action="WRITE" > 글쓰기 </button> {{/if}} </div> </summary> </article-total-count> <article-list class="board" board-no:query="boardNo" board-id:query="boardId" page-size:query="pageSize" initial-page-number:query="pageNumber" pair-key="POST_MORE_VIEW_BUTTON" uses-more-button > <div> <ul slot="items" class="article-list"> {{#each items}} <li class="article-list__item"> <a href="/pages/board/post-detail.html?boardNo={{../boardNo}}&articleNo={{articleNo}}"> <span class="article-list__item-top"> {{#if secreted}} <span class="ico ico--lock-black-16"></span> <span class="article-list__item-title">{{isWriter ../memberNo registerType registerNo modifierNo title}}</span> {{else}} {{#if notice}} <span class="badge badge--line-point">공지</span> {{/if}} <span class="article-list__item-title">{{{title}}}</span> {{/if}} {{#if attached}} <span class="ico ico--clip-16"></span> {{/if}} {{#isNewPost registerYmdt}} <span class="ico ico--n-white-16 article-list__item-new-icon"></span> {{/isNewPost}} {{#isBestPost viewCnt}} <span class="ico-hot"></span> {{/isBestPost}} </span> </a> <span class="article-list__item-bottom"> <div> <span>{{registerName}}</span> <span class="font-montserrat">{{substring registerYmdt 10}}</span> </div> <span class="article-list__item-view-count"> 조회  <span class="font-montserrat">{{viewCnt}}</span> </span> </span> </li> {{else}} <div class="notice notice--full"> <span class="sprite-image notice--warning"></span> <em>게시글이 존재하지 않습니다.</em> </div> {{/each}} </ul> </div> </article-list> <more-view-button pair-key="POST_MORE_VIEW_BUTTON"> <div> <div slot="hasMoreViewButton"> {{#if hasMoreViewButton}} <button class="btn btn--line-gray btn--lg-wide" shopby-on:click="MORE_VIEW_BUTTON_CLICK">더보기</button> {{/if}} </div> </div> </more-view-button> </div> </main>

CSS 반영하기

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