2. 티스토리 스킨의 구조 파악하기

티스토리 스킨을 만들기 전, 스킨의 구조에 대해 알아보겠습니다.

기본적인 폼을 만들어야 한다고 했죠?

저는 위와 같은 폼으로 만들 생각입니다.

<div id="container">

<div id="header"></div> <!-- header close -->

<div id="content"></div> <!-- content close -->

<div id="sidebar"></div> <!-- sidebar close -->

<div id="footer"></div> <!-- footer close -->

</div> <!-- container close -->

이건 티스토리측에서 제공하는 기본 폼이구요.

<div id="container">

<div id="header">

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

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

</div> <!-- header 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 id="sidebar">

</div> <!-- sidebar close -->

<div id="footer">

</div> <!-- footer close -->

</div> <!-- container close -->

이건 티스토리 측에서 기본 제공 하는 구조화 된 폼입니다.

사이드바를 반대편으로 옮기고 싶은분은 #sidebar 부분을 #content 부분으로 옮기시면 됩니다.

저는 사이드바가 좌측에 있는 스킨을 만들테니,

<div id="container">

<div id="header">

<div id="menu"></div><!-- menu close -->

</div> <!-- header close -->

<div id="sidebar"></div> <!-- sidebar close -->

<div id="content"></div> <!-- content close -->

<div id="footer"></div> <!-- footer close -->

</div> <!-- container close -->

메뉴를 헤더와 사이드바 사이에 넣고 이렇게 적으면 되겠네요.

이렇게 영역과 컨텐츠 부분을 어떻게 하느냐는 만드는 분에 따라 마음대로 지정하시면 됩니다.

티스토리 안에서 만들기 때문에 한계가 있긴 하지만 정해진 틀은 그렇게 좁지 않으니까요.

그리고 전체적인 구조를 감싸주는 #container의 역할은 전체적인 레이어를 잡아주는 역할로,

레이아웃 디자인을 설정 할 수 있습니다.

#container에 스프링이 달린 노트의 이미지를 넣으면 메모장의 느낌이 나는거죠.

이러한 방식으로 디자인에 이용 할 수 있습니다.

또 class명과 id명을 지을때는 알기 쉽게 해주시는 것이 좋습니다.

제목 부분은 header, 메뉴는 menu 처럼 알기 쉽게 해주셔야 수정할 때 편하게 확인 할 수 있습니다.

나중에 보더라도 쉽게 알 수 있게 끔 해두는게 정말 중요합니다.

다음번엔 치환자를 사용해서 스킨의 뼈대를 구성해보겠습니다.