[ 23 ENGINE ] 카테고리 등록, 수정, 관리하기

우선 스마트디자인 편집창을 열어주세요~

이 기능은 html,css를 기본적으로 수정해야 하므로 커스텀 작업에 해당합니다.

1. 카테고리 글자크기, 여백 설정하기

/_sp/css/customize.css 파일을 열어주세요.

왜 이 파일에 모든 코드를 넣냐면, 나중에 어느 부분을 수정했는지 쉽게 알 수 있도록 모아둔다고 보시면 됩니다.

여러분들은 스킨을 제작하는 입장이 아니라, 입맛에 맞게 하나씩 수정해서 사용하는 부분이므로 override 형태로 css를 덮어서 쓰시길 바랍니다.

물론 이 방식은 코드의 속도를 저하시키지만 여러분이 작성하는 코드 몇줄로 사용자들이 체감할 수 있는 경우는 없다고 단언합니다.

자 이제 코드를 작성할 준비가 되었으니, 카테고리의 폭을 설정해보도록 하겠습니다.

엔진의 카테고리는 센터정렬이므로, 좌우 폭을 설정해서 원하는 모습으로 설정하실 수 있겠습니다.

아래의 코드를 넣어서 수정해보시길 바랍니다.

#sp-category-1-normal > ul > li > a {

    font-size: 13px; /* 글자크기 */

    line-height: 48px; /* 카테고리의 높이 */

    padding: 0 23px; /* 카테고리의 좌우 폭 : 위아래는 0, 좌우로는 23px씩 폭을 두라는 의미 */

    letter-spacing: 0.05em; /* 카테고리의 자간을 넓게, 혹은 좁게 설정합니다. */

}

css 코드가 어렵게 보일 수 있겠지만, 

사실 이 언어만 알아도 거의 대부분의 원하는 모습을 만들어낼 수 있습니다. ( 언어의 장벽도 굉장히 낮은편이구요 )

카테고리를 전체적으로 위처럼 수정했다면, 개별적으로도 한번 수정해보겠습니다.

2. 특정 카테고리의 스타일 변경하기

예를들어 이벤트나, 혹은 밀고 있는 카테고리가 있다면 아래와 같은 코드를 넣어서 특정 카테고리의 스타일을 변경하세요.

#sp-category-1-normal > ul > li[data-no="24"] > a {

  color:#ff3300;

}

이 코드는 24번 카테고리에 해당하는 글자를 #ff3300 의 색상을 넣어라라는 의미입니다.

24번은 카테고리 번호입니다. 각 카테고리 번호는 아래의 이미지에서 확인하시길 바랍니다.

카테고리 번호를 이해하셨다면, 이제 원하는 모습으로 카테고리에 두께를 주거나 색상을 줄 수 있습니다.

간혹 어떤 분들께서는 카테고리에 [ <font color="red">DRESS</font> ] 이렇게 하시는 분이 있으신데요, 

카테고리에 태그를 주는건 코드상으로 아주 좋지 않은 방법입니다. 가급적 이 방법은 사용하지 마시길 바랍니다.

3. 수동 카테고리 추가하기 

브랜드소개, 게시판 등 카테고리가 아닌 링크를 카테고리 자리에 넣을 수 있습니다.

html을 편집하기 위해 아래의 경로로 파일을 열어주시길 바랍니다.

카테고리 스타일에 category-1 이라는건 앞으로 저희가 -2도 만들겠다는 의미로 보시면 되겠습니다 ^^

이 코드를 여시면 아래와 같은 카테고리 코드가 있습니다. 약 33번째 줄 입니다.

  <!--카테고리-->

  <!--@css(/_sp/apps/module/category/category.css)-->

  <!--@js(/_sp/apps/module/category/category.js)-->

  <div id="sp-category-1-normal" getcategory module="Layout_category">

<ul>

<li class="nohave" mom category data-no="BRAND" direction="left"><a href="/product/brand.html">BRAND</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>

<li class="nohave" mom category data-no="TIMESALE" direction="left"><a href="/product/timesale.html">TIMESALE</a></li>

 <li class="nohave" mom category data-no="REVIEW" direction="left"><a href="링크">REVIEW</a></li>

</ul>

  </div>

붉은색 코드를 넣으면 타임세일 우측으로 수동 링크가 REVIEW 라는 이름으로 들어가게 됩니다.

만약 카테고리가 뎁스가 있는 경우라면 아래와 같은 마크업 구조로 추가 하시길 바랍니다.

2단계

<li mom="" category="" data-no="42" direction="left" class="nohave">

<a href="링크">대분류</a>

<div class="sp-sub-category">

<ul class="sp-sub-category-1">

<li data-no=""><a href="링크">중분류</a></li>

<li data-no=""><a href="링크">중분류</a></li>

</ul>

</div>

</li>

3단계

<li mom="" category="" data-no="42" direction="left" class="nohave">

<a href="링크">대분류</a>

<div class="sp-sub-category">

<ul class="sp-sub-category-1">

<li data-no="">

<a href="링크">중분류</a>

<ul class="sp-sub-category-2">

<li data-no=""><a href="링크">소분류</a></li>

<li data-no=""><a href="링크" class="sp-more">소분류</a></li>

</ul>

</li>

<li data-no=""><a href="링크">중분류</a></li>

</ul>

</div>

</li>

4단계

<li mom="" category="" data-no="42" direction="left" class="nohave">

<a href="링크">대분류</a>

<div class="sp-sub-category">

<ul class="sp-sub-category-1">

<li data-no="">

<a href="링크">중분류</a>

<ul class="sp-sub-category-2">

<li data-no=""><a href="링크">소분류</a></li>

<li data-no="">

<a href="링크" class="sp-more">소분류</a>

<ul class="sp-sub-category-3">

<li data-no=""><a href="링크">상세분류</a></li>

<li data-no=""><a href="링크">상세분류</a></li>

</ul>

</li>

</ul>

</li>

<li data-no=""><a href="링크">중분류</a></li>

</ul>

</div>

</li>

복잡해보이지만 실제로 복사해서 넣으시면 그렇게 어렵지 않으실거예요~

조금만 깊게, 관심있게 봐주시면 쉽게 이해하실 수 있습니다.

* 메인 카테고리에 노출되는 항목 설정하기

이 질문을 하시는 분들이 많으신데요, 관리자에서 쉽게 설정 가능하니 아래 이미지를 참고하시길 바랍니다.