TISTORY 메뉴

검색

가이드 본문

티스토리에 대해서 알려드립니다.

스킨 가이드

  1. 1. 준비단계
  2. 2. 디자인 구상
  3. 3. 스킨구조
  4. 4. 치환자
  5. 5. 스타일
  6. 6. 마무리
3. 스킨의 구조
스킨 구조 파악하기

스킨의 디자인을 결정했다면 이제 스킨의 구조를 파악해야 합니다.
예를 들어, 2단형의 기본 스킨의 디자인을 보면 크게 header, content, sideinfo, footer로 이루어져 있습니다. 각 영역은 아래와 같은 정보를 담고 있습니다.

스킨의 구조
1 header
블로그 제목, 설명, 블로그 메뉴 등
2 content
검색 결과, 위치로그, 태그, 방명록, 공지사항, 보호글, 페이징 등
3 sideinfo
카테고리, 최근글 리스트, 최근 댓글, 공지사항, 링크 등
4 footer
전체 블로그 메뉴, Copyright 등

skin.html step 1 structured

<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 -->
Tip : 코드가 길어지면 헛갈릴 수 있으므로 닫는 </div> 태그에 주석을 달아 놓습니다.

위의 대략적인 구조화를 좀 더 자세하게 작성해 보겠습니다.

skin.html step 2 structured

<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="code_comment">18-6. 댓글
<div class="code_commentList">18-6-1. 댓글 리스트</div>
<div class="code_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 -->
1. 영역과 콘텐츠
어떤 영역에 어떤 내용을 넣을 것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을 수도 있고, sideinfo 영역에 단순히 카테고리와 최근 글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 얼마든지 자유롭게 디자인 할 수 있습니다.
2. container의 역할
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두고 배경이미지를 스타일로 지정할 수 있습니다. 이런식으로 디자인을 고려한 레이어를 추가해 두는것도 좋은 방법입니다.
3. 클래스 이름 짓기
클래스명을 지을 때 상당히 많은 고민을 하게 됩니다. 작명을 할 때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두 개의 단어를 사용하게 될 경우 단어의 경계를 위해 두 번째 단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이런 식의 규칙은 스킨 제작자 자신이 정하면 됩니다. 규칙을 한번 정해 두면 나중에 수정 작업할 때 더 편하게 작업을 진행 할 수 있습니다.

작명 규칙에 어떤 강제사항이 있는 것은 아니지만 다른 사람이 봤을 때 직관적으로 알아볼 수 있는 이름이라면 주석조차도 필요치 않을 수 있습니다. 그리고 본인이 작성한 코드를 한두 달 시간이 흐른 후에 보더라도 특별한 어려움 없이 수정할 수 있을 것입니다. 좀 더 쉬운 작업을 위해서는 클래스의 이름을 짓는 것은 매우 중요합니다.

TIP!

여기까지 스킨의 대략적인 구조를 만들어 보았습니다. 이제 각각의 레이어에 해당 치환자를 넣어 보도록 하겠습니다.