11. 티스토리 스킨 만들기 태그 박스, 글 보관함

오늘은 태그 박스와 글 보관함 부분을 수정해보겠습니다.

먼저 태그 박스의 경우에는 글을 적을 때 적는건데요.

이 태그란건 단순 키워드를 적는것이 아닌 카테고리처럼 어떤 단어와 관련된 글을 찾는 기능을 하는 부분입니다.

먼저 태그 박스 부분부터 수정해보겠습니다.

먼저 위처럼 태그 클라우드를 사이드바에 넣어주세요.

기본 HTML만 적용된 모습인데요.

혹시 태그목록이라는 부분만 나온다면 글을 아무거나 적은 후 태그 부분에 태그 몇개만 입력해주세요!

      <s_sidebar_element>

      <!-- 태그 클라우드 -->

      <div class="tagbox">

        <h3>태그목록</h3>

        <ul>

        <s_random_tags>

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

        </s_random_tags>

        </ul>

      </div>

      </s_sidebar_element>

기본 태그 목록 그대로의 HTML 입니다.

저는 딱히 수정한게 없네요.

바로 CSS 수정을 해보겠습니다.

.tagbox {

overflow:hidden;

margin-bottom:10px;

text-align:center;

}

.tagbox > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.tagbox li {float:left;

list-style:none;

margin:2px;

border-radius:5px;

border:3px solid #fff;

}

.tagbox a {

font-weight:bolder;

padding:2px;

}

.tagbox a:hover {background:#fff;}

.tagbox에 overflow:hidden을 준 이유는 아래있는 li 부분에 float 속성을 쓰기 때문입니다.

margin-bottom의 경우는 다음 모듈과의 거리를 위해서구요.

text-align:center로 가운데 정렬을 해주었습니다.

.tagbox > h3 부분은 이전의 부분들과 같으니 설명 생략하겠습니다.

.tagbox li의 경우에는 float:left를 했네요.

이걸 해주지 않으면 한줄씩 나오게 되서 쓸대없는 공간이 많이 차지 됩니다.

list-style도 지저분해보이니 없애줬구요.

margin:2px로 글자간의 거리를 띄어줬고, 그외에 테두리를 조금 수정했습니다.

a와 a:hover의 경우도 다른부분과 크게 다를게 없는데, font-weight로 굵게, padding으로 테두리와 글자간의 거리를 줬네요.

a:hover은 마우스를 댔을 때 바탕이 흰색으로 변하게 한거구요.

태그 박스는 이게 전부입니다.

더 이상 깔끔하게 할 수가 없네요 ㅠㅠ 저로써는...

바로 글 보관함을 수정하겠습니다.

사이드바 설정에서 글 보관함을 넣어주세요.

글 보관함 부분 역시 HTML 부분만 있습니다.

      <s_sidebar_element>

      <!-- 글 보관함 -->

      <div class="archive">

        <h3>글 보관함</h3>

        <ul>

        <s_archive_rep>

          <li>

            <a href="[ ##_archive_rep_link_##]">[ ##_archive_rep_date_##] </a> 

            <span class="cnt">([ ##_archive_rep_count_##])</span>

          </li>

        </s_archive_rep>

        </ul>

      </div>

      </s_sidebar_element>

여기서도 딱히 손대줄 부분은 없네요.

CSS로 갑시다!

.archive {

text-align:center;

font-weight:bolder;

margin-bottom:10px;

}

.archive > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.archive .cnt{

font-size:11px;

color:#333;

}

.archive 부분부터 보시면 text-align으로 중앙정렬, 위에서 봤던 font-weight로 굵게 효과를 주고, margin-bottom에 10px을 줬습니다.

h3 부분은 역시 다른 부분과 같구요.

.archive .cnt 부분은 카테고리에서 목록 오른쪽에 있던 숫자, 그 숫자처럼 이 글 보관함 오른쪽에 나오는 숫자입니다.

카테고리와 같이 폰트 사이즈 11, 컬러 #333으로 했네요.

얼른 다 하고 디자인좀 바꾸고싶네요 ㅋㅋㅋㅋㅋㅋㅋ

너무 지저분하다 ㅠㅠㅠ

어려운 부분은 댓글 남겨주세요!

http://kreedit.tistory.com/에서 직접 보실 수 있습니다.