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 에서 확인하실 수 있습니다.