[Blog skin을 만들어보자] #1 블로그 스킨 구성 이해하기



---

스킨 구조 파악하기

스킨의 구조를 파악해야 해보자.

예를 들어 2단형의 기본 스킨의 디자인을 보면 크게
header, content, sideinfo, footer로 이루어져 있다.
각 영역은 아래와 같은 정보를 담고 있는데...

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

 

skin.html step 1 structured

Tip : 코드가 길어지면 헛갈릴 수 있으므로 닫는 </div> 태그에 주석을 달아 놓자.

이제 위의 대략적인 구조화를 좀 더 자세하게 작성해 보자.

skin.html step 2 structured

 
 
01. 블로그 제목
02. 블로그 메뉴
 
  
 
11. 검색 결과 리스트
12. 검색 결과 댓글 리스트
13. 위치 로그
14. 태그 클라우드
15. 방명록 
15-1. 방명록 글쓰기
15-2. 방명록 리스트
 

16. 공지사항 글
17. 보호 글
18. 글 
18-1. 글 제목 | 카테고리 | 작성일 | 글 관리
18-2. 글
18-3. 글 관련 태그
18-4. 트랙백 | 댓글
18-5. 트랙백
18-6. 댓글 
18-6-1. 댓글 리스트
18-6-2. 댓글 쓰기
 



19. 페이지
 
  
 
  
 
  
 

영역과 컨텐츠
어떤 영역에 어떤 내용을 넣을 것인가는 스킨을 제작하는 분들의 몫입니다. header 영역에 블로그 이미지를 넣을 수도 있고, sideinfo 영역에 단순히 카테고리와 최근 글 리스트와 달력만 보이게 할 수도 있고, 검색을 header 영역에 넣을 수도 있습니다. 얼마든지 자유롭게 디자인 할 수 있습니다.

container의 역할
container 는 블로그의 레이아웃 디자인을 위한 레이어라고 할 수 있습니다. content 영역을 스프링이 달린 노트형식으로 만들고 싶다고 한다면 <div class="contentWrap"> 이런식으로 레이어를 추가해 두고 배경이미지를 스타일로 지정할 수 있습니다. 이런식으로 디자인을 고려한 레이어를 추가해 두는것도 좋은 방법입니다.

클래스 이름 짓기
클래스명을 지을 때 상당히 많은 고민을 하게 됩니다. 작명을 할 때는 직관적이고 명확한 의미의 이름이 좋습니다. guest보다는 조금 길지만 guestbook라는 이름이 더 좋습니다. 그리고 두 개의 단어를 사용하게 될 경우 단어의 경계를 위해 두 번째 단어 앞자리를 대문자로 작성합니다. 예를 들어 최근 댓글 같은 경우는 recentComment 라고 씁니다. 이런 식의 규칙은 스킨 제작자 자신이 정하면 됩니다. 규칙을 한번 정해 두면 나중에 수정 작업할 때 더 편하게 작업을 진행 할 수 있습니다.