티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바
티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다.
홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다.
여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다.
테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다.
기본 구조
BODY 태그 안의 내용을 변경합니다.
<body>
<s_t3>
<article>
<!-- 컨텐츠 시작 -->
<s_article_rep>
<s_index_article_rep>글 목록</s_index_article_rep>
<s_permalink_article_rep>개별 포스트</s_permalink_article_rep>
</s_article_rep>
<!-- 컨텐츠 끝 -->
</article>
<aside>
<!-- 사이드바 시작 -->
카테코리 리스트(사이드바)
<!-- 사이드바 끝 -->
</aside>
</s_t3>
</body>s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다.
만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다.
글 목록
글 목록은 홈 커버를 지정하지 않은 첫 화면과 카테고리, 태그 등에 맞춰서 보여주는 글 목록의 구조를 정하는 부분입니다.
위의 글 목록 부분에 값 치환자를 활용하여 아래처럼 표현 할 수 있습니다.
<s_index_article_rep>
<h2><a href="/50"> <!-- 글 제목은 글 본문 하이퍼링크 -->
티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바</a></h2> <!-- 글 제목 치환자 -->
<p>티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다. 홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다. 여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다. 테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다. 기본 구조 BODY 태그 안의 내용을 변경합니다. 글 목록 개별 포스트 카테코리 리스트(사이드바) s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다. 만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다..</p> <!-- 글의 일부만 가져오는 치환자 -->
</s_index_article_rep>스킨 설정에서 정한 첫 화면의 최신글 수, 혹은 선택한 카테고리로 작성한 글, 혹은 선택한 태그를 사용한 글에 따라 s_index_article_rep 태그 안의 내용이 글의 갯수만큼 반복됩니다.
위의 기본형을 참고해서 아래 치환자를 추가해 정보를 더 추가할 수 있습니다.
| 치환자 | 기능 |
|---|---|
| /50 | 해당 글의 고유 URL |
| 티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바 | 해당 글의 제목 |
| /category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D | 해당글의 카테고리 URL (카테고리 글목록) |
| 프로그래밍/웹 프로그래밍 | 카테고리 이름. 하위 카테고리 구분자는 / 문자 |
| 2018. 11. 28. 18:41 | 글 작성 날짜 YYYY.MM.DD hh:mm 형식 |
| soma0sd | 글 작성자의 이름(닉네임) |
| 티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다. 홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다. 여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다. 테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다. 기본 구조 BODY 태그 안의 내용을 변경합니다. 글 목록 개별 포스트 카테코리 리스트(사이드바) s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다. 만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다.. | 글 내용 일부 |
s_article_rep_thumbnail태그 안에서,
| 치환자 | 기능 |
|---|---|
| 대표 이미지 주소(썸네일) | |
| 대표 이미지 주소(원본) |
주의: 이 치환자들은 s_index_article_rep 태그 안에서만 정상적으로 작동합니다.
개별 포스트
<s_permalink_article_rep> <!-- 단일 글 시작 -->
<h1> 티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바 </h1> <!-- 글 제목 -->
<div class="post article content">
반응형
티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다.
홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다.
여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다.
테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다.
기본 구조
BODY 태그 안의 내용을 변경합니다.
<body>
<s_t3>
<article>
<!-- 컨텐츠 시작 -->
<s_article_rep>
<s_index_article_rep>글 목록</s_index_article_rep>
<s_permalink_article_rep>개별 포스트</s_permalink_article_rep>
</s_article_rep>
<!-- 컨텐츠 끝 -->
</article>
<aside>
<!-- 사이드바 시작 -->
카테코리 리스트(사이드바)
<!-- 사이드바 끝 -->
</aside>
</s_t3>
</body>
s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다.
만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다.
글 목록
글 목록은 홈 커버를 지정하지 않은 첫 화면과 카테고리, 태그 등에 맞춰서 보여주는 글 목록의 구조를 정하는 부분입니다.
위의 글 목록 부분에 값 치환자를 활용하여 아래처럼 표현 할 수 있습니다.
<s_index_article_rep>
<h2><a href=""> <!-- 글 제목은 글 본문 하이퍼링크 -->
</a></h2> <!-- 글 제목 치환자 -->
<p></p> <!-- 글의 일부만 가져오는 치환자 -->
</s_index_article_rep>
스킨 설정에서 정한 첫 화면의 최신글 수, 혹은 선택한 카테고리로 작성한 글, 혹은 선택한 태그를 사용한 글에 따라 s_index_article_rep 태그 안의 내용이 글의 갯수만큼 반복됩니다.
위의 기본형을 참고해서 아래 치환자를 추가해 정보를 더 추가할 수 있습니다.
치환자
기능
해당 글의 고유 URL
해당 글의 제목
해당글의 카테고리 URL (카테고리 글목록)
카테고리 이름. 하위 카테고리 구분자는 / 문자
글 작성 날짜 YYYY.MM.DD hh:mm 형식
글 작성자의 이름(닉네임)
글 내용 일부
s_article_rep_thumbnail태그 안에서,
치환자
기능
대표 이미지 주소(썸네일)
대표 이미지 주소(원본)
주의: 이 치환자들은 s_index_article_rep 태그 안에서만 정상적으로 작동합니다.
개별 포스트
<s_permalink_article_rep> <!-- 단일 글 시작 -->
<h1> </h1> <!-- 글 제목 -->
<div class="post article content"> </div> <!-- 글 본문 -->
</s_permalink_article_rep> <!-- 단일 글 끝 -->
글 제목과 글 본문만을 보여주는 가장 간단한 형태의 구조입니다.
아래의 값치환자를 참고하여 더 많은 정보를 표시할 수 있습니다.
치환자
기능
현재 글의 URl
현재 글의 제목
현재 글 카테고리의 URL
현재 글의 카테고리명. 하위 카테고리는 / 문자로 구분
현재 글의 작성일. YYYY.MM.DD hh:mm 형식
현재 글의 작성자 (팀블로그)
현재 글의 본문
주의: 이 치환자들은 s_permalink_article_rep 태그 안에서만 정상적으로 작동합니다.
사이드바
여기서는 사이드바의 네비게이션 구조만 다룹니다.
작성한 글의 카테고리를 리스트로 나열합니다.
<aside> <!-- 사이드바 시작 -->
<nav>
</nav> <!-- 카테고리 리스트 -->
</aside> <!-- 사이드바 끝 -->
반응형
</div> <!-- 글 본문 -->
</s_permalink_article_rep> <!-- 단일 글 끝 -->글 제목과 글 본문만을 보여주는 가장 간단한 형태의 구조입니다.
아래의 값치환자를 참고하여 더 많은 정보를 표시할 수 있습니다.
| 치환자 | 기능 | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| /50 | 현재 글의 URl | ||||||||||||||||||||||||||||||||||||||
| 티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바 | 현재 글의 제목 | ||||||||||||||||||||||||||||||||||||||
| /category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%20%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D | 현재 글 카테고리의 URL | ||||||||||||||||||||||||||||||||||||||
| 프로그래밍/웹 프로그래밍 | 현재 글의 카테고리명. 하위 카테고리는 / 문자로 구분 |
||||||||||||||||||||||||||||||||||||||
| 2018. 11. 28. 18:41 | 현재 글의 작성일. YYYY.MM.DD hh:mm 형식 | ||||||||||||||||||||||||||||||||||||||
| soma0sd | 현재 글의 작성자 (팀블로그) | ||||||||||||||||||||||||||||||||||||||
|
반응형
티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다. 기본 구조BODY 태그 안의 내용을 변경합니다.
글 목록글 목록은 홈 커버를 지정하지 않은 첫 화면과 카테고리, 태그 등에 맞춰서 보여주는 글 목록의 구조를 정하는 부분입니다. 스킨 설정에서 정한 첫 화면의 최신글 수, 혹은 선택한 카테고리로 작성한 글, 혹은 선택한 태그를 사용한 글에 따라
주의: 이 치환자들은 개별 포스트글 제목과 글 본문만을 보여주는 가장 간단한 형태의 구조입니다.
주의: 이 치환자들은 사이드바여기서는 사이드바의 네비게이션 구조만 다룹니다. 반응형
|
현재 글의 본문 |
주의: 이 치환자들은 s_permalink_article_rep 태그 안에서만 정상적으로 작동합니다.
사이드바
여기서는 사이드바의 네비게이션 구조만 다룹니다.
작성한 글의 카테고리를 리스트로 나열합니다.
<aside> <!-- 사이드바 시작 -->
<nav>
</nav> <!-- 카테고리 리스트 -->
</aside> <!-- 사이드바 끝 -->'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트 (0) | 2019.04.08 |
|---|---|
| 티스토리 스킨 만들기 (4) - CSS 개요 (0) | 2018.11.29 |
| 티스토리 스킨 만들기 (2) - HTML 개요 (0) | 2018.11.28 |
| 티스토리 스킨 만들기 (1) - 티스토리 스킨의 특징 (0) | 2018.11.27 |
| showdown.js를 사용하여 티스토리에 마크다운 적용하기 (0) | 2018.11.15 |
댓글