FILA

• 사이트명 : FILA
• 사용언어 : HTML, CSS, JS
• 사용모듈 : 카페24
• 분류 : 적응형 PC, 클론코딩

---

1. 배너매니저를 이용

• 배너매니저 매뉴얼에 따라 마크업해둔 것에 변수로 변경해두면 된다.

<div df-banner-code="그룹코드" hidden>
    <div df-banner-clone>
        <a href="{#href}">{#item}</a>
    </div>
</div>

• 🌟 위에 코드에 맞춰 마크업하면 배너로 입력해둔 이미지를 볼 수 있다.

<section class="sc-now">
  <h2 class="headline">지금 많이 찾는 상품</h2>
  <ul class="con-list">
    <li class="con-item active" id="tab1">
      <div module="product_listmain_1" class="swiper ec-base-product">
        <ul class="prdList swiper-wrapper">
          <li id="anchorBoxId_{$product_no}" class="swiper-slide">
            <div class="thumbnail">
              <div class="prdImg">
                <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_big}" class="before" id="{$image_big_id}" alt="{$seo_alt_tag}" /><img src="{$image_medium}" class="after" id="{$image_medium_id}" alt="{$seo_alt_tag}" /></a>
              </div>
              <div class="soldout">{$soldout_icon}</div>
            </div>
            <div class="description">
              <span class="gender">{$custom_option1}</span>
              <strong class="name">
                <a href="{$link_product_detail}" class="{$product_name_display|display}">
                  <span class="title {$product_name_title_display|display}">{$product_name_title} :</span>
                  {$product_name}
                </a>
              </strong>
              <div class="pricelike">
                <ul module="product_ListItem" class="spec">
                  <li class="{$item_display|display} {$column_name}">
                    <div class="price"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</div>
                  </li>
                  <li class="{$item_display|display} {$column_name}">
                    <strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}
                  </li>
                </ul>
                <span class="wish">{$list_wish_icon}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</section>

2. 게시판

• CAFE24 게시판을 활용하여 글을 등록해둘 수 있다.
  
• 게시글을 등록한 후, 마크업에 내용을 변수로 바꾸기만 하면 된다.

<section class="sc-community">
  <div class="title-area">
    <h2 class="headline">커뮤니티</h2>
    <a href="#" class="plus-btn button">더보기</a>
  </div>
  <div module="Board_ListPackage_8" class="board-area">
    <!--@css(/css/module/board/listPackage_gallary.css)-->
    <div class="swiper" module="board_list_8">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">
          <a href="/board/gallery/read.html{$param_read}" class="imgLink"><img src="{$img_src}" onerror="this.src='http://img.echosting.cafe24.com/skin/base_ko_KR/board/@img_gallery.gif'" alt="" /></a>
          <a href="/board/gallery/read.html{$param_read}" class="imgLink text-wrap"> 
            <div class="title-box">
              <span class="title">{$subject}</span>
              <span class="category">{$category_name}</span>
            </div>
          </a>
          <span class="sub-title">{$content}</span>
        </li>
        <li class="swiper-slide">
          <a href="/board/gallery/read.html{$param_read}" class="imgLink"><img src="{$img_src}" onerror="this.src='http://img.echosting.cafe24.com/skin/base_ko_KR/board/@img_gallery.gif'" alt="" /></a>
          <a href="/board/gallery/read.html{$param_read}" class="imgLink text-wrap"> 
            <div class="title-box">
              <span class="title">{$subject}</span>
              <span class="category">{$category_name}</span>
            </div>
          </a>
          <span class="sub-title">{$content}</span>
        </li>
      </ul>
    </div>
  </div>
</section>