4. 티스토리 스킨 레이아웃 구성하기

2013.12.13 13:20
저자 : Kurien

티스토리 스킨을 만드는데, 지금은 뼈대만 있으니 살을 붙여야죠?

지금 해야 할 것중 가장 중요한건 레이아웃입니다.


오늘은 그 레이아웃을 구성 해 볼텐데요.



이게 지금 현재 상태입니다.

오늘은 CSS 위주로 레이아웃을 구성하겠습니다.


<!DOCTYPE HTML>

<html lang="ko">

<head>

<meta charset="utf8" />

<title></title>

<link rel="stylesheet" type="text/css" href="./style.css" />

</head>

<body>

<s_t3>


<div id="container">

  <div id="header">

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

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

  </div>

  <!-- header close -->


  <div id="wrap">


    <div id="sidebar">

    </div>

    <!-- sidebar close -->


    <div id="content">


      <div class="searchList">11. 검색 결과 리스트</div>

      <div class="searchRplist">12. 검색 결과 댓글 리스트</div>

      <div class="locallog">13. 위치 로그</div>

      <div class="taglog">14. 태그 클라우드</div>


      <div class="guestbook">15. 방명록

        <div class="guestWrite">15-1. 방명록 글쓰기</div>

        <div class="guestList">15-2. 방명록 리스트</div>

      </div>

      <!-- guestbook close -->


      <div class="entryNotice">16. 공지사항 글</div>

      <div class="entryProtected">17. 보호 글</div>


      <div class="entry">18. 글

        <div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div>

        <div class="article">18-2. 글</div>

        <div class="tagTrail">18-3. 글 관련 태그</div>

        <div class="actionTrail">18-4. 트랙백 | 댓글</div>

        <div class="trackback">18-5. 트랙백</div>

        <div class="comment">18-6. 댓글

          <div class="commentList">18-6-1. 댓글 리스트</div>

          <div class="commentWrite">18-6-2. 댓글 쓰기</div>

        </div>

      </div>

      <!-- entry close -->


      <div class="entry">19. 페이지</div>

    </div>

    <!-- content close -->


  </div>

  <!-- wrap close -->


  <div id="footer">

  </div>

  <!-- footer close -->


</div>

<!-- container close -->


</s_t3>

</body>

</html>


먼저 3. 티스토리 스킨의 뼈대 구성하기에서 가져온 태그인데요.

그 태그에 위처럼 #sidebar와 #content 부분을 #wrap으로 감싸줍니다.

감싸는 이유는 하다보면 아실 수 있을껍니다.


이제 Style.css 부분을 만져보도록 하죠.

일단 각 부분 부분에 width 값을 줘야 합니다.



이러한 형식으로 만들 생각이기 때문에 위에 적힌 width 값처럼 넣어봤습니다.


#container {width:1000px;}

#header {width:1000px;}

.menu {width:1000px;}

#wrap {width:1000px;

#sidebar {width:200px;}

#content {width:800px;}

#footer {width:1000px;}



왼쪽은 값을 넣기 전, 오른쪽은 넣은 후인데요.

육안으로는 변한게 없죠...?

알기 쉽게 색을 넣어봅시다.


#container {width:1000px;background:gray;}

#header {width:1000px;background:orange;}

.menu {width:1000px;background:yellow;}

#wrap {width:1000px;background:black;}

#sidebar {width:200px;background:red;}

#content {width:800px;background:blue;}

#footer {width:1000px;background:green;}



보시면 오렌지, 옐로우, 블루, 블랙만 적용되어있습니다.

헤더와 메뉴, 콘텐츠, 랩 부분만 색이 적용되어있는데요.

보여야 할 사이드바와 푸터 부분이 없는 걸 알 수 있는데요.

이유는 사이드바와 푸터 부분에 내용이 없어서입니다.


임시로 #sidebar와 #footer 부분에 내용을 넣어보겠습니다.



그냥 sidebar, footer라고만 적었습니다.

그런데 한가지 더 문제가 있네요?

#sidebar와 #content 부분이 정렬이 되지 않고 따로따로 있죠?

이걸 위해 #wrap을 사용합니다.


#container {width:1000px;background:gray;}

#header {width:1000px;background:orange;}

.menu {width:1000px;background:yellow;}

#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;}



#sidebar와 #content 부분에 float:left와 right를 줘서 각각 왼쪽과 오른쪽 정렬을 했구요.

그냥 두면 footer가 위로 올라와버립니다.

그래서 필요한게 overflow:hidden인데요.

