*

시작하기에 앞서 카테고리는 상당히 복합적으로 구성되어 있음을 미리 안내드립니다.

 - 단순하게 사용하는것도 가능하지만,

 - 짜임새있게 구성해서 알뜰하게 디자인하는것도 가능합니다.

 - 응용을 많이 하셔야 하구요, 아래 메뉴얼은 기본적인 기능에 대한 안내입니다.

1. 카테고리 파일 열기

/_sp/import/category_list.html

카테고리는 이 파일에서 모든것이 이루어집니다.

2. 기본적인 골격 ( 관리자 연동부 )

약 31번 라인은 관리자에서 연동되는 카테고리 입니다.

이 부분은 수정하지 않으셔도 됩니다. 관리자에서 카테고리를 수정하면 이부분에 자동으로 채워집니다.

<!--관리자 연동 : 삭제하지 마세요-->

<li elem cate="{$cate_no}" lineto="c|3|0.6"><a href="/{$design_page_url}{$param}">{$name_or_img_tag}</a></li>

<li elem cate="{$cate_no}" lineto="c|3|0.6"><a href="/{$design_page_url}{$param}">{$name_or_img_tag}</a></li>

<!--// 종료-->

3. 수동 카테고리 넣기

수동 카테고리는 두가지 형태로 크게 분류됩니다.

일반적인 수동 카테고리

<li elem cate="lookbook" lineto="c|3|0.6"><a href="/board/gallery/list.html?board_no=8">LOOKBOOK</a></li>

<li elem cate="qna" lineto="c|3|0.6"><a href="/board/product/list.html?board_no=6">Q &amp; A</a></li>

<li elem cate="review" lineto="c|3|0.6"><a href="/board/review/list.html?board_no=4">REVIEW</a></li>

동영상 수동 카테고리

<li elem cate="video" lineto="c|3|0.6">

<a href="#none" videoplay="youtube" data-id="F-XeN8PRoXQ" data-start="true" data-sound="true"><i class="fab fa-2x fa-youtube"></i>&nbsp; VIDEO</a>

</li>

붉은색은 효과에 대한 설정이므로 삭제하셔도 무방하나 

스킨 기본 디자인과 똑같이 쓰신다면 있는게 좋겠습니다.

이 두가지 타입을 관리자연동 카테고리 위에 놓느냐, 아래에 놓느냐에 따라 달라집니다.

위에 놓으면 카테고리 앞에 보여지구요, 아래에 넣으면 카테고리 뒤에 보여집니다.

예를 들어

티셔츠 | 청바지 | 잠바

이런 카테고리가 있다면

<li elem cate="lookbook" lineto="c|3|0.6"><a href="/board/gallery/list.html?board_no=8">상품문의</a></li>

<!--관리자 연동 : 삭제하지 마세요-->

<li elem cate="{$cate_no}" lineto="c|3|0.6"><a href="/{$design_page_url}{$param}">{$name_or_img_tag}</a></li>

<li elem cate="{$cate_no}" lineto="c|3|0.6"><a href="/{$design_page_url}{$param}">{$name_or_img_tag}</a></li>

<!--// 종료-->

이렇게 넣게 되면

상품문의 | 티셔츠 | 청바지 | 잠바

이렇게 보여집니다.

4. 카테고리 색상, 이미지 넣기, 글자 바꾸기, 메뉴 스타일 변경하기

이 부분에서 조금 어려울 수 있습니다.

하지만 이해한다면 전혀 어려울 것 없습니다. 꽤 쉽기 때문입니다.

기본적으로 이 기능은 배너관리와 연결되어 있습니다.

그리고 아래와 같이 배너를 등록하거나 수정할 수 있습니다. ( 배너명이 매우 중요합니다 )

속성값은 아래와 같습니다.

cate="23" // 적용될 카네고리 번호

change="TOP7" // 마우스 오버시 바뀔 글자입니다.

color="#437bb5" // 카테고리 색상입니다. #RGB 코드로 입력하세요.

noimage // 이 값이 있으면 이미지를 사용하지 않습니다.

type="normal" // 이 값이 있으면 마우스 오버시 카테고리부분만 |__| 이렇게 노출됩니다.

cover="true" // 이 값이 있으면 아무스 오버시 풀화면으로 이미지를 사용합니다 ( 중분류 없을시 사용하세요 )

이미지를 사용하고 싶지 않다면 배너명에 

noimage cate="23" type="normal" change="TOP7" color="#437bb5" 이렇게 입력합니다.

이 코드들을 조합해서 배너명을 만드시면 됩니다. ( 속성끼리는 한칸씩 띄워주세요 ) / change="TOP7" 한칸띄우고 color="#437bb5"

배너가 실제로 보여지는 영역은 아래와 같습니다.

이 배너들은 카테고리번호와 서로 체인으로 연결된 부분입니다.

5. 풀화면이 아닌 일반 카테고리처럼 마우스 오버시 카테고리만 나오도록 설정하기

이 기능은 원래는 지원할 의도가 없었으나, 넓게 나오는게 부담스러울 고객분들을 위해서 제작되었습니다.

4번을 참조하되, 배너명에 noimage cate="23" type="normal" 이렇게 속성을 추가하시면 아래처럼 보여질 수 있습니다.

이러면 23번 카테고리에 마우스를 올려면 위처럼 카테고리만 보여지게 됩니다.

6. 중분류 카테고리들이 보여지는 구간을 정렬하기 

이 부분도 상당히 난이도가 있는 부분입니다.

사실 알고 쓰면 끝도 없이 응용이 가능하지만, 모르고 사용하면 그냥 단순한 웹사이트가 되므로 꼭 숙지합시다.

총 사이즈는 1260px 이므로 잘 고려하셔서 카테고리를 이미지를 등록하시면 되겠습니다.