블로그의 기초! 템플릿의 대략적인 구조

템플릿의 구조

이건 어디까지 검색해서 알아낸 것을 기록하는 것이다. 정확하다고 보장은 못한다.; 

현재 블로그 적용스킨인 Sonica를 기준으로 분석해보겠다.

크게 3부분으로 나눌수 있다. head 부분, CSS 부분, body 부분

head

CSS

body

처음 템플릿 설정할때는 코드를 보고도 이런 구조인줄 몰랐다. 하룻밤 자고(?) 맑은 정신으로 차분히 검색해보면서 에디터로 코드를 찬찬히 살펴보니 이런 구조라는 것을 발견한 것이다! 이렇게 보니 단지 중간에 스타일시트 구문이 들어간 것만 빼고 내가 어설프게 나마 알고 있는 html 구조와 똑같다. 이렇게 기쁠수가~!  어제만해도 스타일시트가 어디에 있는지 눈알이 빠져라 찼고 있었다.; 코드를 보고도 모르고 있었던 것이다.; 아 부끄러워라.

각 부분에 대한 간단한 분석

1. head 

매우 간단하다. 이 줄빼고는 그 다음부터 body 시작할때 까지 전부 스타일시트다. 

 <b:include data='blog' name='all-head-content'/> : 이부분은 파비콘을 설정하는 부분이다.

 <data:blog.pageTitle/> : 말그대로 블로그의 타이틀을 보여준다.

2. CSS

 </title>바로 아래 붙어 있다. <b:skin>이란 태그로 시작한다. 이부분이 가장 길고도 찼아볼곳도 많은 부분이다.;  나에게 생소한 부분이 많기 때문에  분석에 시간이 상당히 걸릴 것이다. 그래도 한번 보면 어떤 부분을 정의 하는지 감이 오는 부분도 있다. 

• /* Variable definitions : 이 주석아래로 템플릿에서 사용되는 요소들(폰트,배경등)의 색깔, 크기, 폰트종류등등을 name 태그로 정의 한다. 
• 다음은 body가 나오는데 블로그에서 보면 바깥부분을 가르키는거 같다.; (밑의 그림 참조;;;)
• #header-wrapper : 헤더 전체를 뜻한다. 여기보면 width:960px;라고 설정되있다. 이 크기가 블로그의 가로폭이다. 이걸 조정하면 헤더의 가로 크기만 조정할 수 있다. 물론 다른곳도 같이 조정해야 이상해지지 않을 것이다.
• #outer-wrapper : 확실하지 않치만 #main-wrapper 와 #sidebar-wrapper를 둘러싼 곳을 가르키는 듯? 
• #main-wrapper : 이 부분이 본문에 관한 곳이다. 여기에 양쪽정렬태그를 넣어서 쓰고 있다. 여기서 가로폭과 #sidebar-wrapper 가로폭 그리고 margin의 크기를 전부 합쳐서 이 스킨에서는 전체 가로폭이 960px이다.
  

• #sidebar-wrapper : 가젯들이 들어와있는 곳이다. 본문 바로 옆에 위치함
  
• #comments, #footer : 이부분은 댓글과 바닥글에 대한 설정이다.
  
• 그외도 많다;;; 
• #navbar-iframe {
  display: none !important;
  }
  이곳은 Navbar 표시 여부를 나타내는 곳이다. none은 감추기. on으로 설정하면 바가 상단에 표시된다. 블로거에서 제공하는 기본 템플릿들은 전부 이 바가 보이도록 설정되있는데 개인이 만든 템플릿들은 안보임으로 되있다. 

위의 그림은 허접하게 나마 그려본 템플릿의 구성도이다.; 이것이 일반적이 2단 템플릿의 구조이다.

3. body

이곳은 html태그로 구성요소들을 정렬해주는 곳이다. 여기서 Layout조절이 가능할듯. 여기는 태그 공부만 좀 하면 이해하는데 어려움은 없을듯.

휴.....

간략하게 나마 정리해보았다. 자세히 파고 들어가면 밑도끝도 없으니 이쯤에서 일단 멈춰야겠다. 아직 불확실하게 이해하고 있는 곳도 많고, 아예 모르는 곳도 많고... (...) 

2010.06.15 최초 작성완료