티스토리 블로그 스킨 분석해보자

이전글 보기 :
2009/04/21 - [Useful Tips] - 티스토리 블로그 스킨 분석해보자 - 처음편

* 개요

티스토리 블로그 스킨에 대해서 전반적인 이야기를 해보겠습니다. 실제 스킨의 코드를 보면서 살펴보죠.
너무 전문적인 내용은 링크로 대체하겠습니다.
틀린 점이 있다면 지적해주시면 감사하겠습니다. 수정하도록 하겠습니다. *

참고주소들 :
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4
http://www.mozilla.or.kr/ko/docs/web-developer/web-standard-guide-2005.pdf
* 테터툴즈 스킨 레이아웃 간략 보기

티스토리 스킨의 일반적인 구성도

container 안에 상단에는 header 가 중간에는 content 와 sidebar 가 있고 아래에는 footer 가 있는 형태가 보통입니다.
당연히 sidebar 를 양쪽에 생성도 가능하며 아래부분에다가 sidebar 를 둘 수 도 있습니다.

*skin.html 살펴보기

자신이 사용하는 스킨의 skin.html 을 열어보면 복잡하겠지만 큰 부분을 정리를 해서 단순화 시켜보면

( #id 의 이름은 조금씩 다를 수 있습니다 )

div 로 레이어(layer) 구성이 되어 있고 container 안에 header , content , sidebar , footer 가 있는 형태입니다.

* 자세히 살펴보기 (http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=3)

스킨은 XHTML 을 따르고 있습니다. XHTML (eXtensible HyperText Markup Language) 는 HTML 을 좀더 명확하게 구조화 시킨 개념이라고 보면 되겠습니다. 큰 특징으로는 태그를 열었다면 반드시 닫는 형태로 되어있습니다.

몇가지 예를 들어보겠습니다.

틀린 예시:
<img src=/images/test.jpg> 
<h1>텍스트

옳은 예시:
<img src="/images/test.jpg" width="40" height="30" alt="테스트 그림" /> 
<h1>텍스트</h1>

img 태그의 경우 보통 위와 같은형태로 쓰지만 틀린점을 지적해보자면 열었을때 닫지를 않았습니다. 보통 짝지가 없는 태그의 경우
끝을 " />" 의 형태로 닫아주면 되겠습니다. 그리고 속성값은 모두 소문자로 모두 적어주어야합니다. alt 의 속성은 보통 사용하지 않는걸로 알고있지만 써주는것이 좋습니다. 대체문자는 만약 그림이 어떤 문제로 인해서 뜨지를 못했을때 대체해서 그림자리에 뜨게 되어
그림이 있는 자리임을 알려주게 됩니다. 의 경우도 와 같이 닫아주어야합니다.

웹표준이라는건 강압성이 있는것은 아닙니다. 하지만 W3C 에서 이렇게 하는것이 옳다 라고 회의가 끝나면 그렇게 지정하고 권고안으로 됩니다. 여러개의 웹 브라우저가 지구상에는 존재하며, 앞으로 서로 다른 브라우저에서 같은 화면이 나오도록 이끌어 나가기 위해서의 권고안이라고 보면 될것같습니다. 하지만 웹표준이라고 해서 반드시 그게 옳다고 생각하는건 조금 잘못이 있으며, 아직까지도 이렇게하는게 좋다 나쁘다등의 토론을 통해서 권고안이 계속 제시가 되는 상태입니다. 앞으로도 쭉 그렇게 될것입니다.

* 실제 Skin.html / style.css 분석해보기
테스트 페이지 : http://cdmaniiii.tistory.com

티스토리 또는 테터툴즈 기반의 스킨을 살펴보면 skin.html 과 style.css 로 크게 구성되어있고 나머지 이미지들과 또 추가적으로 자바스크립트등을 사용해서 꾸며놓은게 있다면 .js 파일등도 몇개 있는 형태로 되어있습니다.

크게 중요한것은 skin.html 과 style.css 입니다. skin.html 은 내부적으로 대부분 div 의 아이디를 가지고 있는 레이어 형태로 이루어져 있으며, 이 레이어들이 실제 위치하고 그리고 배경그림은 어떻게 되며 색은 어떻게되고 글꼴은 어떻게 되지 그리고 링크의 형태는 어떻게될지등은 style.css 에서 지정되어 있습니다.

skin.html 의 뼈대부분과 그리고 살을 입히고 색을 입히는 style.css 의 스타일시트 부분을 분리하는것이 웹표준에서 강조하는 부분입니다. 분리를 했을때의 장점은 분리를 하지 않고 각 레이어마다 스타일을 따로 지정한다면 공통된 부분을 다시 여러번 지정해야하기때문에 텍스트 용량이 늘어나게 되며, 만약 html 파일의 상단부분에 스타일시트를 따로 구분해서 작성을 한다고 치더라도 어쩔 수 없이
반복되는 부분이 생기기 때문이며, 그리고 따로 분리를 해놓을경우에는 style.css 를 한번만 내려받고 난뒤에는 다시 읽어들일 필요가 없기때문에 속도에서 이득을 보기 때문입니다. 또하나는 분리를 해놓고 한쪽에 모아서 써놓을경우에는 css 만 살펴보고 수정하는것만으로도 페이지의 모든 스타일을 한번에 모두 지정하는것이 가능합니다.

이렇게 하기 위해서는 한가지 지켜야할것이 있으니, 반드시 태그는 태그의 목적에 부합되는것을 사용해야한다는 점입니다.
(이부분에 대해서는 따로 포스트를 만들어보겠습니다 * )
티스토리의 기본스킨은 테터툴즈 기반의 스킨으로 웹표준을 잘 이행하고 있습니다. 모델로서 적합하죠.

위에 예제로 제시한 스킨의 실제 내부를 살펴보면서 하나하나 알아보도록 하겠습니다.

* skin.html 상세 설명

해당 스킨을 위에서 부터 아래까지 차례대로 설명을 하겠습니다.

가장 윗부분에는 여러 브라우저에서 페이지가 읽어질때 표현 방법을 미리 지정하여 적절하게 표기하도록 선언하는 부분이 있습니다.

선언된부분은 XHTML 1.0 표준 문서 형식이군요. 붉은 색 글자료 표기한 부분에 Strict , Transitional , Frameset 으로 3가지로 구분이 됩니다. 보통은 Strict , Transitional 로 구분을 하는데 Strict 는 엄격한 잣대로 XHTML 을 지정한다. Strict 로 지정을 해두면 skin.html 내에 따로 각 태그마다 스타일을 지정해놓았다고 치더라도 그것보다는 style.css 에 있는것을 지정하게된다. 어떻게 보면 가장 이상적인것이긴하지만, 블로그를 쓰면서 각종 애드온을 설치하고 따로 스타일을 어쩔 수 없이 지정하는 경우도 있고 , 지금은 웹표준에서 제외된 태그들도 가끔 사용자가 쓰는경우도있기 때문에 Strict 로 지정해둘 경우 자신이 원하는대로 출력되지 않을 수 도 있다. 이유는 위에 설명한 바와 같다. 지금은 그것보다는 조금은 덜 엄격한 Transitional 로 지정이 되어 있다. 때문에 따로 skin.html 에 스타일을 지정해서 넣더 라도 또는 웹표준에서 더이상 지원하지 않기로 정해진 태그를 쓰더라도 스타일로 지정이 되며 사용도 가능하게 된다.

조금 더 자세히 알아보고 싶은 분은 아래의 링크를 참조하기 바란다.

참고 주소 : http://www.w3.org/QA/2002/04/valid-dtd-list.html

Recommended DTDs to use in your Web document.

When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. To ease the work, below is a list of recommended declarations that you can use in your Web documents.

XHTML 의 일반 문법을 준수하겠다는 내용이다. skin.html 에는 <head><title></title></head><body></body> 로 반드시 구성이 되어있어야하며, 태그를 반드시 열었다면 닫아야한다. ( 등등) 그리고 모든 속성값은 따옴표 나 작은 따옴표 로 묶어야하며, 모든 요소 및 속성값은 소문자로 적어야한다.

틀린 예시
<a HREF=http://cdmanii.tistory.com>틀린예</A>
<img SRC="/images/cdmanii.jpg" border=0>

옳은 예시
<a href="http://cdmanii.tistory.com" title="cdmanii블로그">옮은예</a>
<img src="/images/cdmanii.jpg" border="0" alt="" />

한가지 더 추가하자면 의 경우 로 쓰는경우가 있지만 이전 브라우저와의 호환성을 위해서는 공백을 넣어주는게 좋다

, 는 로 써주는것이 좋으며, 가능하다면 줄내리는 것은 을 사용하지 않고 style.css 에서 줄간격을 조정하는등으로 인해서 조정해주는것이 좋다.

<head></head> 내에는 이 문서(skin.html) 에서 선언해야 할 부분들이 내포 되어있다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
는 컨텐츠 타입을 지정하는 부분으로 케릭셋이 utf-8 로 되어있다는걸 미리 지정을 해놓는 부분이다. 웹브라우저에서 인코딩에 해당하는 부분이며 이부분을 미리 지정해 놓으므로서 문서내에 포함된 글들이 옳바르게 출력되는걸 돕는다.

<link rel="alternate" type="application/rss+xml" title="[＃＃_title_＃＃]" href="[＃＃_rss_url_＃＃]" />
웹브라우저의 블로그 주소 부분에 rss 에 대한 부분을 나타낼 때 필요한 부분이다. title 와 href(경로) 는 치환자로 되어있으며 블로그의 환경설정에서 지정해둔 타이틀과 rss 주소를 따라가게 된다. 또는 직접 RSS 주소를 기입할 수 도 있다.

<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
스타일시트 파일의 경로를 지정해주는 부분이다.

<link rel="shortcut icon" href="[＃＃_blog_link_＃＃]favicon.ico" />
블로그의 즐겨찾기부분에 사용될 ico 파일을 지정하는 부분이다. 블로그 환경설정에서 이부분을 설정해놓는다면 이태그에서 이부분이
동작하여 해당 ico 파일을 뛰우게 된다.

<title>[＃＃_title_＃＃] :: [＃＃_page_title_＃＃]</title>
<title></title> 는 대부분 알다시피 문서의 타이틀을 선언하는부분이다. 내부에 있는 치환자를 지워버리고 자신이 원하는 내용을 넣어버릴 수 도 있긴하지만, 스킨은 모든사람이 쓰는 부분이기때문에 해당 설정내용에 따라서 변환하는 치환자를 사용했다.
[＃＃_title_＃＃] 는 블로그의 타이틀(제목)을 의미하며
[＃＃_page_title_＃＃] 는 블로그의 각 페이지의 제목을 의미한다.

예를 들어 블로그의 타이틀([＃＃_title_＃＃])은 cdmanii's computer story 이며, 블로그의 어떤글의 제목([＃＃_page_title_＃＃])이 "오늘 블로그 시작" 이라면, 위에것이 동작하면 문서의 타이틀이 아래와 같이 출력된다

cdmanii's computer story :: 오늘 블로그 시작 - Internet Explorer

한가지 여기서 팁이라면 [＃＃_title_＃＃] :: [＃＃_page_title_＃＃] 의 순서를 [＃＃_page_title_＃＃] :: [＃＃_title_＃＃] 로 바꿔줄경우 검색사이트에서 앞부분의 유효한 제목 즉 각 게시물의 제목을 먼저 읽기 때문에 검색에 유리하다고 한다.

<body></body> 는 실제로 문서에 보여질 부분을 지정하는 부분이다. 안쪽을 보면 <s_t3></s_t3> 로 되어 있는것을 볼 수 있다.
문서내에 자바스크립트를 쓸 수 있기때문에 지정하는 부분이다.

이제부터 나올부분은 실제로 div 로 이루어진 실제 부분을 밝혀 볼 차례이네요.

처음 볼 부분은 테스트 스킨의 상단 부분 입니다. 붉은색으로 넓게 표시된 부분은 wrapTop 라는 id 를 가진 div 틀이며, 그 안에는
tCenter 와 tRight 의 두개의 클래스 이름을 가진 2개의 div 틀이 있습니다.

div 는 아시다싶이 레이어를 선언하는 부분입니다. 그런데 조금 이상하죠? 따로 위치나 넓이 속성값을 나타낸 부분이 전혀 없습니다.
아이디만 wrapTop 이라고 덩그러니 있네요. 이제 style.css 에서 wrapTop 라는 아이디의 속성값을 찾아봅니다.

해당 레이어 아이디를 위와같이 지정을해놓았군요. background : 는 백그라운드를 지정하는 부분이며 transparent 는 투명하게, url 은 배경주소는 (images/box_topleft.gif) 를 no-repect left top 는 반복하지 않고 왼쪽위에서 그림 시작, margin-top: 30px 는 상단에 공백을 30px 두라는 뜻입니다.

좀 더 상세한 CSS 에 대한 설명은 다음편에서 준비하겠습니다. *

* 치환자 및 반복되는 부분 처리

skin.html 의 내용을 살피다보면 치환자라는 부분이 있습니다.

위에 코드에서 보면 [## 로 시작하는 특이 한 부분이 있습니다. 이부분이 치환자 입니다. 치환자는 즉 말 그대로
상황에 맞게 치환이 되는 부분을 뜻합니다.

치환자에 대한 좀 더 자세한 설명 (티스토리 문서)
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4

예를 들어 보겠습니다.

위에 줄이 스킨에서 실행이 되면 [＃#_blog_link_＃#] 치환자는 자신의 블로그 주소를 뜻하므로 자신의 블로그
주소로 치환(대체) 됩니다.

즉,

로 바뀌게 됩니다.

당연히 아래와 같이 임의로 수정해서 넣어도 아무런 문제없이 동작이 됩니다. 하지만 치환자를 왜 쓸까요? 이유는 스킨은 혼자만 쓰는것이 아니기 때문입니다. 다른사람에게 자신의 스킨을 줬을때 저 주소부분을 다시 자신의 주소로 일일이 바꾸어야할까요?
만약 아래와 같이 치환자 없이 써 두었다면 일일이 다 바꾸어야 하는 수고를 감수 해야 할것입니다.

하지만, 치환자로 해두었다면 타인의 스킨을 받아서 자신의 스킨에 적용해도 치환자가 적절하게 치환되면서 자신의 스킨으로 탈바꿈
하게 되는것이죠. 때문에 치환자는 필요합니다.

-

반복 되는 부분의 처리도 있습니다. 예를 들면 댓글이 달리는 부분이나, 또는 글 보관함등을 찍어 줄 때 필요합니다.
보통은 홈페이지를 만들때 특히 게시판이겠죠, 댓글이 달리는 부분은 반복문을 사용하여서 그부분을 반복하여 찍습니다.
그부분을 수정하여 얼마든지 꾸밀 수 있죠. 하지만, skin.html 을 살펴보면 for while 등의 반복문은 보이지 않습니다.

글 보관함을 예로 들어보죠

글보관함은 자신이 쓴글의 달(month) 순으로 갯수가 저장되어 쉽게 그 달에 쓴 글을 찾을 수 있습니다.

이부분이 어떻게 구현되어있나 살펴보죠.

생각보다는 간단하게 되어있죠? 차례대로 살펴보겠습니다.

479 줄의 <s_sidebar_element> 는 이 부분이 사이드바의 한 요소라는 것을 나타내는 부분입니다. 맨 아래쪽에는 닫히는 태그가 있죠.
480 줄은 주석입니다. 이부분이 최근 보관함 모듈이라는 걸 써놓았네요.
481 줄은 레어어를 구성하고 id 는 archive 를 주었습니다. style.css 에 해당 아이디를 찾아가면 스타일을 어떻게 정의했는지 알수있습니다.
482,483 줄은 글 보관함의 제목과 그리고 리스트 형태로 뿌리기 위해서 <ul><li></li></ul> 로 구성했군요.

그런데 여기서 자세히 봐야할 부분은 빨간색 박스 부분입니다. 자신이 12개월동안 글을 적었고 각 달마다 글을 꾀 많이 적었다면
리스트는 길게 나타날 것 입니다.

이 리스트 부분에서 반복되는 부분이 저 빨간색 박스 부분으로, 저 빨간색 박스부분은

글보관함의 저 빨간색 박스 부분을 나타냅니다. 코드상의 빨간색 박스 부분이 반복되면서 글보관함의 실제 리스트를
1개씩 만들게 되죠.

즉 <s_archive_rep></s_archive_rep> 안에 있는 부분이 실제 값을 모두 찍을 때까지 반복되게 됩니다.

반복되는 부분의 내용을 살펴보면

<a href="[＃#_archive_rep_link_＃#]">[#＃_archive_rep_date_＃#] </a>
([#＃_archive_rep_count_＃#])

로 되어있네요. 이부분은 처음 1번 실행될때

2009/04 (1) 이라는 값을 만듭니다.

두번째 반복될때는

2009/02 (1) 이라는 값을 찍게 되죠.

치환자를 설명하면,

[#＃_archive_rep_link_＃#] : 각 월별 보관함으로 이동할 주소
[#＃_archive_rep_date_＃#] : 년과 월을출력
[#＃_archive_rep_count_＃#] : 각 월별에 속한 글의 갯수

입니다. 쉽게 풀어 쓰자면

<a href="[각 월별 보관함으로 이동할 주소 ]">[년과 월을출력] </a>
([각 월별에 속한 글의 갯수])

가 되는것이죠. 이렇게 반복되면서 출력이 되게 되어 있습니다.

잘 살펴보면 이 이외에도 많은 부분이 반복되는 구문이 사용되었음을 알 수 있습니다.
반복문을 사용하면 코드가 더 간결해지고, 속도가 더 빠르다는 장점이 있습니다.

이정도에서 일단 둘째편을 마치고 다음편에서는 CSS 를 사용하여 꾸미는 방법, 그리고 자신의 블로그를 꾸미는 방법들을
소개해보겠습니다 *

'유용한_팁 > 블로그_팁' 카테고리의 다른 글

블로그 방문자 늘리기 - 블로그 처음 시작 하기 (10)	2009.09.06
블로그 서식 꾸미기 #2 - 플래쉬 소제목 활용하기 (동영상) (81)	2009.09.01
트위터카운터(Twittercounter)를 자신의 트위터로 바로 연결하기 (24)	2009.08.31
티스토리 블로그 스킨 분석해보자 - 처음편 (70)	2009.04.21
블로그 광고 시스템 써보고 느낀 점 (52)	2009.04.02

씨디맨의 컴퓨터이야기

티스토리 블로그 스킨 분석해보자 - 둘째편

Recommended DTDs to use in your Web document.

'유용한_팁 > 블로그_팁' 카테고리의 다른 글

댓글

티스토리툴바

티스토리 블로그 스킨 분석해보자 - 둘째편

Recommended DTDs to use in your Web document.

'유용한_팁 > 블로그_팁' 카테고리의 다른 글

관련글

댓글

티스토리툴바