ART of WEB

"엑수시아"

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

[2015-08-30 블로그 이전 안내]

안녕하세요. 서토리(구 필명 엑수시아)입니다. 전문적인 개발 블로그로 다시 태어나기 위해 부득이하게 블로그를 이전하게 되었습니다. 앞으로는 아래의 주소로 접속 부탁드립니다. 감사합니다.

서토리 블로그 바로가기

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

COMMENT

비밀글 Add Comment
  1. 드림걸
    드림걸 ㆍ2013.11.17 14:37 신고ReplyEdit

    엑수시아님 반갑습니다.
    빠르고 멋진 포스팅 정말 감사합니다.
    복 받으실 거에요^^
    휴일...행복한 시간되세요!!
    애드??...클릭하고 갈께요..ㅎㅎ

    • BlogIcon 엑수시아 ㆍ2013.11.18 12:43 신고Edit

      사실 제 카테고리에 쓰이고 있는 css 는 훨씬 복잡합니다. 하지만 가장 기본적인 틀만으로 자기가 원하는 방향으로 진행하는게 더 쉬울꺼 같아 기본만 적었습니다. ^^

  2. BlogIcon Estoque ㆍ2013.11.18 08:17 신고ReplyEdit

    우왕 기본 카테고리를 이렇게 쓸수도 있군요!

    저는 3단으로 쓰고 싶어서 그냥 메뉴를 새로 만들었는데 새로 항목추가하는게 여간 귀찮은 일이 아니네요 -_-a

    • BlogIcon 엑수시아 ㆍ2013.11.18 12:45 신고Edit

      ㅎㅎ 블로그 관리하는데 글쓰는것 이외에 다른 변수를 일일이 해주려면 너무 관리하기가 벅차죠.. ㄷㄷ 그래서 저는 스크립트로 전부 자동으로 만들어버렸다는.... -_ -a 귀차니즘이 불러온 진화랄까요... ㄷㄷ

  3. ㆍ2013.11.23 20:56ㆍReplyEdit

    비밀댓글입니다

  4. BlogIcon BoniK ㆍ2013.12.02 05:05 신고ReplyEdit

    좋은 포스팅 잘 보고 있습니다~
    질문이 있는데 드롭다운메뉴에 new (새글)표시는 어떻게 하셨나요? 저도 하고 싶은데 어떻게 접근해야 될지 모르겠네요.
    힌트 좀 알려주세요.

    • BlogIcon 엑수시아 ㆍ2013.12.02 08:36 신고Edit

      아... 카테고리를 css만으로 드롭다운 리스트를 만들었다면, 어드민 > 카테고리 설정 > 새글 표시 해주시면 뜰껍니다. ^^ 그래도 안뜬다면.. 그때 다시 알려주세요 ㅎㅎ 소스 한번 봐볼게요 ^^

    • BlogIcon BoniK ㆍ2013.12.02 09:11 신고Edit

      치환자를 안쓰고 만들었었는데 치환자를 쓰면 new아이콘도 나오나 보네요. 일단 수정해봐야겠습니다. 답변 감사합니다. 좋은 하루 되세요.

    • BlogIcon 엑수시아 ㆍ2013.12.02 09:24 신고Edit

      아.. 카테고리를 직접구성하셨군요. 이럴 경우 유지보수가 힘들어서 왠만하면 치환자를 사용하시는걸 추천합니다. ㅎㅎ; 참고로 원래 쓰던 자리(ul 태그 자리)에 치환자를 쓰실경우 css 가 틀어질수가 있어서 꼭 테스트 해보셔야 합니다. ^^

    • BlogIcon BoniK ㆍ2013.12.03 14:39 신고Edit

      어제 5시간 붙잡고 씨름하다가 GG쳤네요.ㅠㅜ
      제가 html 부분에는
      <div id="cssmenu"><div>
      이렇게 쓰고 CSS소스는 아래걸로 사용하려고 하는데
      https://dl.dropboxusercontent.com/u/10559122/custom_cat.css
      코드 수정하면 사용 가능한지 좀 여쭤봐도 될까요?

      분류전체보기만 없으면 그냥 되는데 이 놈 때문에 바로 적용이 안되네요. 치환자로 나올 때는 ul li가 하나씩 더 있는걸 확인하고 CSS에서 ul li 좀 수정하다보면 될 줄 알았는데 css소스를 이해를 잘 못하니 변경도 애를 먹네요.
      제가 이쪽으로 배운적도 없고 주변에 웹쪽으로 아는 사람이 없어서 물어볼 곳이 없네요. 소스를 수정해 달라는 것은 아니구요. 지금 소스를 살짝 수정해서 가능한건지 알려주시면 시간날 때 다시 노가다를 해보려고 합니다. 바쁘실텐데 무시하셔도 괜찮습니다. 블로그 다른 글도 잘 보고 있습니다. 좋은하루 되세요~

    • BlogIcon 엑수시아 ㆍ2013.12.03 15:40 신고Edit

      음 블로그에 게시판이 하나 있길래 분량이 꽤 되서 거기에 작성을 했습니다.
      한번 확인해보시면 될꺼 같아요 ^^
      해보시고 안되면 저에게 알려주세요 ㅎㅎ

    • BlogIcon BoniK ㆍ2013.12.03 16:33 신고Edit

      드롭다운 성공했네요. 바쁘실텐데 소스까지 직접 수정해 주실줄은 몰랐습니다. 감사합니다.
      나머지 배경색 수정은 제가 한 번 해보겠습니다. 제가 할 때는 드롭다운 자체가 안됐는데 역시 고수님들은 존경스럽습니다. 다시 한 번 감사드려요. (_ _)

    • BlogIcon 엑수시아 ㆍ2013.12.03 16:55 신고Edit

      지.... 직업이니까요.. ㄷㄷ;; 무튼 잘 수정 되었다니 다행입니다. ^^

  5. BlogIcon Colby J ㆍ2013.12.09 19:51 신고ReplyEdit

    정말 괜찮은 팁이네요. 원래 이런건 티스토리에서 기본으로 제공해줘야된다고 생각하는데.. ㅎ

    • BlogIcon 엑수시아 ㆍ2013.12.09 22:26 신고Edit

      ㅎㅎ 그쵸 이런거 있으면 css 잘못다루시는 분들도 쉽게 드롭다운 리스트 만들 수 있을텐데 아쉬움은 좀 있네요 ㅎㅎ

  6. BlogIcon 달핑 ㆍ2016.11.09 11:14 신고ReplyEdit

    덕분에 사이드바 수정을 할수 있게 되었습니다ㅠㅠㅠHTML이란 CSS에 관해서도 조금은 알 수 있게 되었어요! 정말 너무너무 감사합니다ㅠㅠㅠㅠ정말정말 감사합니다ㅠㅠㅠ

  7. ㆍ2017.04.13 09:09ㆍReplyEdit

    비밀댓글입니다

< 1 2 3 4 5 6 7 ··· 52 >