3. 공통 부분

우선 스킨의 모든 페이지가 공통적으로 갖는 부분을 작성한다.

이 글은 HTML과 CSS에 대한 기본적인 이해가 있다고 가정하고 치환자의 사용에 초점을 맞춰서 작성했기 때문에

해당 내용을 처음 접하는 경우 생활코딩의 WEBn 강의나
다음의 글: 입문자에게 추천하는 HTML, CSS 첫걸음을 먼저 보는 것을 추천한다.

시작부분

<html> 태그로 HTML 문서 전체 영역을 잡는다.

<!DOCTYPE HTML>
<html lang="ko">
  ...
</html>

<!DOCTYPE HTML>: 웹 브라우저에게 이 페이지가 HTML5 표준을 사용한다는 것을 알리는 역할이다.
lang="ko": 웹 브라우저에게 이 페이지가 한국어로 되어있다는 것을 알리는 역할이다.

둘 다 웹 페이지를 만드는데 필수적이지는 않지만 적는 것을 권장한다.

head 부분

head 영역에 필요한 정보들을 적어준다.

<head>
  <title>야채크래커의 부스러기</title>
  <meta charset="utf8">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<title>: 페이지의 제목을 표시한다.
- 주로 블로그 제목을 띄우기 때문에 이에 해당하는 야채크래커의 부스러기 치환자를 적어줬다.
<meta charset="utf8">: 이 페이지의 문자가 utf-8 방식으로 쓰였다고 알려주는 역할이다.
<link>: style sheet (CSS) 파일을 현재 html 문서에 적용시켜주는 역할이다.
- 티스토리에 업로드하는 CSS파일은 HTML 파일과 같은 폴더에 위치하고 파일명은 항상 style.css이므로 주소는 ./style.css로 적어주면 된다.
- 그 외의 CSS파일을 적용하고 싶으면 css 파일을 업로드 한 뒤 동일한 방식으로 연결시켜주면 된다.
- 기본 파일 외에는 모두 images 폴더에 업로드 되므로 주소는 ./images/[css 파일이름]와 같이 적어주면 된다.

body 부분

body 영역에 '티스토리가 작동'할 수 있도록 하는 JavaScript 치환자를 적어준다.

<s_t3>: 티스토리 공통 javascript (필수)
이 치환자 영역 안에서 다른 치환자들이 정해준 element로 변환되고 티스토리의 여러 기능들이 활성화된다.

<!-- 치환 전 -->
<body>
  <s_t3>
    ...
  </s_t3>
</body>

<!-- 치환 후 -->
<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>

공통 치환자

블로그의 정보나 전체적인 사항을 나타내는 공통치환자들이 존재하며, 주로 메뉴, 사이드바, 블로그 정보 등을 구성하는데 쓰인다.

블로그 정보

치환자	콘텐츠
`야채크래커의 부스러기`	블로그 제목
`https://tistory1.daumcdn.net/tistory/3729141/attach/8223d82ebf8646ccb65d7032d33cb640`	블로그 대표 이미지 url
	블로그 대표 이미지를 포함한 IMG 태그
`사람 구실 하기 위해 배워가는 야채크래커의 부스러기 과연 저는 제구실을 할 수 있을까요? 제 부스러기는 무엇인가가 될 수 있을까요?`	블로그 설명
`야채크래커`	블로그 소유자의 필명

블로그 URL

치환자	콘텐츠
`https://crackyachae.tistory.com/`	블로그 url
`https://crackyachae.tistory.com/rss`	rss feed 주소
`https://crackyachae.tistory.com/tag`	태그로그 url
`https://crackyachae.tistory.com/guestbook`	방명록 url

기타

치환자	콘텐츠
`첫번째_3 공통 부분`	페이지 제목
`홈 태그 방명록`	블로그 메뉴 리스트
`tt-body-page`	페이지 타입에 따른 id

tt-body-page는 페이지의 종류에 따라 값이 다르게 표시되기 때문에 <body>태그의 id 값으로 주로 사용되며 페이지 종류에 따라 표시되는 body_id는 다음과 같다.

페이지 타입	body_id
홈화면	tt-body-index
글화면	tt-body-page
카테고리 글 리스트	tt-body-category
보관함 글 리스트	tt-body-archive
태그 리스트	tt-body-tag
검색결과 리스트	tt-body-search
방명록	tt-body-guestbook
지역로그	tt-body-location

사용 예시

티스토리가 제공하는 사용 예시는 다음과 같다.

<html>

<!-- head 영역 -->
<head>
  <!-- document title로 각 페이지의 제목 사용 -->
  <title>첫번째_3 공통 부분</title>
</head>

<!-- body 영역 -->
<!-- 각 종류의 페이지를 구분하기 위해 id로 body_id 치환자를 사용 -->
<body id='tt-body-page'>
<s_t3>
  <!-- Header 영역: 블로그 제목, 메뉴로 구성 -->
  <header>
    <h1><a href="https://crackyachae.tistory.com/">야채크래커의 부스러기</a></h1>

    <!-- 1. blog_menu를 사용하는 경우 -->
    
  홈
  태그
  방명록


    <!-- 2. 메뉴를 직접 구성하는 경우 -->
    <ul class="blogMenu">
      <li><a href="https://crackyachae.tistory.com/rss">RSS구독</a></li>
      <li><a href="https://crackyachae.tistory.com/tag">태그</a></li>
      <li><a href="https://crackyachae.tistory.com/guestbook">방명록</a></li>
    </ul>    
  </header>

  <!-- Sidebar 영역: 블로그 이미지, 블로그 설명, 필명 순으로 구성-->
  <section class="sidebar"> 
    <!-- 1. blog_image를 사용하는 경우 -->
    <div class="blogInfo">
      <div class="blogImage"> </div>
      <div class="blogDesc">사람 구실 하기 위해 배워가는 야채크래커의 부스러기

과연 저는 제구실을 할 수 있을까요?
제 부스러기는 무엇인가가 될 수 있을까요? <span class="userID">야채크래커</span></div>
    </div>

    <!-- 2. 일반 image 사용하는 경우 -->
    <div class="blogInfo">
      <div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/3729141/attach/8223d82ebf8646ccb65d7032d33cb640"></div>
      <div class="blogDesc">사람 구실 하기 위해 배워가는 야채크래커의 부스러기

과연 저는 제구실을 할 수 있을까요?
제 부스러기는 무엇인가가 될 수 있을까요? <span class="userID">야채크래커</span></div>
    </div>
  </section>
</s_t3>
</body>
</html>

2020.07.28 17:46 작성.

'프로젝트를 합니다 > 티스토리 스킨 제작' 카테고리의 다른 글

첫번째_7 헤더 (0)	2020.10.11
첫번째_4 스킨 정보 파일 (0)	2020.10.10
첫번째_2 티스토리 파일 구조 (0)	2020.06.01
첫번째_1 디자인 구상 (0)	2020.05.06
첫 티스토리 스킨 만들기 (1)	2020.03.14

첫번째_3 공통 부분