반응형
티스토리 스킨 HTML은 너무 길고 복잡하며 들여쓰기도 파악하기 힘듭니다. 이에 중요 태그들의 레이아웃을 살펴보며 대략적인 구조파악에 도움이 되시길 바랍니다.
티스토리 HTML 구조
<!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_pretected> </s_article_pretected>
<s_article_rep>
<s_index_article_rep> </s_index_article_rep>
<s_permalink_article>
<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>
<s_t3> : 티스토리 스킨가이드에 따른 자바스크립트를 지정해줄 영역, 그룹치환자
<header> : 상단 영역 해당하는 컨텐츠, 네비게이션링크
<s_search> : 검색
<div id="container"> : 컨테이너 (본문+사이드바)
<div id="contents"> : 컨텐츠 영역
<s_list> : 검색결과
<s_notice_rep> : 공지사항
<s_guest> : 방명록
<s_article_protected> : 보호글
<s_article_rep> : 본문
<s_index_article_rep> : 색인. 인덱스 페이지
<s_permalink_article_rep> : 영구적인 링크. 포스팅에 부여된 URL를 의미
퍼머링크
게시물이 어느 경우에나 연결되는 절대적인 불변 주소로 블로그 주소를 옮기거나 할 때에도 접속 가능하게 해주는 주소
<s_ad_div> : 글 관리 기능
<div class="article"> : 본문내용
<s_tag_label> : 태그
<s_article_related> : 관련글
<s_rp> : 댓글
<s_paging> : 페이징
<s_sidebar> : 사이드바
<s_sidebar_element>
<s_rct_notice>
<footer> : 푸터, 하단영역
관련 포스트
반응형
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| HTML | 1. 기초 (0) | 2020.11.20 |
|---|---|
| 코드이그나이터 | 모델-뷰-컨트롤러 (MVC) (0) | 2020.11.05 |
| 코드이그나이터 | 개념 (2) | 2020.11.03 |
| PHP | 기초문법 (0) | 2020.10.20 |
| XML 기초 특징 구조 (0) | 2020.09.29 |
| CSS | 5. 박스모델 (0) | 2020.04.03 |
| HTML | 3. 태그와 속성 (0) | 2020.03.27 |
| 코드이그나이터 | 폴더와 파일 (0) | 2020.02.08 |
댓글