4. 티스토리 스킨 레이아웃 구성하기
티스토리 스킨을 만드는데, 지금은 뼈대만 있으니 살을 붙여야죠?
지금 해야 할 것중 가장 중요한건 레이아웃입니다.
오늘은 그 레이아웃을 구성 해 볼텐데요.
이게 지금 현재 상태입니다.
오늘은 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 에서 확인하실 수 있습니다.
'Project > 티스토리 스킨' 카테고리의 다른 글
| 6. 티스토리 스킨 만들기 사이드바 영역 (10) | 2013.12.18 |
|---|---|
| 5. 티스토리 스킨 만들기 제목과 메뉴 (60) | 2013.12.16 |
| 3. 티스토리 스킨의 뼈대 구성하기 (6) | 2013.12.12 |
| 2. 티스토리 스킨의 구조 파악하기 (18) | 2013.12.10 |
| 1. 티스토리 스킨 디자인 구상하기 (14) | 2013.12.09 |