스킨의 뼈대를 결정하는 단계다.
하지만 티스토리 스킨에 나온것처럼 마냥 따라하기만 하면 우리는 구시대적 블로그를 만드는 것이다.
스킨 구조 파악하기
스킨의 디자인을 결정했다면 이제 스킨의 구조를 파악해야 합니다.
예를 들어, 2단형의 기본 스킨의 디자인을 보면 크게 header, content, sideinfo, footer로 이루어져 있습니다. 각 영역은 아래와 같은 정보를 담고 있습니다.
- 1 header
- 블로그 제목, 설명, 블로그 메뉴 등
- 2 content
- 검색 결과, 위치로그, 태그, 방명록, 공지사항, 보호글, 페이징 등
- 3 sideinfo
- 카테고리, 최근글 리스트, 최근 댓글, 공지사항, 링크 등
- 4 footer
- 전체 블로그 메뉴, Copyright 등
skin.html step 1 structured
<div id="container"><div id="content"></div> <!-- content close -->
<div id="sidebar"></div> <!-- sidebar close -->
<div id="footer"></div> <!-- footer close -->
위처럼 일단 따라하기는 해보자.
1 2 3 4 5 6 | <div id="container"> <div id="header"></div> <!-- header End--> <div id="content"></div> <!-- content End --> <div id="sidebar"></div> <!-- sidebar End --> <div id="footer"></div> <!-- footer End --> </div> <!-- container End --> | cs |
무언가 빠진 듯 보인다.
html에는 아주 아주 기본적인 태그들이 존재하는데,
웹의 시작을 알리는 <html>태그
본문과는 상관없이 해당 사이트의 정보를 기재하는 <head>태그
페이지의 시작을 알리는 <body>태그가 들어가야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> </head> <body> <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 End --> </body> </html> | cs |
이제야 좀 웹페이지같아졌다.
하지만 이전에 말했듯이, 우리는 시대에 맞는 웹 사이트를 만들것이다.
웹 페이지를 구성하는 HTML에도 버전이 있는데, (설명은 생략)
이 페이지가 HTML5의 규칙을 수행한다는 의미로 <!doctype HTML>라는 태그를 넣어야 한다.
하지만 더 중요한 것은, 내 웹 사이트의 어떤 부분이 본문이고 소개란이며 헤더인지 알 수 있게 정확히 기재를 해줘야 한다는 것이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype HTML> <html> <head> </head> <body> <div id="container"> <!-- div 태그를 각각 상황에 맞는 HTML5 태그로 변화시켰다. --> <header id="header"></header> <section id="content"></section> <aside id="sidebar"></aside> <footer id="footer"></footer> </div> <!-- container End --> </body> </html> | cs |
div으로만 보여졌던 태그들에게 이름이 붙여졌다.
header와 section(or article), aside, footer는 HTML5로 변화하면서 생긴 모던한 태그이다.
이제 이 요소에 티스토리가 제공하는 기본 요소들을 넣어야 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!doctype HTML> <html> <head> </head> <body> <div id="container"> <header id="header"> <h1>01. 블로그 제목</h1> <div class="menu">02. 블로그 메뉴</div> </header> <section 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> </section> <aside id="sidebar"> </aside> <footer id="footer"></footer> </div> <!-- container End --> </body> </html> | cs |
망할 요소들이 참 많은데, 티스토리는 모든 페이지를 한 HTML에서 다루기 때문에 저렇게 요소 타이틀만 넣었는데도 코드가 쓸데없이 길어지는 것을 볼 수가 있다.