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

2013.12.16 09:20
저자 : Kurien

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


티스토리 스킨, 티스토리 스킨 배포, 티스토리 스킨, 적용 티스토리 스킨 만들기, 티스토리, 티스토리 심플 스킨, 티스토리 블로그 스킨, 티스토리 꾸미기, 티스토리 홈페이지처럼, 티스토리 스킨 다운, 티스토리 스킨 추천

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

먼저 컨테이너 내부의 #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="[##_blog_link_##]">[##_title_##]</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를 준 이유는 안해주면 마우스를 댔을 때 둥글어진 부분이 삐죽하게 나와버립니다.

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


티스토리 스킨, 티스토리 스킨 배포, 티스토리 스킨, 적용 티스토리 스킨 만들기, 티스토리, 티스토리 심플 스킨, 티스토리 블로그 스킨, 티스토리 꾸미기, 티스토리 홈페이지처럼, 티스토리 스킨 다운, 티스토리 스킨 추천


헤더부분 완성본 입니다.

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

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


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

  1. 이전 댓글 더보기
  2. Aok코코아 2014.07.31 10:43 신고  댓글주소  수정/삭제  댓글쓰기

    제목을 안보이게 할수있나여?

  3. Aok코코아 2014.07.31 13:24 신고  댓글주소  수정/삭제  댓글쓰기

    어떻게 하면 제목 안보이게 할수있나여?

  4. 쉼표찍기 2014.08.07 22:12 신고  댓글주소  수정/삭제  댓글쓰기

    http://dallante.tistory.com/에 적용하고 있는데요.
    타이틀, sidebar, footer가 안보이고 메뉴도 왼쪽으로 되었어요.
    포스팅해주신대로 복사해서 붙여넣었는데 왜 이럴까요? ㅠㅠ
    조언 부탁드려요

    • Kurien 2014.08.07 23:36 신고  댓글주소  수정/삭제

      확인 했더니 사이드바 부분이 없으신게 아니고,<div id="sidebar"></div>와 <div id="footer"></div> 부분 내의 내용을 지우셨더라구요.
      내용과 height 값이 없으니 높이가 0px이 되고 그로 인해 안보이는겁니다.

    • 쉼표찍기 2014.08.08 09:14 신고  댓글주소  수정/삭제

      감사합니다. 생초보라 아무것도 몰랐는데 조금씩 알아가니 기쁘네요.
      이부분은 해결했지만 타이틀이 아직도 안보여요 ㅠㅠ
      style-menu-bottom에서 10으로 해봤더니 타이틀은 보이는데 sidebar가 사라지네요. 여백의 문제일까요??

    • Kurien 2014.08.08 11:36 신고  댓글주소  수정/삭제

      style-menu-bottom은 뭔지 제가 못알아먹겠네요.
      타이틀 부분은 <h1><a href="[ ##_blog_link_##]">[ ##_title_##]</a></h1>이걸 추가 안하셨던데, 다시한번 확실히 확인해보세요.
      자꾸 빠진 부분이 있네요;

    • Kurien 2014.08.08 11:36 신고  댓글주소  수정/삭제

      style-menu-bottom은 뭔지 제가 못알아먹겠네요.
      타이틀 부분은 <h1><a href="[ ##_blog_link_##]">[ ##_title_##]</a></h1>이걸 추가 안하셨던데, 다시한번 확실히 확인해보세요.
      자꾸 빠진 부분이 있네요;

    • 쉼표찍기 2014.08.08 11:42 신고  댓글주소  수정/삭제

      그건 들어있는데..어떻게 보실 수가 있나보요.
      6번 포스팅으로 그냥 넘어가서 공부하다 원인을 찾았어요. 이유는
      #header {
      width:1000px;
      에서 ; 없어서 그랬더라구요. ㅠㅠ 이런 간단한 이유였다니...

      신경써주셔서 감사합니다.

    • Kurien 2014.08.08 11:46 신고  댓글주소  수정/삭제

      아아,, 제가 잘못 봤나보네요;
      분명 없었는데...
      여튼 찾으셔서 다행입니다.
      보는 방법은 F12 누르면 나와요.

  5. 쉼표찍기 2014.08.11 18:39 신고  댓글주소  수정/삭제  댓글쓰기

    제목과 footer를 kurien님 블로그처럼 만들고 싶은데요. 어떻게 하면 될가요???

  6. 쉼표찍기 2014.08.22 19:56 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요? 오랫만에 궁금증이 생겨서 왔어요
    제목에 대해 포스팅보고 다시 공부했는데도 해결이 안되네요..
    제 블로그에 헤더에서 타이틀을 가운데로 옮기고 꾸미려고 이것저것 해봐도 움직이질 않는데 왜 그럴까요? ㅠㅠ
    조언 좀 부탁드릴게요. http://tournalist.tistory.com/

    • Kurien 2014.08.22 20:09 신고  댓글주소  수정/삭제

      float에는 center가 없는데 center를 사용하신 것 같아보이네요.
      그리고 Subsbox가 왜 있는건지도 모르겠구요;

      일단 중앙 정렬 하는 방법은 #header > h1에 있는 a 태그의 크기를 글씨 크기의 너비(width) 값과 맞춰주시구요.
      #header > h1 {text-align:center;}을 줘보세요.

  7. 쉼표찍기 2014.08.22 20:40 신고  댓글주소  수정/삭제  댓글쓰기

    너무 고마워요.
    해결됐어요 ㅎㅎ

  8. 쉼표찍기 2014.08.23 00:00 신고  댓글주소  수정/삭제  댓글쓰기

    헤더 높이 좀 줄이려고 했더니 또 안되네요
    Subsbox는 구독버튼들을 묶어서 헤더랑 따로 꾸미기 해보려고 한 건데 생각처럼 안돼요.
    구독버튼들이 헤더에서 마음대로 안 움직여요. 조언 좀 부탁드려요 ㅠㅠ . 아참 이름 바꿨어요.

    • Kurien 2014.08.23 00:06 신고  댓글주소  수정/삭제

      어떤식으로 꾸미려고 하시는건지를 잘 모르겠어서 도와드리기가 힘드네요.
      헤더를 어떤식으로 바꾸시려는건가요?

  9. 쉼표찍기 2014.08.23 00:13 신고  댓글주소  수정/삭제  댓글쓰기

    http://bezzera.tistory.com/

    위 블로그의 헤더처럼 하고 싶어요.
    넓이는 무시하고요.

    • Kurien 2014.08.23 00:21 신고  댓글주소  수정/삭제

      header 부분과 Subsbox 부분을 감싸는 div를 먼저 만드시고 header 부분의 width 값을 조정한 후 float:left(이건 이미 있으므로 상관 없구요.)
      그리고 Subsbox 부분도 width 값을 작게 조절한 후 float:right로 해주시고 margin-left 값은 지워버리세요.
      그리고 나서 margin, padding, height 등을 이용해서 위치를 조절해주시면 됩니다.

  10. 쉼표찍기 2014.09.10 11:52 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요?
    오랫만에 조언을 구할 수 있을까해서 왔어요..
    마음에 드는 스킨을 발견(http://jaebok.tistory.com)해서 따라해보고 있는데 초보라 자꾸 막혀서요.

    http://dallante.tistory.com/
    1. 소셜아이콘을 상단메뉴에 적용하고 싶어서 했는데 화면에 안나오고 원인을 모르겠어요 ㅠ
    2. 커버(타이틀이미지)가 헤더처럼 포스팅이나 방명록을 볼때도 보이게 헤더처럼 고정되있으면 좋겠어요.
    3. 사이드바에서 방문그래프의 제목이나 글꼴이 수정이 안되는데 이유를 모르겠어요 ㅠㅠ

    • Kurien 2014.09.10 11:59 신고  댓글주소  수정/삭제

      전체적으로 저에게 뭘 원하시는지를 모르겠네요;
      소셜 아이콘을 상단 메뉴에 적용하신다고 하셨는데, 어떤 코드를 가지고 하는지를 알려주셔야죠.

      그리고 타이틀 이미지가 포스팅이나 방명록 볼때도 보이게 헤더처럼 고정한다는 말씀이 어떤건지 전혀 모르겠네요.
      타이틀 이미지란게 어느 부분을 뜻하는지 이해가 안되요.

      사이드바에서 방문 그래프의 제목, 글꼴은 원래 수정이 안됩니다.
      조언을 해드리고 싶어도 말씀하신게 이해가 전혀 안되네요.

      저랑 같이 화면을 보면서 이야기 하시는게 아니시기 때문에, 제 입장에서 이해하기 쉽게 좀 설명해주셨으면 합니다.

  11. 쉼표찍기 2014.09.10 12:25 신고  댓글주소  수정/삭제  댓글쓰기

    잘하셔서 다 아실 줄 알았어요.ㅠ
    http://jaebok.tistory.com는 제가 따라하고 싶은 내용이 다 있어서 적은 거에요.
    초보라서 어떤 코드를 가지고 하는 것이 아니라 다른 사람들이 포스팅 한걸 따라하느라 그런게 없어요 ㅠ

    1. 소셜아이콘은 (http://namsieon.com/1626)이 포스팅을 보고 따라했어요.
    제 티스토리 html과 css 보내드리면 이해되실가요?
    2. 커버는 상단메뉴 밑에 검정색을 말하는 거에요.
    3. 사이드바 방문그래프 StatisticsGraph <--- 글꼴을 category와 같은 글꼴,크기로 하고 싶어요.

    이해되게 설명 한건지 모르겠네요 ㅠ

    • Kurien 2014.09.10 12:50 신고  댓글주소  수정/삭제

      이런 말씀 드리기는 좀 그렇지만, 말씀하신 내용을 하기 어렵습니다.
      소셜 아이콘 부분은 손대려고 했더니 여러 CSS 스타일이 엉켜있어서 어디부터 만져야 할지를 모르겠고,
      커버 부분은 애초에 header 부분을 만드실 때 함께 해야 훨씬 편하구요.
      이럴바에 새로 제작하는게 빠르다고 생각하네요.
      사이드바 부분은 단순히 변경하는거라 어렵지 않은데, 이 부분을 못하신다는건 HTML, CSS에 대해서 공부하신적이 없다는건데,
      기본 코드를 모르신 채로 블로그를 수정하시는 것 보다는 배우신 후에 다시 수정하시는게 훨씬 빠르지 않을까 싶네요.

      원하는 답변 드리지 못한 점 죄송합니다.

  12. 쉼표찍기 2014.09.10 12:57 신고  댓글주소  수정/삭제  댓글쓰기

    알겠습니다. 조언감사해요.
    공부안하고 해볼려니 자꾸 어려워서 이제는 해야겠네요.
    초보가 배우기 쉬운 책 추천 좀 부탁해도 될까요?

    • Kurien 2014.09.10 13:00 신고  댓글주소  수정/삭제

      모던 웹 디자인을 위한 HTML5+CSS3 입문을 봤구요.
      제 블로그에 있는 HTML과 CSS만 보더라도 대부분은 이해하실 수 있을꺼에요.
      티스토리 스킨 수정하시는게 그리 어려운 부분은 아니니 조금만 배우셔도 충분히 활용 가능하실껍니다.

  13. 2014.10.19 22:06  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  14. 2014.10.20 16:54  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  15. 2014.10.21 21:42  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  16. 독.사과 2015.01.29 14:58 신고  댓글주소  수정/삭제  댓글쓰기

    menu 스타일에서 position: absolute를 썼는데도 bottom:0 을 넣으면 메뉴가 화면 맨 아래로 내려가버리네요 ㅠㅠ header의 맨 아래에 넣고싶은데 왜이러는걸까요?

    • Kurien 2015.01.29 15:34 신고  댓글주소  수정/삭제

      <header><menu></menu></header> 과 같은 형태로 존재할 때는 header에 position: relative;를 적용 하신 뒤 menu에 position: absolute; bottom: 0을 주셔야 header를 기준으로 bottom: 0을 가리킵니다.

  17. 질문자 2015.02.14 21:12 신고  댓글주소  수정/삭제  댓글쓰기

    왜 header 부분에 position: relative를 하고
    menu 부분에 absolute를 했는데 왜 저렇게 정렬되는지 모르겠습니다.

    배우기로는 absolute나 relative나 top left px를 정해주는것이 아닌가요?

    예를 들면 저 위 화면과 비슷한 화면을 만들기 위해서
    .menu {
    width: 1000px;
    height: 40px;
    background: black;
    bottom: 0;
    text-align: right;
    position: relative;
    top: 40px;
    }

  18. 질문자 2015.02.14 21:15 신고  댓글주소  수정/삭제  댓글쓰기

    답변 감사합니다.

    그런데 html css를 자유롭게 쓰기 위하려면 어떻게 하는 것이 좋을 까요? 지금은 블로그 스킨 구조를 배우고 있는데 말입니다.

    • Kurien 2015.02.15 14:22 신고  댓글주소  수정/삭제

      책 한권 사시는 편이 더 빠를거에요.
      html + css와 관련된 책은 많습니다~ 하나 사셔서 보시면 스킨정도는 쉽게 만드실 수 있을꺼에요.

  19. 린린닷컴 2016.09.09 19:02 신고  댓글주소  수정/삭제  댓글쓰기

    저도 티스토리 스킨 제작중
    아직 스킨 미완성 ㅜㅜ 언제쯤에 완성 되가

  20. uncloud 2016.11.07 14:05 신고  댓글주소  수정/삭제  댓글쓰기

    제목과 메뉴 사이에 기존 사이드바에 있던 검색 기능을 추가하고 싶은데
    <s_sidebar_element>
    <!-- 검색 -->
    <div class="search">
    <s_search>
    <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
    <input value="검색" type="button" onclick="" class="submit"/>
    </s_search>
    </div>
    </s_sidebar_element>
    여기에서 맨 처음과 맨 마지막 부분만 </s_header_element>로 바꾸면 되나요?

    • Kurien 2016.11.07 14:08 신고  댓글주소  수정/삭제

      <!-- 검색 -->
      <div class="search">
      <s_search>
      <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
      <input value="검색" type="button" onclick="" class="submit"/>
      </s_search>
      </div>

      이 부분만 별도로 원하시는 위치에 넣으시면 될 것 같습니다.

  21. 꿀파이 2017.07.19 02:19 신고  댓글주소  수정/삭제  댓글쓰기

    고대로 따라한 것 같은데
    메뉴가 우측 정렬이 안돼요 ㅠㅠ

    주소: http://ypit.tistory.com/

    css:
    @charset "utf-8";

    #container {width:1000px; background:red; margin:0 auto;}
    #header {
    width:1000px;
    height:150px;
    background:black;
    text-align:center;
    position:relative;
    }
    .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;
    }
    #header h1 {
    padding:40px 0 0 0;
    }
    #header h1 a {
    color:#fff;
    text-decoration:none;
    }
    #wrap {width:1000px; background:black; overflow:hidden;}
    #sidebar {width:200px; background:red; float:left;}
    #content {width:800px; background:blue; float:right;}
    #footer {width:1000px; background:green;}

    /* 반드시 들어가야 하는 스타일 시작 */
    * {margin:0; padding:0; border:0; }

    • Kurien 2017.07.19 14:09 신고  댓글주소  수정/삭제

      제가 작성한 내용에서 보시면

      .menu li 에 float: left; 라는 속성은 넣지 않았는데, 사슴비행기님 블로그에서 속성을 보면 해당 속성이 들어있네요.

      tabloid.css라는 css 파일에 해당 속성이 있는데, 위의 파일을 지우셔야 제가 작성한 내용과 같은 출력을 확인하실 수 있으실겁니다.