이제 어떤식으로 스킨을 만들것인지 결정 되었습니다. 그냥 군더더기 없는 심플한 스킨이죠? ^^
먼저 디자인한 스킨이 어떠한 구조로 이루어 졌는지에 대해 알아 보겠습니다. 앞서 결정된 디자인을 잘 뜯어 보면, 크게 header, menu, content, sidebar, footer영역으로 이루어져 있습니다. 왼쪽 이미지에서는이러한 레이어 외에도 "inner"라는 레이어들이 보입니다. 이 레이어들은 단지 디자인의 융통성을 위한 레이어들이며 특별한 기능을 하진 않습니다. 자신에게 필요치 않는 레이어라고 생각되면 생략해도 상관없다는 뜻이 되겠지요.
header에는 블로그 제목이 들어갑니다. 이를 이미지로 대체할 수도 있으며 배경에 이미지를 깔아둘 수도 있습니다.
menu에는 텍스트큐브에서 제공하고 있는 커버, 공지사항, 지역, 태그, 키워드, 방명록등의 블로그 메뉴가 들어가게 됩니다. 또한 검색을 할 수 있는 검색폼도 들어가 있습니다. 검색폼을 사이드바에 위치시켜도 상관없습니다.
content에는 검색 결과 리스트, 검색 결과 댓글 리스트, 검색 결과 트랙백 리스트, 위치로그, 태그클라우드, 키워드 리스트페이지, 키워드 설명페이지, 방명록, 에러 페이지, 공지사항, 보호글, 글, 페이징 하는 부분이 들어가게 됩니다.
sideinfo에는 블로그 또는 포스트에 관련된 여러 정보들을 포함하고 있습니다. 블로그 이미지, 블로그 설명, 공지리스트, 카테고리, 태그, 저작자 리스트, 최근글 리스트, 최근 댓글, 최근 트랙백, 글 보관함, 링크, 달력, 카운터, 구독 버튼등이 이에 해당됩니다.
footer는 기타 전체 블로그 메뉴와 카피라잇 부분이 들어 갈수 있겠죠.
그럼 미리 구상한대로 대략의 구조화에 들어가 보겠습니다. 위에서도 언급하였지만, "inner"라는 레이어들 때문에 좀 복잡해 보이긴 합니다만, 필요치 않다고 판단되시면, 생략하셔도 상관은 없습니다.
skin.html step 1 structured
<div id="container">
<div id="containerInner">
<div id="header">
<div class="inner">
header 영역
</div>
</div><!-- header close -->
<div id="menu">
<div class="inner">
menu 영역
</div>
</div><!-- menu close -->
<div id="body">
<div class="bodyInner">
<div id="content">
<div class="inner">
content 영역
</div>
</div><!-- content close -->
<div id="sidebar">
<div class="inner">
sidebar 영역
</div>
</div><!-- sidebar close -->
</div>
</div><!-- body close -->
<div id="footer">
<div class="inner">
footer 영역
</div>
</div> <!-- footer close -->
</div>
</div> <!-- container close -->
Tip : 코드가 길어지면 자칫 헛갈릴 수 있으므로 닫는 태그에 주석을 달아 놓습니다. 태그들의 짝(열린 태그가 있으면 이를 닫아주는 태그가 반듯이 필요합니다)이 맞지 않으면 전체적으로 화면이 깨져 보일 수 있습니다.
위의 대략적인 구조화를 좀더 detail 하게 작성해 보겠습니다.
skin.html step 2 structured
<div id="container">
<div id="header">
<h1>블로그 제목 </h1>
</div> <!-- header close -->
<div id="menu">
<div class="blogMenu"> 블로그 메뉴 </div>
<div class="search"> 검색 </div>
</div> <!-- menu close -->
<div id="body">
<div id="content">
<div class="coverPage">커버페이지 </div>
<div class="searchList">검색 결과 리스트 </div>
<div class="searchRplist">검색 결과 댓글 리스트 </div>
<div class="searchTblist">검색 결과 트랙백 리스트 </div>
<div class="localog">위치 로그 </div>
<div class="taglog">태그 클라우드 </div>
<div class="keyword">키워드 페이지</div>
<div class="keylog">키워드 설명 페이지</div>
<div class="guestbook">방명록
<div class="writeForm">방명록 글쓰기 </div>
<div class="commentList">방명록 리스트 </div>
</div><!-- guestbook close -->
<div class="pageError">에러 페이지</div>
<div class="entryNotice">공지사항 글 </div>
<div class="entryProtected">보호 글 </div>
<div class="entryPost">글
<div class="titleWrap">글 제목 | 카테고리 | 작성일 | 작성자 | 글 관리 </div>
<div class="article">글</div>
<div class="tagTrail">글 관련 태그 </div>
<div class="communication">트랙백 | 댓글 </div>
<div class="trackback">트랙백 </div>
<div class="trackbackAdd">트랙백 주소 </div>
<div class="trackbackList">트랙백 리스트</div>
<div class="comment">댓글
<div class="commentList">댓글 리스트 </div>
<div class="commentWrite">댓글 쓰기 </div>
</div>
</div> <!-- entryPost close -->
<div class="paging">페이지</div>
</div><!-- content close -->
<div id="sidebar">
<div class="blogImage">블로그 이미지</div>
<div class="blogDesc">블로그 설명 </div>
<div class="notice">공지사항 리스트 </div>
<div class="category">카테고리</div>
<div class="tagbox">태그 박스 </div>
<div class="author">저자 </div>
<div class="recentPost">최글 글 </div>
<div class="recentComment">최근에 올라온 댓글 </div>
<div class="recentTrackback">최근에 받은 트랙백 </div>
<div class="archive">글 보관함 </div>
<div class="link">링크</div>
<div class="calendar">달력</div>
<div class="counter">방문자 수 </div>
<div class="bannerRss">구독하기 버튼 </div>
<div class="bannerTextcube">텍스트큐브 로고 </div>
</div><!-- sidebar close -->
</div><!-- body close -->
<div id="footer">
<div class="footMenu">블로그메뉴 </div>
<div class="copyright">copyright</div>
</div><!-- footer close -->
</div> <!-- container close -->
꼭 그렇게 해야 하나요?
header 영역에 블로그이미지를 넣고 싶어요~
어떤 영역에 어떤 내용을 넣을것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을수도 있고, sideinfo영역에 단순히 카테고리와 최근글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 얼마든지 자유롭게 디자인 할 수 있습니다.
container는 왜 넣었나요?
필요없는 레이어 아닌가요?
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 이런식으로 레이어를 추가해 두고 배경이미지를 스타일로 지정할 수 있습니다. 이런식으로 디자인을 고려한 레이어를 추가해 두는것도 좋은 방법입니다.
header는 꼭 header라고 써야 하나요?
top이라고 쓰고 싶어요
클래스명을 지을때 상당히 많은 고민을 하게 됩니다. sideinfo 라고 할지 sidebar라고 할지... guest라고 할지 guestbook 라고 할지... 작명을 할때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두개의 단어를 사용하게 될 경우 단어의 경계를 위해 두번째단어 앞자리를 대문자로 작성하거나 하이픈 또는 언더바를 사용하기도 합니다. 예를 들어 최근 댓글 같은 경우는 recentComment, 혹은 recent-comment라고 씁니다. 이런식의 rule은 스킨 제작자 자신이 정하면 됩니다. recent_comment 라고 써도 누가 뭐랄사람 없습니다. ^^;;; 자신만의 rule을 한번 정해 두면 나중에 수정작업할때 헛갈릴일은 없을것입니다.
스킨 이야기!
작명의 rule에 어떤 강제사항이 있는것은 아니지만 다른 사람이 봤을때 직관적으로 알아볼 수 있는 이름이라면 주석조차도 필요치 않을 수 있습니다. 그리고 본인이 작성한 코드를 한 두달 시간이 흐른 후에 보더라도 특별한 어려움없이 수정할 수 있을것입니다. 그만큼 작명은 중요하다고 할수 있죠
여기까지 스킨의 대략적인 구조를 만들어 보았습니다. 이제 각각의 레이어에 해당되는 치환자를 넣어 보도록 하겠습니다.
