언제나 피어있는 꽃

제 블로그의 카테고리에 마우스를 올려보세요~ 마우스를 올리면 배경색과 글씨색이 변합니다:D
저 혼자 이걸 만들려고 낑낑거렸다가 어찌어찌해서 만들었는데, 외국 사이트에서 CSS로 깔쌈하게 만든걸 보고 충격 먹었죠- _-;(지금은 CSS로 되어있습니다)
이번엔 이 메뉴를 만들어볼까합니다. CSS로 하면 아주 간단하게 할 수 있습니다

HTML과 CSS파일을 독립적으로 사용하므로, 이전글인 기본적인 CSS 글을 먼저 읽어주세요


# 메뉴는 리스트로

이 메뉴는 리스트를 이용해서 만들어집니다. 리스트는 크게 순서 없는 <ul>, 순서 있는 <ol>로 구분되며, 각 단위는 <li> ~ </li>로 사용합니다. 이해가 안되면 예제를 봐주세요


결과를 봅시다

각 리스트의 속성은 나중에 알아보도록 합시다
리스트를 CSS를 이용해서 꾸밀 수 있습니다

HTML은 위의 예제를 그대로 놔두고, CSS만 수정해봅시다


아아- 갑자기 엄청난게 나왔습니다; 하나하나 살펴보도록 합시다


먼저, 모두 앞에 샵(#)이나 점(.)이 없는건 따로 지정할 필요가 없이 이미 지정되어있기 때문입니다. HTML에서 사용한 태그인 ul 과 li가 보이죠?(1~2번째 줄)

a:link 와 a:hover 은 각각 '링크'와 '마우스가 올라온 링크'로 구분됩니다


ul과 li

ul에 적용된 스타일 padding:0;  margin:0; list-style:none; 입니다
패딩과 마진은 이전에도 설명한적 있으니 링크만 걸고 넘어가겠습니다(패딩과 마진)

list-style:none; 은 목록 특유의 속성, 그러니까 위의 결과 화면에서 각 목록 앞에 붙은 검은 동그라미를 제거하는 역할을 합니다. 리스트 스타일(list-style)을 없는걸로(none) 하라는 명령입니다

li에 1픽셀의 마진이 보이는군요. 이건 의외로 중요한 역할을 맡고 있습니다. 위 목록과 1픽셀의 여백을 두어 뒷배경색이 보이도록 하는 것이죠. 쉽게 말해 구분한다, 라는겁니다

이해를 못하셔도 계속 읽으시면 바로 이해가 갈겁니다:D


a:link

a:link는 링크의 스타일을 지정합니다. 위에서 지정한 스타일은 display:block; 와 padding:2px 5px; 와 width:180px; 와 height:20px; 와 background-color:#A8D4FF; 입니다

패딩은 역시 무시하고^^;

display:block; 은 해당된 부분을 블록으로 묶으라는 명령어 입니다. a:link에 이게 적용되었으니, 링크는 모두 블록으로 묶음 처리됩니다

width:180px;는 가로 사이즈를 180픽셀로 하라는 명령이고, height:20px;는 세로 사이즈를 20픽셀로 하라는 명령어 입니다. 이 명령어는 위의 블록 명령어와 합쳐지게 됩니다

즉 3가지 명령을 합치게되어, '링크를 가로 180픽셀 세로 20픽셀의 블록으로 지정'이라는 명령이 됩니다
참고로 블록 지정 명령이 없으면 가로와 세로 사이즈를 정할 수 없습니다

background-color:#A8D4FF; 는 뒷배경색을 A8D4FF로 한다는건데, A8D4FF는 연한 파랑색입니다


a:hover

a:hover 의 스타일은 링크보다 적군요
background-color:#0057AE; 와 color:#FFFFFF; 와 text-decoration:none; 입니다

적은것 뿐만이 아니라, 쉽기도 하군요

background-color:#0057AE; 는 뒷배경색을 0057AE로 하라는것이며, 0057AE는 짙은 파랑색입니다

color:#FFFFFF; 는 글씨색을 FFFFFF, 즉 흰색으로 하라는 것 입니다

text-decoration:none; 은 텍스트 꾸미기인데, 여기에선 없음(none)로 되어있군요



위의 CSS를 적용한후의 결과 화면입니다
응? 검은 동그라미가 없는거랑 무슨 차이죠- 3-?! 차이 없잔수!!
유심있게 본 분이라면 아실테지만, 우리는 링크에만 스타일을 지정했습니다. 즉, 일반 텍스트에는 아무런것도 나오지않는다, 라는 것이죠

에- 그러니까, 아무 링크라도 걸어줍시다- _-;


이렇게 아무것도 없는 링크를 걸어도, 링크된 텍스트로 판단하여 스타일이 제대로 나옵니다

빠밤- 제대로 적용되는 군요:D 보면 각 리스트 사이에 흰색 줄이 있는데, 이건 줄이 아닙니다. 처음 li에서 1픽셀의 여백을 줬으므로, 각각 1픽셀씩 떨어져있는것이죠

자자, 그럼 마우스를 올려보면 어떻게 될까요?


이렇게 짙은 파랑색으로 변하게 됩니다.


# 카테고리에 적용하는 방법

제 블로그처럼, 카테고리에 적용하는 방법은 매우 간단합니다
카테고리에 적용하는 방법은 티스토리 기본 스킨을 기준으로 설명하겠습니다



먼저, 트리로 출력되는 카테고리를 리스트로 바꿔줘야합니다
HTML/CSS 수정창에서 _category_ 를 찾아 _category_list_ 로 바꿔주세요. 그럼 카테고리가 트리가 아닌 리스트로 출력됩니다

위의 이미지를 보시면 아시다시피, 카테고리 치환자는 category라는 ID 안에 있습니다
고로, 카테고리를 설정하려면 CSS에서 #category 를 찾으면 되겠습니다


이 부분을 모두 지우고, 우리가 위에서 만든 소스를 넣어주면 되는데, 그대로 넣으면 안되고 ID에 맞춰서 넣어줘야합니다. 어려운 작업이 아니고, 그냥 제일 앞에 #category 를 넣어주면 됩니다


자~ 결과는?!



...쉬운거 하나도 없습니다- _-; 기본스킨에서는 목록에 이미지를 추가하도록 설정되어있어서, 이걸 제거해야하겠는데...제거하면 최근 글등의 다른 것들까지 지워지게 됩니다. 골치아프군요

하지만, 이것은 모두 파악했습니다. 바로 해결 하도록 하죠
위의 이미지처럼, 목록에 이미지를 추가하는 부분이 어딘가를 봐야합니다


저부분입니다. li에 설정되어있군요
그럼, 우리가 방금전에 추가한 CSS에서 li 부분을 수정해주면 됩니다


노란색으로 되어있는 부분이 추가된 부분입니다
패딩과 마진값을 모두 0으로 하고, 이미지를 없음으로 설정(background:none;)했군요
그리고 뒤에는 우리가 먼저 입력했던 마진-탑 1픽셀이 남아있습니다
....그전에 마진은 0으로 설정했는데 말이죠;

이렇게 같은 명령이 있는 경우, 나중에 된것을 우선적으로 적용됩니다


자자, 그럼 제대로 수정되었는지 확인 합시다


제대로 적용됩니다! 마우스를 올려도 제대로 색이 바뀌는군요~
이렇게 하면 하위 카테고리를 제대로 구분할 수 없는게 단점입니다만, 보안할 방법이 없는건 아닙니다
일단 전 하위 카테고리가 필요 없으니까, 나중으로 미루도록 합시다(..어이)