티스토리 관리/티스토리 스킨 만들기/
티스토리 스킨 만들기 #5 기본 파일 작성 (2)
2020. 2. 20.
지난 시간에는 필수 파일중 index.xml 파일을 만들어보았다. 이번 시간에는 기본적인 skin.html 파일을 만들어 볼까 한다. 기본작성을 끝내고 마지막에 사용된 치환자에 대해 설명하도록하겠다.
skin.html
<!DOCTYPE html>
<html lang='ko' class=''>
<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" />
<link rel="alternate" type="application/rss+xml" title="여긔의 IT Story" href="https://shalchoong.tistory.com/rss" />
<link rel="stylesheet" href="./style.css" />
<!-- 아이콘 모음 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />
<!-- 제이쿼리 -->
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<title>티스토리 스킨 만들기 #5 기본 파일 작성 (2)</title>
</head>
<body id='tt-body-page'>
<s_t3>
<div id='container'>
<!-- 헤더 시작-->
<header>
<h1>블로그제목</h1>
<div class="menu">블로그메뉴</div>
</header>
<!-- 헤더 끝 -->
<!-- 섹션 시작 -->
<section>
<!-- 사이드바 시작 -->
<aside>사이드바</aside>
<!-- 사이드바 끝-->
<!-- 태그 시작 -->
<div class="taglog">태그 클라우드</div>
<!-- 태그 끝-->
<!-- 방명록 시작 -->
<div class="guestbook">방명록
<div class="guestWrite">방명록 글쓰기</div>
<div class="guestList">방명록 리스트</div>
</div>
<!-- 방명록 끝 -->
<!-- 본문 영역 시작 -->
<article>글
<div class="titleWrap">글 제목 | 카테고리 | 작성일 | 글 관리</div>
<div class="article">글</div>
<div class="tagTrail">태그&소셜</div>
<div>관련글</div>
<div class="commentCnt">댓글수</div>
<div class="comment">댓글
<div class="commentList">댓글 리스트</div>
<div class="commentWrite">댓글 쓰기</div>
</div>
</article>
<!-- 본문 영역 끝 -->
<!-- 페이지 시작 -->
<div class="entry">페이지</div>
<!-- 페이지 끝 -->
<!-- 공지 & 보호글 시작 -->
<div class="entryNotice">공지사항 글</div>
<div class="entryProtected">보호 글</div>
<!-- 공지 & 보호글 끝 -->
</section>
<!-- 섹션 끝 -->
<!-- 커버 시작-->
<div id='cover'>커버</div>
<!-- 커버 끝-->
<!-- 푸터 시작-->
<footer>
</footer>
<!-- 푸터 끝-->
</div>
</s_t3>
</body>
</html>간단히 설명하자면
<!DOCTYPE html>
<html lang='ko' class=''>이문서는 html 파일이고, <html> 영역을 선언해주고 사용할 언어는 ko(korean), class는 null 값임을 나타낸다.
<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" />
<link rel="alternate" type="application/rss+xml" title="여긔의 IT Story" href="https://shalchoong.tistory.com/rss" />
<link rel="stylesheet" href="./style.css" />
<!-- 아이콘 모음 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />
<!-- 제이쿼리 -->
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<title>티스토리 스킨 만들기 #5 기본 파일 작성 (2)</title>
</head>html의 head 영역이다. 화면에 직접적으로 표시되는건 아니지만 각종 정보, 파일연결등을 담고있다. meta 태그는 이문서의 기본 정보들을 만들어주는 태그이고, link 태그는 외부파일 연결 ex) css파일, script 태그는 js파일 연결할 때 쓴다.
<body id='tt-body-page'>
<s_t3>
<div id='container'>
<!-- 헤더 시작-->
<header>
<h1>블로그제목</h1>
<div class="menu">블로그메뉴</div>
</header>
<!-- 헤더 끝 -->
<!-- 섹션 시작 -->
<section>
<!-- 사이드바 시작 -->
<aside>사이드바</aside>
<!-- 사이드바 끝-->
<!-- 태그 시작 -->
<div class="taglog">태그 클라우드</div>
<!-- 태그 끝-->
<!-- 방명록 시작 -->
<div class="guestbook">방명록
<div class="guestWrite">방명록 글쓰기</div>
<div class="guestList">방명록 리스트</div>
</div>
<!-- 방명록 끝 -->
<!-- 본문 영역 시작 -->
<article>글
<div class="titleWrap">글 제목 | 카테고리 | 작성일 | 글 관리</div>
<div class="article">글</div>
<div class="tagTrail">태그&소셜</div>
<div>관련글</div>
<div class="commentCnt">댓글수</div>
<div class="comment">댓글
<div class="commentList">댓글 리스트</div>
<div class="commentWrite">댓글 쓰기</div>
</div>
</article>
<!-- 본문 영역 끝 -->
<!-- 페이지 시작 -->
<div class="entry">페이지</div>
<!-- 페이지 끝 -->
<!-- 공지 & 보호글 시작 -->
<div class="entryNotice">공지사항 글</div>
<div class="entryProtected">보호 글</div>
<!-- 공지 & 보호글 끝 -->
</section>
<!-- 섹션 끝 -->
<!-- 커버 시작-->
<div id='cover'>커버</div>
<!-- 커버 끝-->
<!-- 푸터 시작-->
<footer>
</footer>
<!-- 푸터 끝-->
</div>
</s_t3>
</body>html의 body 영역이다. 화면에 표시되는 부분으로 이곳을 수정 or 추가 하면서 웹사이트를 만든다고 보면된다.
치환자
티스토리 치환자에는 그룹치환자와 값치환자 두가지가 존재한다.
우선 그룹치환자를 보자면 body 영역에 <s_t3> 태그가 보일것이다. 이 태그는 티스토리 공통으로 사용되는 javascript 삽입태그이며 우리눈에는 <s_t3> 로 보이지만 치환되어
<body>
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/blogs/script/blog/common.js"></script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
...
</body>위와같이 변환되어진다.
값치환자는 말 그대로 어떤값을 치환해주는 역할을하는데 head영역 <title> 태그안에 티스토리 스킨 만들기 #5 기본 파일 작성 (2), body 영역 의 id tt-body-page 같은 것들이 값치환자이다.
어느 페이지나 같은 값을 or 같은 형태를 가지는 치환자를 공통치환자라 부르고 있는데 공통치환자의 종류는 다음과 같다.
블로그 정보
여긔의 IT Story: 블로그 제목
https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png: 블로그 대표 이미지 url
: 블로그 대표 이미지를 포함한 IMG 태그
: 블로그 설명
여긔: 블로그 소유자의 필명
블로그 URL
https://shalchoong.tistory.com/: 블로그 url
https://shalchoong.tistory.com/rss: rss feed 주소
https://shalchoong.tistory.com/tag: 태그로그 url
https://shalchoong.tistory.com/guestbook: 방명록 url
기타
티스토리 스킨 만들기 #5 기본 파일 작성 (2): 페이지 제목
: 블로그 메뉴 리스트
tt-body-page: 페이지 타입에 따른 id
그리고 tt-body-page 같은 경우는 현재 표시되고있는 페이지에 따라 다른 값을 가지며 이를 이용하여 페이지별로 다른 css를 입히는 것도 가능하다.