티스토리 관리/티스토리 스킨 만들기

티스토리 스킨 만들기 #5 기본 파일 작성 (2)

여긔 2020. 2. 20. 12:00

 지난 시간에는 필수 파일중 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/m/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/m/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/m/: 블로그 url

https://shalchoong.tistory.com/m/rss: rss feed 주소

https://shalchoong.tistory.com/m/tag: 태그로그 url

https://shalchoong.tistory.com/m/guestbook: 방명록 url

 

기타

티스토리 스킨 만들기 #5 기본 파일 작성 (2): 페이지 제목

: 블로그 메뉴 리스트

tt-body-page: 페이지 타입에 따른 id

 

그리고 tt-body-page 같은 경우는 현재 표시되고있는 페이지에 따라 다른 값을 가지며 이를 이용하여 페이지별로 다른 css를 입히는 것도 가능하다.

저작자표시