티스토리 카테고리, 드롭다운 리스트로 변경하기

제 블로그에 어느 분이 문의를 하셔서 포스팅으로 답변합니다. (궁금한거 있으면 질문하세요. ㅇㅇ) 다른 글들을 찾아보니 다들 너무 어렵게 작성하셨거나 설명이 충분치 못한거 같아서....... 저는 쉽게 설명하고 만들어 볼렵니다. 세상 사는것도 쉽지 않은데 코딩도 힘들면 쫘증 -_ -a 

무튼 이번 팁은 카테고리 리스트를 드롭다운 리스트로 만드는 법입니다. 네, 제 스킨에 현재 적용 되어 있는 부분이죠. HTML태그의 기본적인 것부터 설명할려고 합니다. 사실 이런 것도 만드는 것은 크게 중요하지 않습니다. 더 중요한 것은 기본기(HTML의 사용 방법)이니까요. 더 궁금한 점이 있으면 댓글 달아주세요. ^-^

현재 티스토리 치환자에서 카테고리 노출 방법을 지정하는 방법은 2가지가 있습니다. [ ##_category_## ] 이 치환자를 사용해서 기본적으로 제공하는 <table> 구조의 카테고리를 사용하시거나, [ ##_category_list_## ] 치환자를 이용해서 <ul> 형식의 카테고리를 사용하는 방법입니다. 우리는 후자([ ##_category_list_## ])를 이용합니다. 일단 카테고리 HTML 마크업부터 살펴봅시다. 현재 카테고리 치환자가 HTML 로 변경되면 아래와 같은 구조가 됩니다. (마크업은 그냥 제 블로그 기준으로 갑니다.)

<div class="category">
<ul>
	<li>
		<a href="/category">분류 전체보기 </a>
		<ul>
			<li><a href="/category/공지사항">공지사항 </a></li>
			<li><a href="/category/한마디">한마디 </a></li>
			<li>
				<a href="/category/이야기">이야기</a>
				<ul>
					<li><a href="/category/이야기/일상%20이야기">일상 이야기</a></li>
					<li><a href="/category/이야기/사랑%20이야기">사랑 이야기</a></li>
					<li><a href="/category/이야기/속%20이야기">속 이야기</a></li>
					<li><a href="/category/이야기/웃긴%20이야기">웃긴 이야기</a></li>
					<li><a href="/category/이야기/게임%20이야기">게임 이야기</a></li>
				</ul>
			</li>
			<li>
				<a href="/category/스케이트보드">스케이트보드 </a>
				<ul>
					<li><a href="/category/스케이트보드/스케이트보드%20초보%20이야기">스케이트보드 초보 이야기 </a></li>
					<li><a href="/category/스케이트보드/스케이트보드%20영상">스케이트보드 영상</a></li>
				</ul>
			</li>
			<li><a href="/category/사진">사진</a></li>
			<li>
				<a href="/category/IT">IT</a>
				<ul>
					<li><a href="/category/IT/IT%20이야기">IT 이야기</a></li>
					<li><a href="/category/IT/Algorithm">Algorithm</a></li>
					<li><a href="/category/IT/DB%20%26%20sql">DB & sql</a></li>
					<li><a href="/category/IT/Design%20Patterns">Design Patterns</a></li>
					<li><a href="/category/IT/Design%20%26%20Photoshop">Design & Photoshop</a></li>
					<li><a href="/category/IT/Java%20%26%20JSP%20%26%20FW">Java & JSP & FW</a></li>
					<li><a href="/category/IT/HTML%20%26%20CSS">HTML & CSS</a></li>
					<li><a href="/category/IT/UX%20%26%20UI">UX & UI</a></li>
					<li><a href="/category/IT/javascript%20%26%20jQuery">javascript & jQuery</a></li>
					<li><a href="/category/IT/ETC">ETC</a></li>
				</ul>
			</li>
			<li>
				<a href="/category/블로그멘토">블로그멘토 </a>
				<ul>
					<li><a href="/category/블로그멘토/블로그%20팁">블로그 팁</a></li>
					<li><a href="/category/블로그멘토/블로그%20스킨%20배포">블로그 스킨 배포</a></li>
					<li><a href="/category/블로그멘토/블로그%20웹로그%20분석">블로그 웹로그 분석</a></li>
					<li><a href="/category/블로그멘토/블로그%20소개">블로그 소개</a></li>
					<li><a href="/category/블로그멘토/블로그%20운영일지">블로그 운영일지 </a></li>
				</ul>
			</li>
			<li>
				<a href="/category/자료">자료</a>
				<ul>
					<li><a href="/category/자료/Photoshop">Photoshop</a></li>
					<li><a href="/category/자료/바탕화면">바탕화면</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</div>

꽤... 길죠?? -_ -;; 당황하지 맙시다. 실무는 헬이니까요. 이 정도는 괜찮습니다. 자 일단 위의 언어를 살펴보면 제가 전에 적었던 티스토리 카테고리(category) 디자인하기!!! 글 처럼 <ul> 태그가 겹겹히 겹친 3중 <ul> 구조 입니다. 지금 보면 <div>가 하나 감싸져 있는데 제가 임의로 생성한 div 입니다.

<div class="category">[ ##_category_list_## ]</div>

스킨을 구성하실 때에 위처럼 하시면 똑같이 나옵니다. 무튼 기본적으로 마크업된 HTML을 화면에서 한 번 보도록 하겠습니다.

< 기본적으로 마그업 된 HTML >

어디서 많이 본 화면이죠? 네 워드프로세서의 리스트 형식을 쏙 닮았네요. 그런데 그거 아세요? 워스프로세서도 HTML 기반이라는거. 그래서 웹상의 페이지를 긁어다가 붙여도 깨지지가 않죠. 또 워드프로세서로 포스팅이 가능한 것 역시 기반이 같이 때문입니다. ㅇㅇ 

헛소리는 여기까지하고;; 원론으로 돌아가서, 제가 아까 티스토리 카테고리 <ul> 3 중 구조라고 이야기를 했었죠. 아래 스타일시트(css) 를 적용해 봅시다.

.category ul {background-color: green}

.category ul ul {background-color: red}

.category ul ul ul {background-color: blue}

첫 번째 라인의 뜻은 class 네임이 category 인 태그를 찾아서 그 안에 있는 ul의 배경색을 green 으로 지정, 두 번째 줄을 ul 안에 있는 ul의 배경색을 red로 지정, 세 번째 뜻은 ul 안에 ul 안에 ul 의 배경색을 blue 로 지정합니다.

< 요로케 됩니다. ul 3중 구조 이해 되셨죠? >

만들다 보니까 앞에 list-style 과 왼쪽 여백을 다 없애고 싶네요. ul,ol,dt,dd,li 태그들은 기본적으로 왼쪽에 margin 값을 가지고 있답니다. 그래서 보통 홈페이지나 블로그를 만들고 스타일시트를 만들때에 초기화를 시켜주지요. 즉 통일을 시키는 방법입니다. 이 부분은 제가 작성했던 글 중 블로그 스킨 제작에 유용한 css 초기화 기법 이쪽을 참조하시면 될듯 합니다. 저희는 드롭다운 리스트를 만들기 때문에, 왼쪽 공백이라던지 기본적으로 가지고 있는 list-style 이 필요가 없죠. 아래 스타일 시트를 한줄 더 추가합니다.

ul, li {padding:0px; margin:0px;list-style:none}

ul, li 태그의 마진과, 패딩 요소의 여백을 0으로 만듭니다. 그리고 리스트 스타일을 없앰으로 아래와 같은 모양이 됩니다.

< 초기화 된 ul, li 태그 >

이제 기준이 되는 메뉴가 있어야하겠죠. 제 카테고리 기준으로는 공지사항, 한마디, 이야기 같은 2번째에 속한 li 태그 요소들입니다.

.category ul li ul li {width:100px;float:left}

위와 같은 css 를 한줄 더 추가합니다. 2번째 ul 태그 밑에 li 태그의 폭을 100px로, float (중요한 css 속성이니 찾아보세요!) 속성을 줌으로써 요소들이 아래로 내려가는 것이 아니라 왼쪽으로 붙일 수가 있습니다. 아래와 같은 사진이 됩니다.

< float 는 중요하다! 그럴싸해진 드롭다운 리스트! >

속성 한 줄만 추가했을 뿐인데 그럴싸해졌습니다. +_ + 이제 남은 것은 3번째 ul 태그를 감추는 일입니다. 아래의 css 를 한 줄 더 추가합니다.

.category ul li ul li ul {display:none}

< 사라진 하단메뉴 >

css 를 한줄 추가하면 위의 사진처럼 될껍니다. 하단의 ul 을 감춤으로 안보이게 하는것이죠. 그럼 이제 해당 ul 은 어떻게 보여야 할까요. 어렵게 생각하지 않으셔도 됩니다. 아래의 css 를 한줄 더 추가합니다. ㅇㅇ

.category ul ul li:hover ul {display:block}

설명하자면 두번째 ul태그 안에 li태그가 마우스오버(:hover) 되었을 때 그 밑의 ul 태그를 다시 보여라는 뜻입니다.

< IT 란이 활성화 된경우 >

해보시면 아시겠지만 위의 스샷처럼 마우스오버시에 하위메뉴가 보여지게 됩니다. 이로써 카테고리를 드롭다운 리스트로 바꾸는 방법은 완성입니다 ㅇㅇ!! 그런데 저 위에 분류 전체보기가 거슬리네요. 아래의 css 를 한줄 추가합시다.

.category > ul > li > a {width:0px;height:0px;display:none}

선택자를 이용해서 category 의 자식요소 ul 그 자식요소 li 그리고 그 자식요소인 a 태그를 감춰버리는 css 설정입니다. 선택자인 '>' 를 잘 모르겠다면 공부가 필요합니다. css에서 자손과 자식의 의미는 중요하니까요. 무튼 위의 css 까지 적용하면 아래와 같이 됩니다.

< 완성된 드롭다운 리스트 >

드디어 완벽하게 드롭다운 리스트가 완성 되었습니다. 지금까지 적용되었던 css를 몰아서 아래에 적어둡니다. 제 생각에는 다른 요소들 (색을 변경한다던지 좀 더 복잡한 css)를 제외하고는 가장 클린에 가까운 css 이지 않을까 싶습니다. 아래 적힌 css 를 가져다가 입맛대로 꾸며보시면 이해도 되고 재미도 있으실껍니다. 헤헤 ^0^

ul, li {padding:0px; margin:0px;list-style:none}

.category ul {background-color: green}
.category ul ul {background-color: red}
.category ul ul ul {background-color: blue}

.category ul li ul li {width:100px;float:left}
.category ul li ul li ul li {width:200px}

.category ul li ul li ul {display:none}
.category ul ul li:hover ul {display:block}

.category > ul > li > a {width:0px;height:0px;display:none}