이 속성을 주게 되면 #wrap 밖으로 새는 효과들을 없애줍니다.


#sidebar 의 검은 부분은 #sidebar와 #content를 감싼 #wrap부분인데요.

나중에는 #wrap 부분의 색을 없앨 생각이기 때문에 나중가면 자연스러워집니다.

현재는 이 글을 보시는 분들의 이해를 돕기 위해 색을 저런식으로 넣었지만,

시간이 지날수록 다르게 바꿀테니 이해해주세요^^



이런 레이아웃 방식이 눈에 보이시나요?

마지막으로 레이아웃을 중앙 정렬 해줍니다.


#container {width:1000px;background:gray;margin:0 auto;}

#header {width:1000px;background:orange;}

.menu {width:1000px;background:yellow;}

#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;}



중앙 정렬까지 마쳤네요.

이렇게 전체적인 레이아웃을 간단하게 나마 구성 해봤습니다.


내용 중 어려운점이나 궁금한점은 댓글로 남겨주세요!

빠르게 답변 해드리겠습니다.

현재 진행 상황은 http://kreedit.tistory.com 에서 확인하실 수 있습니다.

  1. 상원가구 2014.02.22 00:10 신고  댓글주소  수정/삭제  댓글쓰기

    container width가 100% 로 되어있으니 가운데로 정렬이 되지를 않습니다.
    어떻게 해야될까요? 도움 부탁드립니다.

  2. 엑시아유틸 2014.03.11 12:29 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃 알기쉬운 설명감사합니다.제블로그의 레이아웃은 좀 특이해서 변경이 너무 어렵네요.지금도 본문과 우측사이드바가 좌측사이드바아래로 내려가버려서 원인을 못찾고있습니다.

    • Kurien 2014.03.11 18:20 신고  댓글주소  수정/삭제

      먼저 스킨의 html 부분에서 <div id="sidebar2">를 검색 하신 후에 그 윗부분에
      </div><- 이 부분을 삽입해보세요
      <div id="sidebar2">
      위처럼 </div> 하나만 삽입 해보세요.
      해보시고 안되시면 다시 댓글 남겨주세요.

  3. 엑시아유틸 2014.03.12 01:16 신고  댓글주소  수정/삭제  댓글쓰기

    sidebar2앞에 /div를 넣으면 sidebar1 아래 본문그리고 많은우측여백과 함께 우측사이드바2가 표시됩니다. sidebar2앞의 /div를 삭제하면 아예 본문과 sidebar2가 없어져버립니다.
    저녁에 /div로 끝나는 것을 sidebar1,본문,sidebar2앞부분위주로 삭제하고 sidebar2를 css에서 right정렬을 하니 일단은 한화면에 표시되는 것까진 성공했습니다.
    sidebar2를 left정렬로 바꾸면 sidebar1, sidebar2, 본문 이렇게 표시됩니다.
    sidebar2와 본문이 함께 묶여있는 것 같기도 하고, 현재 sidebar2를 우측정렬해서 본문과의 여백이 많은 상태입니다.
    margin에 문제가 있는 것 같은데, 현재 우측sidebar의 폭이 305인데, margin이 이상합니다. sidebar1이 185, 본문501, sidebar2가 305, 전체블로그폭이 1151 이렇게 알고있는데, margin과 padding 값이 전혀 안맞는 거 같고 이리저리 값을 바꿔바도 margin과 padding은 도대체 알수가 없습니다. container는 폭도 없고 margin만 55로 되어있고 폭값을 입력해야하면 얼마를 입력해야하는지 현재 padding값들이 정상인지도 모르겠고 정말 어렵네요.. ㅠ.지금도 계속 수치를 바꿔보고 있는데, 없는 건 어떻게 추가해야할지를 모르니 진도가 안나가네요.
    바쁘신데, 확인해주셔서 감사합니다.

    • Kurien 2014.03.12 09:53 신고  댓글주소  수정/삭제

      좀 대책이 없는 말이긴 한데, 이렇게 설명해도 이해하기가 쉽지가 않아요.
      코드를 직접 보면서 수정해가면서 확인하면 차라리 더 쉽겠는데, 이렇게 마진값이 얼마인지, width 값이 얼마인지만 가지고는 확인이 힘들 것 같네요.
      직접 수정하시는 것보다는 그냥 새 스킨 다시 적용하시고 필요한 부분만 수정하시는게 빠르실껍니다.
      그리고 스킨을 수정하시기 전에는 스킨 저장 기능을 자주 사용하시는게 좋을꺼에요.

  4. 엑시아유틸 2014.03.14 21:36 신고  댓글주소  수정/삭제  댓글쓰기

    지금은 많이 정상화?가 되었습니다. 단지 본문과 우측사이드바의 간격조정이 안되는 것외에는 요.ㅠ.수시로 조금씩 조정하고 있습니다. 더 엉망이 될까 무서워서 함부로 못하겠어요. 알면 알수록 어려운 게 태그인 것 같습니다. 머리도 아프네요.ㅠ.
    좋은 하루 되세요.^^

    • Kurien 2014.03.14 21:55 신고  댓글주소  수정/삭제

      많이 고쳐지셨다니 다행이네요!
      본문과 우측 사이드바의 간격 조정은 아마 본문쪽 width값과 sidebar 쪽의 width값, 그리고 wrap 부분이 있다면 그 부분의 width값 정도를 수정하면 될 것 같긴 한데, 정확히는 말씀드리기가 힘들겠네요.
      엑시아유틸님도 좋은 하루 되세요!

  5. Aok코코아 2014.07.31 09:30 신고  댓글주소  수정/삭제  댓글쓰기

    색깔대신 이미지 같은거 로 할수는 없나여?

    • Kurien 2014.07.31 09:31 신고  댓글주소  수정/삭제

      이미지로 할 수 있구요.
      지금 제가 색을 입혀놓은건 색을 입히지 않으면 레이아웃 간의 경계가 안보입니다.
      경계를 알려드릴려고 색을 입혀 놓은 것 뿐이구요.

  6. 쉼표찍기 2014.08.07 21:42 신고  댓글주소  수정/삭제  댓글쓰기

    알기 쉬운 설명 감사드립니다.
    지금 따라서 배우고 있어요. 고맙습니다.

  7. 바라크릴리언트 2014.08.13 21:51 신고  댓글주소  수정/삭제  댓글쓰기

    색깔대신에 이미지를 넣으려면 어떻게 해야하나요?

  8. 2015.01.03 15:14 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 글 잘 보고 있습니다
    저도 스킨을 모두 초기화시키고 html부분을 복사해 넣고 했느데
    css 부분엔 뭘 입력해도 적용되지 않네요. 왜 그런가요?

  9. 난소녀다 2015.01.29 00:29 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~
    저도 처음으로 스킨을 만들고 있는데요,
    레이아웃을 음... 블로그메뉴, 블로그제목, 콘텐츠, 푸터 이순서로 하고싶어요.
    블로그 메뉴부분을 카테고리, 홈, 방명록, 검색창 이렇게 하여
    카테고리가 버튼을 누르면 슬라이드처럼 나오는 방식으로 하고싶은데 우선 레이아웃을 위에처럼 하려면 메뉴부분을 제목 위에 배치를 하면 되는건가요?

  10. NewBee 2015.02.12 22:55 신고  댓글주소  수정/삭제  댓글쓰기

    overflow 위치가 잘못되어 있습니다. footer에 적용해야됩니다.

    • Kurien 2015.02.12 22:57 신고  댓글주소  수정/삭제

      아뇨, 저게 맞습니다.
      overflow: hidden을 지정해줘야 float를 적용한 내용의 height 값이 적용 됩니다.
      다른 방법이 있을 지 몰라도 저 답은 틀린 답은 아니에요.

  11. Kaben 2015.02.21 00:50 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리에는 HTML5의 새로운 태그가 적용이 안 되나요?(예를 들어 <article>, <header> 등)
    저는 최대한 간결하게 블로그를 작성하고 싶어서요.

  12. 고의 2015.10.18 11:35 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 있습니당! 근데 왜인지 모르겟는데 저도 footer에 overflow를 적용해야 하단에 있게 되네욤

  13. uncloud 2016.11.07 11:24 신고  댓글주소  수정/삭제  댓글쓰기

    1단으로 만들 경우에도 #warp을 씌워야 하나요?

  14. 득템 2017.03.08 14:19 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 저는 다른 반응현스킨을 사용하는데 본문에 들어가면 사이드바가 밑으로 갑니다. 아무리 큰화면으로 해도 그렇고요. 왜 그런가요?

    • Kurien 2017.03.09 09:33 신고  댓글주소  수정/삭제

      제가 말씀하신 반응형 스킨을 사용해본적이 없어서 정확한 답변을 드릴 수는 없지만, 말씀하시는 내용으로 봤을 때 본문에 위치한 사이드바가 별도로 html부분에 존재할 것 같습니다.

      사이드바라고 나와있는 부분을 한번 찾아보시고, 이동해보세요.