[블로그 꾸미기] 태그 목록을 꾸며보자

 안녕하세요. 오늘 원래 Windows Live Writer 에대한 팁을 적어보려했는데 생각처럼 잘 안되더군요. 그래서 어쩔수없이 기본적인건 모두 제시했다고 생각하여 넘어가기로 했습니다. 차후에 정보가 될만한게 있으면 작성해보도록 하겠습니다. 그래서 오늘은 블로그 꾸미기 를 작성해보도록 하겠습니다. 제목에서처럼 tag (태그)목록을 꾸며보도록 하겠습니다. 현재 재공되고있는 블로거 스킨에서는 조금 아쉬운 부분이 많이있습니다. 정말 기본적으로 제공을 할뿐 스타일적인 면에서는 깔끔함 정도가 전부입니다. 하지만 여러 블로그를 돌아다니다보면 태그목록 또한 조금 색다르게 수정해둔 경우가 많이 있습니다. 연관성이 있을 것 같다는 생각이 들기 쉽고 한 눈에 들어오도록 만들어둔 블로그가 많이 있다는 겁니다. 네이버나 구글에서 검색하면 많은 팁과 정보가 있지만 블로거에는 적용하기 힘든 부분도 있는것 같습니다. 간단하게 수정/추가를 통하여 보기 좋게 편집해보겠습니다. 일단 먼저 tag 가 뭔지 알아야겠죠?

tag ?

• tga(태그) 라고 말을 하며 블로거에서는 라벨이라는 이름으로 표시됩니다. 상품의 내용등을 간단하게 작성하여 보기 쉽도록 첨부를 하는 그러한 단어 라고 보시면 됩니다. 예를들어 옷이라던지 기타 여러 제품을 구입하면 붙여있는 상표 그 상표가 tag 라고 할수있습니다. 블로그나 홈페이지에서 tag 의 역할은 포털사이트의 검색, 카테고리 등으로 나뉠수있는 간단한 정보로 사용되며 블로그에서는 이 블로그의 특징을 한눈으로 볼수있는 중요한 역할을 합니다.
   

 이정도면 대충 tag 가 무엇이고 어떠한 역할을 하는지 아셨을것이라 생각됩니다. 기본적으로 블로거에서는 아래와같은 모습을 하고있습니다.

[ 태그 리스트 기본 ]

이미지처럼 간단한 형식으로 태그, 태그 형식으로 되어있습니다. 이곳을 아래 이미지처럼 변경을 시켜보도록 하겠습니다.

[ 태그 리스트 수정 ]

 일단 저는 이렇게 해뒀습니다. 하지만 이게 최선은 아닙니다. 일단은 이런 형식으로 해뒀지만 차후에 변경은 언제든지 하려고합니다. 보기좋게만 해뒀습니다. 그럼 본격적으로 알아보도록 하겠습니다.

HTML 추가먼저!

html 편집

  
<data:postLabelsLabel/>를 찾습니다. 복사하셔서 찾기가 안될경우 postLabelsLabel 이렇게만 복사하셔서 찾기를 해주시면 하단부분으 <a 로 시작하는 부분이 보이실겁니다. 이 부분이 링크를 처리하는 부분입니다. 이곳에 class 를 추가를 해주셔야 합니다. 아래처럼 수정을 해주세요.

html 추가 class 부분을 추가해주세요.

• 수정 전 : <a expr:href='data:label.url' rel='tag'>
• 수정 후 : <a class='tag_a' expr:href='data:label.url' rel='tag'>

 위처럼 a 부분에 class 가 추가된것을 보실수있습니다. 이렇게 추가를 해주셨으면 이제 CSS 를 편집해주시면 됩니다. CSS 추가하는 방법은 전 게시물에서 안내했듯이 꾸미기 –> 템플릿 디자이너 –> 고급 –> CSS 에서 추가를 해주시면 됩니다.

CSS 추가로 마무리!

CSS 편집

.post-footer-line-2 {
margin-top:10px;
}
a.tag_a {
color:#333; background:#ccc; padding:4px; text-decoration:none;
}
a.tag_a:hover {
color:#fff; background:#333; padding:4px; text-decoration:none;
}

 이렇게 해주시면 됩니다. 간단하게 작성되었습니다. 각 부분 설명을 하면 아래와 같습니다.

• post-footer-line-2 : 이 부분은 전체적인 틀이 됩니다. tag 부분을 감싸고있는 틀인데 이곳에 위로 공간을 10을 주었습니다. 너무 붙으면 보기 싫죠.
• a.tag_a : 위 HTML 에서 추가했던 tag 부분입니다. 색상과 배경색상 페딩, 텍스트 옵션을 적용하였습니다.
• a.tag_a:hover : 마우스가 올라갔을때 효과입니다. 내용은 같고 색상만 다르게 되어있습니다.

 기본적인 내용을 제시했으며 추가라던지 수정이 가능합니다. 기존에 라운드를 지정하였지만 IE 에서는 작동을 하지 않기때문에 제외를 시켰습니다. 그런 이유로 사각형으로 표시가 될것입니다. 그게 정상이구요. 그리고 수정시 조심해야할부분은 이 외에것을 수정하면 페이지가 에러가 난다는 겁니다. 제가 해본결과 이미 지정되어있는 스킨에서는 잘못저장되거나 표현되는듯 싶으면 원래 원본하고 교체를 하는것 같습니다. 이렇게되면 CSS 추가 부분은 모두 삭제가 되구요. 혹시 모르기때문에 편집전 스킨 다운로드는 꼭 해주시고 작업을 하시면 좋을것 같습니다. 저도 두번 날려먹고 정신차렸네요.

이번 블로그 꾸미기는 여기까지입니다. 간단하게 써본다고 했는데 쉽게 적어졌는지 모르겠습니다. 다음에 조금더 쉽고 알찬글로 찾아뵙겠습니다. 보시고 모르시거나 그런부분있으면 언제든지 덧글 주세요:D