반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기
저도 까먹기 전에 빨리 이걸 써놔야 할 것 같습니다. 더불어 티스토리 스킨을 직접 제작하려고 결심하신 분들도 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램도 있습니다. 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. 경험을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지도 같이 참고하시면 이해하는데 도움이 될 것입니다.
이곳에서의 설명은 HTML과 CSS를 어느정도 이해하고 계신 분들을 위한 강좌입니다. HTML 웹코딩을 좀 하실 줄 아신다면 아마 쉽게 이해가 되시겠지만, 코딩과 태그에 대한 기초 지식이 없으신 분들이시라면 파악하시는데 조금 어려움이 있을 수 있습니다. 참고하시기 바랍니다.
HTML 구조 이해하기
티스토리 스킨에서 HTML은 여느 웹사이트와 마찬가지로 기본 뼈대 부분에 있어서는 큰 차이가 없습니다. HTML 안에 <head>가 존재하고, head 안에는 meta 태그, link 태그, 그리고 title이 들어갑니다. 또한 script가 들어갑니다. 내부 방식의 style 도 지정이 가능하지만, 티스토리의 html 뼈대를 꾸며주는건 꾸미기 카테고리에 있는 CSS에서 제공합니다.
친효스킨을 바탕으로 설명을 드리자면, 현재 구조는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기</title>
</head>
<body>
<s_t3>
<header>
<!--검색 시작-->
<s_search></s_search>
<!--검색 끝-->
</header>
<!--콘테이너: 사이드바+본문 시작-->
<div id="container">
<!--콘텐츠 영역 시작-->
<div id="contents">
<!--검색결과 시작-->
<s_list></s_list>
<!--검색결과 끝-->
<!--공지사항 시작-->
<s_notice_rep></s_notice_rep>
<!--공지사항 끝-->
<!--방명록 시작-->
<s_guest></s_guest>
<!--방명록 끝-->
<!--보호글 시작-->
<s_article_protected></s_article_protected>
<!--보호글 끝-->
<!--본문 시작-->
<s_article_rep>
<!--인덱스 페이지 시작-->
<s_index_article_rep></s_index_article_rep>
<!--인덱스 페이지 끝-->
<!--퍼머링크 페이지 시작-->
<s_permalink_article_rep>
<!--포스트 상단 (제목/날짜 등) 시작-->
<div>
<!--글 관리 기능 (수정 및 삭제 등)-->
<s_ad_div></s_ad_div>
<!--글 관리 기능 끝-->
</div>
<!--포스트 상단 끝-->
<!--본문내용 시작-->
<div class="article">
저도 까먹기 전에 빨리 이걸 써놔야 할 것 같습니다. 더불어 티스토리 스킨을 직접 제작하려고 결심하신 분들도 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램도 있습니다. 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. 경험을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지도 같이 참고하시면 이해하는데 도움이 될 것입니다. 이곳에서의 설명은 HTML과 CSS를 어느정도 이해하고 계신 분들을 위한 강좌입니다. HTML 웹코딩을 좀 하실 줄 아신다면 아마 쉽게 이해가 되시겠지만, 코딩과 태그에 대한 기초 지식이 없으신 분들이시라면 파악하시는데 조금 어려움이 있을 수 있습니다. 참고하시기 바랍니다. 티스토리 스킨에서 HTML은 여느 웹사이트와 마찬가지로 기본 뼈대 부분에 있어서는 큰 차이가 없습니다. HTML 안에 <head>가 존재하고, head 안에는 meta 태그, link 태그, 그리고 title이 들어갑니다. 또한 script가 들어갑니다. 내부 방식의 style 도 지정이 가능하지만, 티스토리의 html 뼈대를 꾸며주는건 꾸미기 카테고리에 있는 CSS에서 제공합니다. 친효스킨을 바탕으로 설명을 드리자면, 현재 구조는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기</title> </head> <body> <s_t3> <header> <!--검색 시작--> <s_search></s_search> <!--검색 끝--> </header> <!--콘테이너: 사이드바+본문 시작--> <div id="container"> <!--콘텐츠 영역 시작--> <div id="contents"> <!--검색결과 시작--> <s_list></s_list> <!--검색결과 끝--> <!--공지사항 시작--> <s_notice_rep></s_notice_rep> <!--공지사항 끝--> <!--방명록 시작--> <s_guest></s_guest> <!--방명록 끝--> <!--보호글 시작--> <s_article_protected></s_article_protected> <!--보호글 끝--> <!--본문 시작--> <s_article_rep> <!--인덱스 페이지 시작--> <s_index_article_rep></s_index_article_rep> <!--인덱스 페이지 끝--> <!--퍼머링크 페이지 시작--> <s_permalink_article_rep> <!--포스트 상단 (제목/날짜 등) 시작--> <div> <!--글 관리 기능 (수정 및 삭제 등)--> <s_ad_div></s_ad_div> <!--글 관리 기능 끝--> </div> <!--포스트 상단 끝--> <!--본문내용 시작--> <div class="article"> </div> <!--본문내용 끝--> <!--태그 시작--> <s_tag_label></s_tag_label> <!--태그 끝--> <!--관련글 시작--> <s_article_related></s_article_related> <!--관련글 끝--> <!--댓글 시작--> <s_rp></s_rp> <!--댓글 끝--> </s_permalink_article_rep> <!--퍼머링크 끝--> </s_article_rep> <!--본문 끝--> <!--페이징 시작--> <s_paging></s_paging> <!--페이징 끝--> </div> <!--콘텐츠 영역 끝--> <!--사이드바 시작--> <s_sidebar> <s_sidebar_element> <!--공지사항--> <s_rct_notice></s_rct_notice> </s_sidebar_element> <s_sidebar_element> <!--블로그정보--> </s_sidebar_element> <s_sidebar_element> <!--카테고리--> </s_sidebar_element> </s_sidebar> <!--사이드바 끝--> </div> <!--콘테이너: 사이드바 + 본문 끝--> <!--푸터 시작--> <footer></footer> <!--푸터 끝--> </s_t3> </body> </html> 대략적으로 이런 구조를 가지고 있습니다. 스킨의 구조에 따라 입맛에 맞게 바꿀 수 있지만 앞서 설명드렸듯 친효스킨을 기준으로 설명드리면 이런 형태입니다. 우선 html 이라는 문서 내부의 기본 골격은 그대로 유지됩니다. 보시면 <body> 태그 바로 다음으로 자식요소가 <s_t3> 이라는 요소로 마크업 되어 있습니다. 이것은 무조건 본문인 body 안에 들어오는 티스토리 그룹 치환자 중 하나로 필수라고 할 수 있습니다. 역할은 티스토리 구조에서 사용자가 클릭하는 메뉴에 해당되는 값치환자를 로드하는 기능을 담고 있습니다. 티스토리에서 사용하는 치환자를 잠깐 알아볼까요? 치환자는 한마디로 CSS에서의 ID 혹은 CLASS 와 비슷한 역할을 수행합니다. 치환자는 두 종류가 있습니다. 그룹치환자와 값치환자 이렇게 두 가지 입니다. 위의 뼈대에서 설명을 드리자면 본문의 시작을 알리는 <s_article_rep></s_article_rep> 를 그룹치환자라고 하며, <title> 안에 들어 있는 반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기 를 값치환자 라고 합니다. 보통 일반적인 홈페이지에서 메뉴를 클릭하면 해당 페이지로 이동을 하게 됩니다. 티스토리에서는 이 페이지를 줄이고자 치환자라는 기능을 써서 가독성을 높인다고 보시면 됩니다. 하나의 화면안에 전체를 다 담아낼 수 없으니, 필요할때마다 꺼내 쓰는 것 입니다. 흔한 예로 친효스킨 처음 화면, 즉 메인 화면은 인덱스 페이지가 로드 됩니다. 만약 여러분들이 만들려고 하는 티스토리 스킨의 HTML에 인덱스 페이지의 그룹치환자가 적용되어 있다면 무조건 이것을 1순위로 해서 로드합니다. 친효스킨에서는 크게 헤더, 사이드바, 콘텐츠를 담는 본문, 그리고 맨 아래의 푸터 영역으로 구성되어 있고, 인덱스 페이지를 본문의 콘텐츠 영역에 넣었습니다. 그렇기에 헤더와 사이드바, 푸터는 늘 사라지지 않고 노출되어 있으며 콘텐츠 영역만 인덱스 페이지로, 해당 글을 클릭하면 본문 내용으로 이렇게 2가지 페이지가 변하게 되는 샘 입니다. 본문의 영역을 잘 보시면 <div id="contents"> 로 묶여 있는것을 확인하실 수 있고, 그 안에는 여러가지의 티스토리 그룹치환자가 들어 있다는것을 알 수 있습니다. 만약 블로그 내 검색기능으로 결과를 얻고자 한다면 검색 결과를 담당하는 <s_list></s_list> 그룹치환자가 로드가 되는 것이고, 공지사항을 클릭하게 되면 <s_notice_rep></s_notice_rep> 그룹치환자가 로드가 되며, 방명록을 클릭하면 <s_guest></s_guest> 그룹치환자가 로드 되는 것 입니다. 이 부분이 처음에는 햇갈릴 수 있지만 간단히 생각하자면 그냥 자신이 만들어놓은 DIV 영역 안에서 티스토리의 어떤 기능을 로드하게 할 것인지만 분명히 정한다면 나머지 그룹치환자를 마크업 하는데에는 큰 어려움이 없을 것 입니다. 값치환자는 쉽습니다. 위의 경우라면 <title>반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기</title> 안에 있는 반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기 이것이 바로 값치환자라고 말씀을 드렸는데, 블로그 사용자가 직접 지정한 타이틀을 그대로 불러오는 역할을 하는 것 입니다. 기본 형태는 이며 이것은 그룹치환자 안에 다양한 형태의 값치환자가 존재합니다. 아래는 티스토리 스킨 가이드 페이지에서 제공하는 방명록에 대한 예시 코드 입니다. <s_guest_input_form> <div class="guestWrite"> <s_guest_member> <s_guest_form> <div> <input type="text" name="" value="" /> <label for="name"> : 이름 </label> </div> <div> <input type="password" maxlength="8" name="" value="" /> <label for="password"> : 패스워드 </label> </div> <div> <input type="text" name="" value="" /> <label for="homepage"> : 홈페이지 </label> </div> </s_guest_form> </s_guest_member> <div> <textarea name="" cols="50" rows="6"></textarea> </div> <div> <input type="submit" value="안부 남기기" onclick=""/> </div> </div> </s_guest_input_form> 보시면 빨간색 부분이 모두 값치환자에 해당 됩니다. 방명록을 남기는 사람의 닉네임, 그리고 패스워드가 사람마다 다르기 때문에 방명록 작성하는 기본 플랫폼에 들어가는 값은 저마다 다를 것 입니다. 그렇기 때문에 받아오는 데이터가 랜덤인 경우, 이런 값치환자를 사용하고 있습니다. 블로그 주인 혹은 방문자들이 직접 입력해서 설정하는 모든 부분들을 대부분 값치환자를 써서 관리하고 있다고 생각하시면 됩니다. 다시 처음의 예시로 돌아가겠습니다. 보시면 어두운 회색 태그들로 이루어진 부분들은 스킨 제작자가 직접 입력하는 부분입니다. 스킨의 구조를 1단 반응형으로 할지, 아예 스마트하게 만들어서 사이드바가 없는 형태로 할 것인지 이런 부분들을 정해서 직접 div 혹은 기타 태그들을 써서 영역을 구별 짓습니다. 때문에 스킨의 기본 구조를 어느정도 설계를 한 다음에 하나하나 코딩을 짜서 만들어 갑니다. 마치 커다란 건물 공간 안에 벽을 나눠서 방 구조를 어떻게 해야 할지를 정하는것과 같습니다. container 라고 하는 id 값을 가진 div 안쪽에는 사이드바 영역과 본문 영역 이렇게 두 곳으로 나누고 싶습니다. 그래서 또 한번 div를 사용해서 contents 라고 하는 id 값을 가진 영역을 만들었고, 다른 영역은 티스토리 그룹치환자를 써서 <s_sidebar> 를 사용한 것 입니다. 물론 <s_sidebar>를 div로 한번 더 감싸줄수도 있습니다. 이건 정답이 없기 때문에 여러분들이 편하신대로 작업하시면 됩니다. 그냥 구조만 파악할 수 있으면 됩니다. 반응형은 CSS에서 미디어쿼리를 사용해서 만듭니다. 이 부분은 CSS의 @media 부분을 이해하시면 금방 적용시킬 수 있습니다. 티스토리 반응형 스킨이라고해서 다른 반응형 홈페이지와 다를바가 없습니다. 똑같습니다. 원리는 같으니 크게 어려운 부분이 없습니다. 이부분은 스킨편집의 설명 부분에 대하여 표시합니다. 또한 스킨의 설정 기본값을 정의하며, 카테고리의 디테일한 부분을 설정할 수 있지만 카테고리는 어차피 CSS에서 스타일을 만들어주기 때문에 나머지를 이곳에서 설정하게끔 만들 수 있습니다. 가령 카테고리 글자수를 몇 개까지 노출되게 할 것인지, 해당 카테고리에 작성된 글 개수를 표시하게 해준다던지에 대한 설정입니다. 예를 들어서 친효스킨의 저 부분은 index.xml 에서 실제로 저렇게 설명을 써 놓았기 때문에 해당 메뉴의 텍스트가 작성한대로 그대로 이렇게 나타나는 것 입니다. 스킨을 아무거나 다운 받으시고 한번 index.xml 파일만 열어보시면 금새 파악이 가능합니다. 티스토리 스킨 구조는 제작자마다 조금씩 다릅니다. 때문에 스킨을 한번 직접 만들어 보시기전에 이미 완성된 티스토리 스킨들을 직접 뜯어서 분석해 보는것도 좋은 방법입니다. 저도 만들기전에 한 10개 정도 뜯어서 구조 파악부터 했었습니다. 구조를 이해하고 스킨 제작 작업을 시작하면 만드는데 훨씬 많은 도움이 됩니다. 그러면 멋진 티스토리 스킨을 만들어 보시기를 바랍니다. 끝.HTML 구조 이해하기
티스토리 치환자에 대하여
치환자를 제외한 나머지 구조는 직접 만들기
반응형 스킨
스킨 정보 파일 index.xml
마치며...
</div>
<!--본문내용 끝-->
<!--태그 시작-->
<s_tag_label></s_tag_label>
<!--태그 끝-->
<!--관련글 시작-->
<s_article_related></s_article_related>
<!--관련글 끝-->
<!--댓글 시작-->
<s_rp></s_rp>
<!--댓글 끝-->
</s_permalink_article_rep>
<!--퍼머링크 끝-->
</s_article_rep>
<!--본문 끝-->
<!--페이징 시작-->
<s_paging></s_paging>
<!--페이징 끝-->
</div>
<!--콘텐츠 영역 끝-->
<!--사이드바 시작-->
<s_sidebar>
<s_sidebar_element>
<!--공지사항-->
<s_rct_notice></s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!--블로그정보-->
</s_sidebar_element>
<s_sidebar_element>
<!--카테고리-->
</s_sidebar_element>
</s_sidebar>
<!--사이드바 끝-->
</div>
<!--콘테이너: 사이드바 + 본문 끝-->
<!--푸터 시작-->
<footer></footer>
<!--푸터 끝-->
</s_t3>
</body>
</html>
대략적으로 이런 구조를 가지고 있습니다. 스킨의 구조에 따라 입맛에 맞게 바꿀 수 있지만 앞서 설명드렸듯 친효스킨을 기준으로 설명드리면 이런 형태입니다.
우선 html 이라는 문서 내부의 기본 골격은 그대로 유지됩니다. 보시면 <body> 태그 바로 다음으로 자식요소가 <s_t3> 이라는 요소로 마크업 되어 있습니다. 이것은 무조건 본문인 body 안에 들어오는 티스토리 그룹 치환자 중 하나로 필수라고 할 수 있습니다. 역할은 티스토리 구조에서 사용자가 클릭하는 메뉴에 해당되는 값치환자를 로드하는 기능을 담고 있습니다. 티스토리에서 사용하는 치환자를 잠깐 알아볼까요?
티스토리 치환자에 대하여
치환자는 한마디로 CSS에서의 ID 혹은 CLASS 와 비슷한 역할을 수행합니다. 치환자는 두 종류가 있습니다. 그룹치환자와 값치환자 이렇게 두 가지 입니다. 위의 뼈대에서 설명을 드리자면 본문의 시작을 알리는 <s_article_rep></s_article_rep> 를 그룹치환자라고 하며, <title> 안에 들어 있는 반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기 를 값치환자 라고 합니다.
보통 일반적인 홈페이지에서 메뉴를 클릭하면 해당 페이지로 이동을 하게 됩니다. 티스토리에서는 이 페이지를 줄이고자 치환자라는 기능을 써서 가독성을 높인다고 보시면 됩니다. 하나의 화면안에 전체를 다 담아낼 수 없으니, 필요할때마다 꺼내 쓰는 것 입니다. 흔한 예로 친효스킨 처음 화면, 즉 메인 화면은 인덱스 페이지가 로드 됩니다. 만약 여러분들이 만들려고 하는 티스토리 스킨의 HTML에 인덱스 페이지의 그룹치환자가 적용되어 있다면 무조건 이것을 1순위로 해서 로드합니다.
친효스킨에서는 크게 헤더, 사이드바, 콘텐츠를 담는 본문, 그리고 맨 아래의 푸터 영역으로 구성되어 있고, 인덱스 페이지를 본문의 콘텐츠 영역에 넣었습니다. 그렇기에 헤더와 사이드바, 푸터는 늘 사라지지 않고 노출되어 있으며 콘텐츠 영역만 인덱스 페이지로, 해당 글을 클릭하면 본문 내용으로 이렇게 2가지 페이지가 변하게 되는 샘 입니다.
본문의 영역을 잘 보시면 <div id="contents"> 로 묶여 있는것을 확인하실 수 있고, 그 안에는 여러가지의 티스토리 그룹치환자가 들어 있다는것을 알 수 있습니다. 만약 블로그 내 검색기능으로 결과를 얻고자 한다면 검색 결과를 담당하는 <s_list></s_list> 그룹치환자가 로드가 되는 것이고, 공지사항을 클릭하게 되면 <s_notice_rep></s_notice_rep> 그룹치환자가 로드가 되며, 방명록을 클릭하면 <s_guest></s_guest> 그룹치환자가 로드 되는 것 입니다. 이 부분이 처음에는 햇갈릴 수 있지만 간단히 생각하자면 그냥 자신이 만들어놓은 DIV 영역 안에서 티스토리의 어떤 기능을 로드하게 할 것인지만 분명히 정한다면 나머지 그룹치환자를 마크업 하는데에는 큰 어려움이 없을 것 입니다.
값치환자는 쉽습니다. 위의 경우라면 <title>반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기</title> 안에 있는 반응형 스킨 제작을 위한 티스토리 HTML 구조 이해하기 이것이 바로 값치환자라고 말씀을 드렸는데, 블로그 사용자가 직접 지정한 타이틀을 그대로 불러오는 역할을 하는 것 입니다. 기본 형태는 이며 이것은 그룹치환자 안에 다양한 형태의 값치환자가 존재합니다. 아래는 티스토리 스킨 가이드 페이지에서 제공하는 방명록에 대한 예시 코드 입니다.
<s_guest_input_form>
<div class="guestWrite">
<s_guest_member>
<s_guest_form>
<div>
<input type="text" name="" value="" />
<label for="name"> : 이름 </label>
</div>
<div>
<input type="password" maxlength="8" name="" value="" />
<label for="password"> : 패스워드 </label>
</div>
<div>
<input type="text" name="" value="" />
<label for="homepage"> : 홈페이지 </label>
</div>
</s_guest_form>
</s_guest_member>
<div>
<textarea name="" cols="50" rows="6"></textarea>
</div>
<div>
<input type="submit" value="안부 남기기" onclick=""/>
</div>
</div>
</s_guest_input_form>
보시면 빨간색 부분이 모두 값치환자에 해당 됩니다. 방명록을 남기는 사람의 닉네임, 그리고 패스워드가 사람마다 다르기 때문에 방명록 작성하는 기본 플랫폼에 들어가는 값은 저마다 다를 것 입니다. 그렇기 때문에 받아오는 데이터가 랜덤인 경우, 이런 값치환자를 사용하고 있습니다. 블로그 주인 혹은 방문자들이 직접 입력해서 설정하는 모든 부분들을 대부분 값치환자를 써서 관리하고 있다고 생각하시면 됩니다.
치환자를 제외한 나머지 구조는 직접 만들기
다시 처음의 예시로 돌아가겠습니다. 보시면 어두운 회색 태그들로 이루어진 부분들은 스킨 제작자가 직접 입력하는 부분입니다. 스킨의 구조를 1단 반응형으로 할지, 아예 스마트하게 만들어서 사이드바가 없는 형태로 할 것인지 이런 부분들을 정해서 직접 div 혹은 기타 태그들을 써서 영역을 구별 짓습니다. 때문에 스킨의 기본 구조를 어느정도 설계를 한 다음에 하나하나 코딩을 짜서 만들어 갑니다. 마치 커다란 건물 공간 안에 벽을 나눠서 방 구조를 어떻게 해야 할지를 정하는것과 같습니다.
container 라고 하는 id 값을 가진 div 안쪽에는 사이드바 영역과 본문 영역 이렇게 두 곳으로 나누고 싶습니다. 그래서 또 한번 div를 사용해서 contents 라고 하는 id 값을 가진 영역을 만들었고, 다른 영역은 티스토리 그룹치환자를 써서 <s_sidebar> 를 사용한 것 입니다. 물론 <s_sidebar>를 div로 한번 더 감싸줄수도 있습니다. 이건 정답이 없기 때문에 여러분들이 편하신대로 작업하시면 됩니다. 그냥 구조만 파악할 수 있으면 됩니다.
반응형 스킨
반응형은 CSS에서 미디어쿼리를 사용해서 만듭니다. 이 부분은 CSS의 @media 부분을 이해하시면 금방 적용시킬 수 있습니다. 티스토리 반응형 스킨이라고해서 다른 반응형 홈페이지와 다를바가 없습니다. 똑같습니다. 원리는 같으니 크게 어려운 부분이 없습니다.
스킨 정보 파일 index.xml
이부분은 스킨편집의 설명 부분에 대하여 표시합니다. 또한 스킨의 설정 기본값을 정의하며, 카테고리의 디테일한 부분을 설정할 수 있지만 카테고리는 어차피 CSS에서 스타일을 만들어주기 때문에 나머지를 이곳에서 설정하게끔 만들 수 있습니다. 가령 카테고리 글자수를 몇 개까지 노출되게 할 것인지, 해당 카테고리에 작성된 글 개수를 표시하게 해준다던지에 대한 설정입니다.
예를 들어서 친효스킨의 저 부분은 index.xml 에서 실제로 저렇게 설명을 써 놓았기 때문에 해당 메뉴의 텍스트가 작성한대로 그대로 이렇게 나타나는 것 입니다. 스킨을 아무거나 다운 받으시고 한번 index.xml 파일만 열어보시면 금새 파악이 가능합니다.
마치며...
티스토리 스킨 구조는 제작자마다 조금씩 다릅니다. 때문에 스킨을 한번 직접 만들어 보시기전에 이미 완성된 티스토리 스킨들을 직접 뜯어서 분석해 보는것도 좋은 방법입니다. 저도 만들기전에 한 10개 정도 뜯어서 구조 파악부터 했었습니다. 구조를 이해하고 스킨 제작 작업을 시작하면 만드는데 훨씬 많은 도움이 됩니다. 그러면 멋진 티스토리 스킨을 만들어 보시기를 바랍니다. 끝.
