티스토리를 새로 시작하면서 스킨도 새로 만들어야 겠다고 생각이 들어서 티스토리 스킨 제작에 들어갔습니다. 예전에도 몇 번 만들려다가 그냥 만 적이 있었는데, 이번에는 쉽게 만들 수 있을꺼 같습니다. ^^
예전 티스토리 스킨 가이드에서는 티스토리 스킨의 구조(structure)가 너무 심할 정도로 자세하게 나와 있었는데요.... 중간에 추가된 기능의 설명도 없었고요... 스킨 만들려고 다시 찾아보니.. 찾을 수가 없네요 ㅠㅠ 새로운 티스토리 스킨 가이드는 너무 단순화 해 버렸네요 ㅠㅠ 정확히 언제 생긴건지는 모르겠지만 새로 생긴 cover 기능 설명도 있긴 한데.. 너무 어렵게 적어 놨어요... 그냥 Tistory에서 제공해 주는 스킨 받아서 뜯어 보는게 제일 편하더라구요...
Cover 적용된 스킨들 보니 Main Swiper, Masonry 등 기존 보다 메인 페이지를 괜찮게 꾸밀 수 있게 해놨더군요... 하지만 일단 기본부터 만들고 나중에 적용할려구요... 일단 티스토리 스킨 만드는데 기본이 되는 Basic Structure입니다.
구버전 티스토리 스킨 가이드 본 기억과 신버전 스킨 가이드랑.. 짬뽕해서... 대충 이정도면 되겠다 해서.. 기본 구조를 잡아 봤습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리(Tistory) 스킨 기본 구조(Basic Structure) - skin.html</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js"></script>
</head>
<body id="tt-body-page">
<s_t3>
<div id="wrap">
<header id="header">
<h1><a href="https://clein-repository.tistory.com/">이기적인 저장소</a></h1>
</header>
<hr>
<!-- Global Navigation Bar -->
<section id="gnb">
<s_sidebar>
<s_sidebar_element>
<div id="category">
</div>
</s_sidebar_element>
</s_sidebar>
</section>
<hr>
<section id="content">
<s_list>
</s_list>
<article id="article">
<s_article_rep> <!-- 글 -->
<s_index_article_rep> <!-- 글 목록 -->
<div class="list_content">
</div>
</s_index_article_rep> <!-- / 글 목록 -->
<s_permalink_article_rep> <!-- 본문 -->
<s_article_protected>
<div class="article_protected">
</div>
</s_article_protected>
<div class="article_title">
</div>
<div class="article_desc">
티스토리를 새로 시작하면서 스킨도 새로 만들어야 겠다고 생각이 들어서 티스토리 스킨 제작에 들어갔습니다. 예전에도 몇 번 만들려다가 그냥 만 적이 있었는데, 이번에는 쉽게 만들 수 있을꺼 같습니다. ^^
예전 티스토리 스킨 가이드에서는 티스토리 스킨의 구조(structure)가 너무 심할 정도로 자세하게 나와 있었는데요.... 중간에 추가된 기능의 설명도 없었고요... 스킨 만들려고 다시 찾아보니.. 찾을 수가 없네요 ㅠㅠ 새로운 티스토리 스킨 가이드는 너무 단순화 해 버렸네요 ㅠㅠ 정확히 언제 생긴건지는 모르겠지만 새로 생긴 cover 기능 설명도 있긴 한데.. 너무 어렵게 적어 놨어요... 그냥 Tistory에서 제공해 주는 스킨 받아서 뜯어 보는게 제일 편하더라구요...
Cover 적용된 스킨들 보니 Main Swiper, Masonry 등 기존 보다 메인 페이지를 괜찮게 꾸밀 수 있게 해놨더군요... 하지만 일단 기본부터 만들고 나중에 적용할려구요... 일단 티스토리 스킨 만드는데 기본이 되는 Basic Structure입니다.
구버전 티스토리 스킨 가이드 본 기억과 신버전 스킨 가이드랑.. 짬뽕해서... 대충 이정도면 되겠다 해서.. 기본 구조를 잡아 봤습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리(Tistory) 스킨 기본 구조(Basic Structure) - skin.html</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js"></script>
</head>
<body id="tt-body-page">
<s_t3>
<div id="wrap">
<header id="header">
<h1><a href="https://clein-repository.tistory.com/">이기적인 저장소</a></h1>
</header>
<hr>
<!-- Global Navigation Bar -->
<section id="gnb">
<s_sidebar>
<s_sidebar_element>
<div id="category">
</div>
</s_sidebar_element>
</s_sidebar>
</section>
<hr>
<section id="content">
<s_list>
</s_list>
<article id="article">
<s_article_rep> <!-- 글 -->
<s_index_article_rep> <!-- 글 목록 -->
<div class="list_content">
</div>
</s_index_article_rep> <!-- / 글 목록 -->
<s_permalink_article_rep> <!-- 본문 -->
<s_article_protected>
<div class="article_protected">
</div>
</s_article_protected>
<div class="article_title">
</div>
<div class="article_desc">
</div>
<s_tag_label>
<div class="atricle_tags">
</div>
</s_tag_label>
<s_article_related> <!-- 관련글 -->
<div class="related_content">
</div>
</s_article_related> <!-- / 관련글 -->
<s_rp> <!-- 댓글 -->
<div class="comment">
</div>
</s_rp> <!-- / 댓글 -->
</s_permalink_article_rep> <!-- / 본문 -->
</s_article_rep> <!-- / 글 -->
</article>
<s_page_rep> <!-- 페이지 -->
<article id="page">
</article>
</s_page_rep> <!-- / 페이지 -->
<s_tag> <!-- 태그 클라우드 -->
<article id="tagcloud">
<h3>태그</h3>
</article>
</s_tag> <!-- / 태그 클라우드 -->
<s_guest> <!-- 방명록 -->
<article id="guestbook">
<h3>방명록</h3>
</article>
</s_guest> <!-- / 방명록 -->
<s_paging>
</s_paging>
</section>
<hr>
<footer id="footer">
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
</div>
<s_tag_label>
<div class="atricle_tags">
</div>
</s_tag_label>
<s_article_related> <!-- 관련글 -->
<div class="related_content">
</div>
</s_article_related> <!-- / 관련글 -->
<s_rp> <!-- 댓글 -->
<div class="comment">
</div>
</s_rp> <!-- / 댓글 -->
</s_permalink_article_rep> <!-- / 본문 -->
</s_article_rep> <!-- / 글 -->
</article>
<s_page_rep> <!-- 페이지 -->
<article id="page">
</article>
</s_page_rep> <!-- / 페이지 -->
<s_tag> <!-- 태그 클라우드 -->
<article id="tagcloud">
<h3>태그</h3>
</article>
</s_tag> <!-- / 태그 클라우드 -->
<s_guest> <!-- 방명록 -->
<article id="guestbook">
<h3>방명록</h3>
</article>
</s_guest> <!-- / 방명록 -->
<s_paging>
</s_paging>
</section>
<hr>
<footer id="footer">
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>
