17. 티스토리 스킨 만들기 태그 로그

오늘은 태그 로그 부분을 수정해보도록 하겠습니다.

검색 결과 댓글 리스트와 위치 로그는 생략하겠습니다.

이유는 현재 이 두가지 기능을 사용하는 블로그는 없기 때문이죠.

자신은 위의 기능이 꼭 필요하다 하시는 분들은 티스토리의 스킨 가이드를 보고 따라하시면 됄 것 같네요.

그럼 태그 로그 부분을 수정해볼까요?

태그 로그 부분을 들어가는 방법은 블로그 주소/tag입니다.

제 블로그의 경우에는 http://kurien.tistory.com/tag겠죠?

물론 이 블로그의 경우엔 이 부분을 수정 안했지만...

어쨋든 시작하겠습니다.

      <s_tag>

      <div class="taglog">

        <h3>태그</h3>

        <ul>

          <s_tag_rep>

          <li>

            <a href="[ ##_tag_link_##]" class="[ ##_tag_class_##]">[ ##_tag_name_##]</a>

          </li>

          </s_tag_rep>

        </ul>

      </div>

      </s_tag>

먼저 HTML 부분입니다.

딱히 수정할 부분은 없습니다.

코드의 경우엔 스킨 가이드측에 있는것을 가져오니깐요.

CSS를 보겠습니다.

.taglog {overflow:hidden;}

.taglog h3 {margin-bottom: 10px;}

.taglog ul {list-style:none;}

.taglog li {float:left;list-style:none;}

.taglog li a {color:#0088CC;padding:5px;text-decoration:none;}

.taglog li a:hover {color:#333;}

.taglog .cloud1 {font-size:20px;font-weight:bolder;}

.taglog .cloud2 {font-size:18px;font-weight:bolder;}

.taglog .cloud3 {font-size:16px;font-weight:bolder;}

.taglog .cloud4 {font-size:14px;font-weight:bolder;}

.taglog .cloud5 {font-size:12px;}

먼저 li속성을 사용하면 display:block 형식이 기본값이기 때문에 한 줄에 한 단어만 나오게 되는데요.

한 줄에도 여러단어가 나오게 끔 하기 위해서 float:left를 사용했습니다.

그리고 float를 사용하면 레이아웃에 영향이 갈 수 있으니 overflow:hidden으로 다른 레이아웃에 피해가 없게 끔 했구요.

h3{margin-bottom:10px}의 경우 태그라고 적혀있는 부분과 아래 태그 속성들이 떨어지게 끔 하기 위해 적었구요.

.taglog li의 float:left는 위에서 말한 여러단어가 나오게 끔 하기 위해 적은겁니다.

list-style은 none으로 없애줬습니다.

.taglog li a는 링크의 색상과 내부 여백을 늘려줬습니다.

padding은 margin으로 대체 가능하구요.

text-decoration을 none으로 줘서 밑줄을 없앴네요.

그리고 a:hover로 마우스를 댈 경우 검은색으로 바꿔줍니다.

마지막으로 .taglog .cloud1~5는 어떤건가 싶으신 분들이 있으실텐데요.

이 .cloud1~5는 태그를 얼마나 사용했나에 대한 class입니다.

많이 사용한 태그는 cloud1, 가장 적게 사용한 경우엔 cloud5가 되는거죠.

1에서 5로 갈수록 점점 작게, 효과도 적게 주시면 됄 것 같네요.

수정을 한 상태입니다.

html의 글씨는 크고 나머지는 작죠?

html은 cloud1, 나머지 부분은 cloud5가 적용되어있습니다.

이걸로 태그 로그 부분도 수정했네요.

혹시 태그로그를 사용하기 싫으신분들은 

      <s_tag>

      <div class="taglog">

요기 이 부분

      </div>

      </s_tag>

위에 표시한 부분에 다른 태그를 넣어주시면 태그가 아닌 원하는것이 나오게 됩니다.

예를 들어 iframe 등이 있겠죠?

오늘은 여기 까지 적겠습니다.

궁금한 점은 댓글 남겨주세요!