[카페24] 사이드 카테고리 변경하기
셀프로 하다보니 CSS의 구조와 배치는 늘 생소하다...
하나하나 대입해보고 메모를 해두는 수밖에...
일단 왼쪽 카테고리창을 정리해보려고 한다.
1. 카테고리 시작점 높이 조절
빨간색으로 표시한 시작점의 높이를 조절하는 방법
① category.css로 연결
② #category-base {margin-top:180px;} -> 기본값은 140px이었는데 180px으로 바꿨더니 아래로 더 내려왔다.
2. 카테고리 글자 크기 수정 및 간격 조절
메뉴 구성이 크게 총 3가지 분류로 되어있다고 가정하자.
메뉴1(쇼핑몰 상품분류) : SHOP/창업/★사업자전용/개인결제창
메뉴2(추가 메뉴) : 원두샘플신청
메뉴3(게시판) : NOTICE/Q&A
① category.css로 연결
② 메뉴1 수정
#category-base .d1-Menu .d1 > a { display:block; text-align:right;padding-right:20px; font-size:11pt; letter-spacing:0.5px; line-height:25px; color:#aaa; cursor:pointer; }
-> 폰트사이즈와 라인높이 조절칸에 원하는 숫자로 변경하면 된다. 기본값은 font-size:8pt, line-height:22px이었다.
② 메뉴2 수정
#add_menu .position li > a { display:block; text-align:right;padding-right:20px; font-size:11pt; letter-spacing:0.5px; line-height:25px; color:#aaa; cursor:pointer; }
-> 마찬가지로 위와 같이 수정해주면 된다.
③ 메뉴3 수정
#community .position li > a { display:block; text-align:right;padding-right:20px; font-size:11pt; letter-spacing:0.5px; line-height:25px; color:#aaa; cursor:pointer; }
-> 메뉴1,2번과 동일하게 수정.
3. 카테고리 메뉴 생성 및 링크 연결
기존에는 원두샘플신청을 게시판 형태로 활용해서 글을 남길 수 있도록 했는데, 변경되면서 네이버폼으로 연결되는 링크를 적용해봤다.
① left.html 연결
② 기존 형태
<!-- 게시판 메뉴 -->
<div id="community" module="Layout_BoardInfo">
<div class="position">
<ul>
<li><a href="{$board_list_url}">{$board_name}</a></li>
<li><a href="{$board_list_url}">{$board_name}</a></li>
<li><a href="{$board_list_url}">{$board_name}</a></li>
</ul>
</div>
</div>
기존에는 게시판으로 활용했기 때문에 위와 같은 형태였는데 위치를 추가 메뉴 쪽으로 바꿨다.
③ 변경
<!-- 추가 메뉴 -->
<div id="add_menu">
<div class="position">
<ul>
<li><a href="http://naver.me/FkPtIhzv"target="_blank">원두샘플신청</a></li>
</ul>
</div>
</div>
이렇게 메뉴명을 클릭하면 네이버폼으로 연결되도록 조치했다.
이렇게 하면 카테고리 내에 여러 링크 연결을 할 수 있을 것 같다.
여기서"target="_blank"> 는 새창으로 열기 기능이 추가되는 것이다.
아오 어렵다!!!