5. 티스토리 스킨 만들기 제목과 메뉴

먼저 저번 포스팅에서 레이아웃을 만들어 놓은 티스토리 입니다.

다시한번 말씀드리지만, 이해를 돕기 위해 색상을 넣었을 뿐이기 때문에 디자인과는 관련이 없습니다.

먼저 컨테이너 내부의 #header 부분을 데려와줍니다.

<div id="header">

    <h1>01. 블로그 제목</h1>

    <div class="menu">02. 블로그 메뉴</div>

  </div>

  <!-- header close -->

이 부분이 바로 블로그의 제목이 들어갈 부분인데요.

먼저 #header 부분에 들어가기 위해 필요한 치환자들을 확인해보죠.

[ ##_blog_link_##] : 블로그 주소 

[ ##_title_##] : '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목

[ ##_blog_link_##]notice : 공지사항으로 이동할 수 있는 주소

[ ##_blog_menu_##] : 메뉴편집을 사용할 수 있는 치환자 

[ ##_localog_link_##] : 위치로그로 이동할 수 있는 주소 

[ ##_taglog_link_##] : 태그로그로 이동할 수 있는 주소 

[ ##_guestbook_link_##] : 방명록으로 이동할 수 있는 주소

[ ##_owner_url_##] : 관리자로 이동할 수 있는 주소

[ ##_owner_url_##]/entry/post : 글쓰기로 이동할 수 있는 주소

이 치환자의 경우 포스트에도 적용이 되어버리기 때문에 [와 ##사이를 한번 띄어서 사용했습니다.

이 글을 보시는 분이 사용하실 때는 사이의 공백을 한칸 지우고 사용하시면 적용이 될 겁니다.

이제 시작하겠습니다.

일단 STYLE.CSS부분에 아래의 속성을 넣어주세요!

* {margin:0;padding:0;}

이 태그를 넣으면 기본적으로 웹에 존재하는 여백을 없애줍니다.

그럼 <h1>01. 블로그 제목</h1>부분을 수정하겠습니다.

[SKIN.HTML]

  <div id="header">

    <h1><a href="[ ##_blog_link_##]">[ ##_title_##]</a></h1>

    <div class="menu">02. 블로그 메뉴</div>

  </div>

  <!-- header close -->

[STYLE.CSS]

#header {

width:1000px;

height:150px;

background:black;

text-align:center;

position:relative;

}

#header h1 {padding:40px 0 0 0;}

#header h1 a {

color:#fff;

text-decoration:none;

}

빨간 글씨 부분이 수정 된 부분입니다.

SKIN.HTML 부분만 볼때는 위와 같이 나옵니다.

kreedit라고 나온게 보이시나요?

링크 또한 제 블로그로 나오게 됩니다.

그럼 STYLE.CSS 부분을 한번 볼까요?

height로 header부분의 높이를 지정했구요.

배경색을 검은 색으로 변경했습니다.

그리고 #header 내부의 컨텐츠의 text-align을 중앙정렬 했구요.

position:relative는 곧 나올 .menu를 위해서 적어뒀습니다.

#header h1부분은 상단 부분에만 40px을 줘서 위에서 40px만큼 떨어지게끔 했습니다.

#header a 선택자를 이용해서 링크부분을 수정했는데요.

검정색에서 잘 보이는 흰색 글씨를 적용하고, 밑줄부분을 없애기 위해서 text-decoration: none을 줬네요.

일단 제목을 kreedit에서 Kurien's Blog로 변경했습니다.

그리고 보시면 메뉴 부분이 header의 중앙에 있어서 보기가 안좋네요.

이번엔 메뉴 부분을 수정하겠습니다.

위에서 배운 치환자를 전부 사용하진 않고, 저한테 필요한 치환자만 사용하겠습니다.

[SKIN.HTML]

  <div id="header">

    <h1><a href="https://kurien.tistory.com/">Kurien's Blog</a></h1>

    <div class="menu">

    <ul>

      <li class="menu_main"><a href="[ ##_blog_link_##]">메인</a> </li>

      <li class="menu_notice"><a href="[ ##_blog_link_##]notice">공지사항</a> </li>

      <li class="menu_tag" ><a href="[ ##_taglog_link_##]">태그</a></li>

      <li class="menu_geustbook" ><a href="[ ##_guestbook_link_##]">방명록</a></li>

      <li class="menu_admin"><a href="[ ##_owner_url_##]">관리자</a> </li>

      <li class="menu_post"><a href="[ ##_owner_url_##]/entry/post">글쓰기</a> </li>

    </ul>

    </div>

  </div>

[STYLE.CSS]

.menu {

width:1000px;

height:40px;

background:black;

position:absolute;

bottom:0;

text-align:right;

}

.menu li {

display:inline-block;

list-style:none;

border:2px solid white;

margin:0 10px 0 0;

border-radius:10px;

}

.menu li a{

color:#fff;

text-decoration:none;

display:block;

padding:5px 10px 5px 10px;

}

.menu li a:hover{

background:white;

color:black;

border-radius:5px;

}

디자인은 여전히 안타깝지만...

조금이라도 꾸며보려니 복잡해지네요.

.menu에 width와 height를 사용해서 크기를 지정해주고, 배경색을 header부분과 같게 검정색을 줬습니다.

position:absolute로 header 내에 고정시키고 bottom:0으로 위치를 제일 아래로 내려줬구요.

text-align:right;로 오른쪽 정렬시켰습니다.

.menu li 부분은 display:inline-block;으로 한줄에 표시되게 했는데요.

inline으로도 같은 효과를 적용 할 수 있지만, inline의 경우 상하 padding값이 적용이 안되기 때문에 inline-block을 사용했습니다.

list-style:none으로 li를 사용할 때 나오는 스타일을 없애고, border로 하얀 테두리를 만들었습니다.

margin:0 10px 0 0;은 상우좌하 순으로 사용되므로 오른쪽 10px을 줘서 사이 사이를 조금씩 떨어뜨렸습니다.

border-radius:10px;로는 테두리를 살짝 둥글게 했네요.

.menu li a의 경우엔 색 지정, 밑줄 없애기, a 태그는 기본이 inline이기 때문에 block으로 변경해서 padding값을 줬습니다.

.menu li a:hover의 경우엔 마우스를 대면 효과가 적용되기 때문에 색상을 반대로 했구요.

border-radius를 준 이유는 안해주면 마우스를 댔을 때 둥글어진 부분이 삐죽하게 나와버립니다.

그걸 방지하기 위해 적었습니다.

헤더부분 완성본 입니다.

디자인은 개나 줘버리라죠...

디자인 부분은 전체적으로 완성을 했을 때 하나씩 수정 해보고 설정해야지 안되겠네요. ㅠㅠ

상당히 길고 어려운 점도 있을 수 있으니, 궁금한 점은 댓글에 물어보셔도 됩니다.