26. 티스토리 스킨 만들기 푸터 메뉴, 카피라이트

드디어 마지막인 푸터 영역의 메뉴, 카피라이트 부분입니다.

이 부분은 쉽기 때문에 걱정 안하셔도 됩니다.

HTML 부분 부터 봐야겠죠?

  <div id="footer">

    <div class="menu_2">

      <a href="/">메인</a>

      <a href="/notice">공지사항</a>

      <a href="https://kurien.tistory.com/tag">태그</a>

      <a href="https://kurien.tistory.com/guestbook">방명록</a>

      <a href="https://kurien.tistory.com/manage">관리자</a>

    </div>

    <div class="copyright">

      Copyright ⓒ <a href="https://kurien.tistory.com/"> Kurien</a> This blog is powered by <a href="http://tistory.com" onclick="window.open(this.href); return false">Tistory</a> /

      Designed by <a href="http://kurien.tistory.com" onclick="window.open(this.href); return false">Kurien.</a>

    </div>

    

  </div>

  <!-- footer close -->

먼저 HTML을 조금 수정했습니다.

사용하지 않는 위치로그는 빼버렸구요.

Copyright는 제 스타일대로 변경했네요.

이 부분에 대해서는 자신이 원하는 대로 변경하시면 될 듯 싶네요.

HTML 수정이 끝나셨다면 CSS를 수정하겠습니다.

#footer {width:980px;background:green;padding:10px;}

.menu_2 {text-align:center;margin:5px 0 5px 0;}

.menu_2 a {color:white; font-weight:bolder; text-decoration:none;}

.menu_2 a:hover {color:#08C;}

.copyright {text-align:center;color:#fff;font-weight:bolder;margin:5px 0 5px 0;}

.copyright a {color:#333;text-decoration:none;}

.copyright a:hover {color:#08C;}

#footer 영역에는 padding:10px을 줬습니다.

그래서 width 값을 -20px 해줬습니다.

.menu_2에는 중앙정렬, margin 값을 위아래로 줬습니다.

a와 hover은 기본 흰색, 마우스를 대면 #08C, 그리고 굵게 효과를 주고와 밑줄을 없애줬습니다.

.copyright도 크게 다르진 않습니다.

중앙정렬, 기본 흰색에 글씨체를 굵게 했고, margin 위아래 5px씩 줬네요.

a와 hover은 기본 #333에 마우스를 대면 #08C로 변하게 했고, 밑줄을 없앴습니다.

어려운 부분은 없죠?

사실 footer는 저런거 설정 안하시고, 그냥 자기 원하는 대로 하셔도 됩니다.

아예 없애시는 분도 계시고 footer 영역에 카운터를 다시는 분도 계시구요.

저는 이정도로 해뒀는데, 아마도 메뉴부분은 지워버릴 것 같네요.

지금까지 적었던 티스토리 스킨 만들기가 방문자 분들에게 유용했으면 좋겠습니다.

읽어주시느라 고생많으셨습니다^^

수정이 완료 된 사이트는 http://kreedit.tistory.com 입니다.