서브메뉴

스킨 제작 매뉴얼 - 2. 스킨의 구조

Step02 : 스킨의 구조

블로그의 구조이제 어떤식으로 스킨을 만들것인지 결정 되었습니다.
header 영역의 배경을 보라색으로 포인트를 준 심플한 2단 스킨! 배경이미지도 기분에 따라 쉽게 변경이 가능!

먼저 디자인한 스킨이 어떠한 구조로 이루어 졌는지에 대해 알아 보겠습니다. 앞서 결정된 디자인을 잘 뜯어 보면, 크게 header, content, sideinfo, footer영역으로 이루어져 있습니다.

header에는 블로그 제목, 블로그 메뉴 또는 블로그 설명, 구독하기 버튼등이 들어갈 수 있겠죠. content에는 검색 리스트, 검색 댓글 리스트, 위치로그, 태그, 방명록, 공지사항, 보호글, 글, 페이징 하는 부분이 들어가게 됩니다. sideinfo에는 블로그 컨텐츠 관련된 여러 정보들을 포함하고 있습니다. 카테고리나, 최근글 리스트, 최근 댓글, 최근 트랙백, 공지사항, 링크, 블로그 이미지카운터 등등이 이에 해당됩니다. footer는 기타 전체 블로그 메뉴와 카피라잇 부분이 들어 갈수 있겠죠.

그럼 미리 디자인 해 놓은 내용을 바탕으로 대략의 구조화에 들어가 보겠습니다.

skin.html step 1 structured

<div id="container">
<div id="header"></div> <!-- header close -->
<div id="content"></div> <!-- content close -->
<div id="sidebar"></div> <!-- sideinfo close -->
<div id="footer"></div> <!-- footer close -->
</div> <!-- container close -->
Tip : 코드가 길어지면 헛갈릴수 있으므로 닫는 </div>태그에 주석을 달아 놓습니다.

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

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="localog">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="paging">19. 페이지</div>
</div><!-- content close -->
<div id="sidebar">
<div class="blogImage">61. 블로그 이미지와 블로그 설명 </div>
<div class="notice">62. 공지사항 리스트 </div>
<div class="adminMenu">63. 관리자 메뉴 </div>
<div class="search">64. 검색</div>
<div class="category">65. 카테고리</div>
<div class="tagbox">66. 태그 박스 </div>
<div class="recentPost">67. 최글 글 </div>
<div class="recentComment">68. 최근에 올라온 댓글 </div>
<div class="recentTrackback">69. 최근에 받은 트랙백 </div>
<div class="archive">70. 글 보관함 </div>
<div class="calender">71. 달력</div>
<div class="link">72. 링크</div>
<div class="counter">73. 방문자 수 </div>
<div class="botton">74. 태터툴즈 로고 | 구독하기 버튼 </div>
</div><!-- sideinfo close -->
<div id="footer">
<div class="menu">91. 홈 | 위치로그 | 태그 | 방명록 | 관리자 | 글쓰기 </div>
<div class="copyright">92. copyright</div>
</div>
</div> <!-- container close -->
꼭 그렇게 해야 하나요? header 영역에 블로그이미지를 넣고 싶어요~
어떤 영역에 어떤 내용을 넣을것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을수도 있고, sideinfo영역에 단순히 카테고리와 최근글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 얼마든지 자유롭게 디자인 할 수 있습니다.
container는 왜 넣었나요? 필요없는 레이어 아닌가요?
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두고 배경이미지를 스타일로 지정할 수 있습니다. 이런식으로 디자인을 고려한 레이어를 추가해 두는것도 좋은 방법입니다.
header는 꼭 header라고 써야 하나요? heaven이라고 쓰고 싶어요
클래스명을 지을때 상당히 많은 고민을 하게 됩니다. sideinfo 라고 할지 sidebar라고 할지... guest라고 할지 guestbook 라고 할지... 작명을 할때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두개의 단어를 사용하게 될경우 단어의 경계를 위해 두번째단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이런식의 rule은 스킨 제작자 자신이 정하면 됩니다. recent_comment 라고 써도 누가 뭐랄사람 없습니다. ^^;;; rule을 한번 정해 두면 나중에 수정작업할때 헛갈릴일은 없을것입니다.

작명의 rule에 어떤 강제사항이 있는것은 아니지만 다른 사람이 봤을때 직관적으로 알아볼수 있는 이름이라면 주석조차도 필요치 않을수 있습니다. 그리고 본인이 작성한 코드를 한두달 시간이 흐른 후에 보더라도 특별한 어려움없이 수정할 수 있을것입니다. 그만큼 작명은 중요하다고 할수 있죠

스킨 이야기! 여기까지 스킨의 대략적인 구조를 만들어 보았습니다. 이제 각각의 레이어에 해당 치환자를 넣어 보도록 하겠습니다.
2008/04/03 18:50 2008/04/03 18:50
25개의 걸린 글 과    0개의 댓글이 있습니다.
이 글의 댓글/트랙백 RSS : http://www.textcube.org/manual/rss/response/75
이 글의 관련글(트랙백) 주소 : http://www.textcube.org/manual/trackback/75