Section 10 - 티스토리 반응형 스킨 만들기 - 글 목록(index)

이번 섹션부터는 블로그의 핵심인 포스트 관련 스킨을 만듭니다.
이부분만이라도 제대로 만들면 블로그의 기본 기능은 사용하실 수 있습니다.

 

Description. 글 목록이란?

글 목록은 우리가 티스토리 블로그에 글을 남기면 블로그 메인이나 카테고리 선택, 또는 검색 후 나오는 글들의 목록입니다.
매일매일 글을 많이쓰면 수십, 수백개의 글들이 쌓이게 되는데 이 글들의 목록을 글 목록이라고 합니다.

디자인 구성이 귀찮기도 하고...티스토리 스킨 가이드가 허접해서
글 관련 디자인이나 코드는 티스토리 스킨인 #2를 참고하였습니다.

본격적으로 작업합니다.

 

STEP 1. 글 관련 영역 <s_article_rep>

 

 

티스토리 스킨은 기본적으로 전체 치환자가 동작하는 영역과 사이드바 영역, 글 검색 목록 등등 영역을 지정하고 그 안에서 해당하는 치환자를 넣어야 소스가 치환되면서 티스토리 블로그 소스가 동작하게 됩니다.
마찬가지로 글 관련(글 목록, 글 상세정보, 코멘트 목록 등등) 치환자를 쓰려면 글 관련 영역을 먼저 선언해줘야 합니다.

글 관련 영역을 지정해주는 태그는 <s_article_rep></a_article_rep> 입니다.

이 영역을 먼저 선언해주고 "글 목록(인덱스)" 영역을 지정해주는 태그는 <s_index_article_rep></s_index_article_rep> 입니다.

구조는 <s_article_rep> 태그안에 <s_index_article_rep>을 써주면 영역 지정은 끝입니다.

 

 

STEP 2. skin.html 글 목록 추가

 

 

STEP 3. style.css 글 목록 디자인

 

/* *********************************************************************
   Blog Post
   ****************************************************************** */
/* Blog list */
.article-list {margin-bottom:-1px; padding:24px 20px 26px; background:#fff; border:1px solid #ddd}
.article-list::after { content:''; clear:both; display:block }
.article-list .article-item {text-decoration:none}
.article-list .article-item:hover .title {color:#ff8149}
.article-list .article-item .thumb {float:left; width:150px; height:150px; margin:6px 30px 5px 0}
.article-list .article-item .title {font-weight:normal;font-size:1.375em}
.article-list .article-item .summary {margin-top:4px; color:#7e7e7e; vertical-align:top; font:normal 0.875em 'NanumBarunGothic','Noto Sans', sans-serif; line-height:1.5em;}
.article-list .info {margin-top:6px; font-size:0.875em}
.article-list .info a {color:#ff8149}
.article-list .info .pipe {display:inline-block; margin:0 10px; color:#dfdfdf}
.article-list .info .date {color:#999}

 

위와 같은 이미지를 참고하여 글 목록 구조를 파악하세요.

 

위의 STEP을 모두다 진행하였다면 아래와 같은 결과물을 얻을 수 있습니다.

 

※ 글 목록을 다 만들었다면 이전 섹션인 Section 9 - 검색결과 목록에서 만든 소스를 삭제하셔야합니다.
삭제를 안하면 검색결과 목록에서 만든 "목록"과 "글 목록" 소스 모두가 출력됩니다.(예전에는 안그랬던거 같은데 이젠 "글 목록"으로 모든 목록을 대체하는거 같습니다.)
삭제는 아래와 같이 skin.html과 style.css를 삭제하시면 됩니다.

 

 

.search-item {margin:10px 0 10px 6px; border-top:1px solid #ddd}
.search-item li {padding:20px 0; border-bottom:1px solid #e9e9e9}
.search-item li .date {color:#999; font-size:0.825em}
.search-item li a {color:#555; font-size:1.25em}
.search-item li a:hover, .search-item li a:active, .search-item li a:focus {color:#ff8149; text-decoration:none}
.search-item li a .cnt {color:#ff8149}

 

 

지금까진 조금 여유로웠네요~
다음 섹션은 글 상세보기(본문) 스킨 만들기입니다.
글 본문은 진짜 정신 바짝 차려야합니다 ㅡ/.,ㅡ;;

고생하셨습니다~