ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
티스토리 - html 구조
티스토리 스킨을 직접 제작하려고 결심하신 분들 계실 것 입니다. 그분들에게 조금이나마 도움이 되었으면 하는 바램에 또한 티스토리 스킨을 처음 만들려고 도전했을 때, HTML 스킨 구조가 어떤건지 쉽사리 파악이 되지 않아서 다소 고생한 경험이 있습니다. (저 또한) 경험이 있어 저의 생각을 바탕으로 최대한 자세하면서 단순하게 설명해 보겠습니다. 또한 티스토리에서 제공하는 스킨 가이드 페이지 도 같이 참고하시면 이해하는데 도움이 될 것입니다.
일단 까먹기 전에 적을려고 합니다.
기본
티스토리 구조도 다른 웹사이트와 뼈대는 같습니다. <html>에 <head>,<body>로 구성되며 <head>안에 <script><meta><title><style><link>등 타 사이트랑 같습니다. 내부 <style>를 사용해도 되지만 외부 CSS를 사용하는 것이 좋을 것 같습니다.
밑에는 제가 생각하는 기본 뼈대입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>[샾샾_page_title_샾샾]</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">[샾샾_article_rep_desc_샾샾]</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>
대략적인 부분은 위의 소스를 보시면 되고요. 전 커버는 사용하지 않습니다. 물론 요즘 커버가 대세이지만 아직 전 커버는 사용하지 않고 만들고 있습니다.
일단 커버는 넘어가고요. <head>는 위에서 말한것처럼 그냥 일반적이지만 <body>안에 <s_t3>요소가 있습니다. 이것은 무조건 본문인 <body> 안에 들어오는 티스토리 그룹 치환자 중 하나로 필수라고 할 수 있습니다. 역할은 티스토리 구조에서 사용자가 클릭하는 메뉴에 해당되는 값치환자를 로드하는 기능을 담고 있습니다. 티스토리에서 사용하는 치환자를 잠깐 알아볼까요?
티스토리에 치환자는 그룹치환자와 값치환자로 구분됩니다.
치환자
그룹치환자
<s_NAME>VALUE</s_NAME>값치환자
사용 예로
그룹치환자: <s_tag>, <s_tag_rep> 값치환자: , ,
