Section 11-1 - 티스토리 반응형 스킨 만들기 - 글 영역 지정

이번 섹션부터는 글 상세보기 화면을 만듭니다.

블로그에 글을 쓰고 블로그 방문자나 본인이 직접 확인하기 위해선 글 상세보기 화면이 필요합니다.
글 보기 화면이 없다면 블로그는 앙꼬없는 붕어빵이 되는 것이죠 ㅡ/.,ㅡ;;
그만큼 중요한 화면이기 때문에 차근차근 잘 따라해야 합니다.
그래서 시작하기 전에 글 상세보기 화면은 어떤 구조로 되어 있는지 확인 후에 작업을 시작하겠습니다.

글은 티스토리 스킨 가이드에 보면 아래와 같이 구성하라고 알려주고 있습니다.

<div class="entry">18. 글

<div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div>
<div class="article">18-2. 글</div>
<div class="tagTrail">18-3. 글 관련 태그</div>
<div class="actionTrail">18-4. 트랙백 | 댓글</div>
<div class="trackback">18-5. 트랙백</div>
<div class="code_comment">18-6. 댓글

<div class="code_commentList">18-6-1. 댓글 리스트</div>
<div class="code_commentWrite">18-6-2. 댓글 쓰기</div>

</div>

</div><!-- entry close -->

 

상세히 알아보면

18-1 : 글에 대한 상세 정보

18-2 : 글 내용

18-3 : 글에 해당하는 태그

18-4 : 댓글 갯수, 트랙백 갯수

18-5 : 트랙백 주소, 트랙백 목록

18-6 : 댓글 영역

18-6-1 : 댓글 목록

18-6-2 : 댓글 쓰기(회원 / 비회원 / 댓글 허용 안하면 비노출)

글 관련 작업 내용은 크게 8가지로 알려주지만 현재 트랙백을 사용하는 곳이 별로 없는지 티스토리 치환자에서 트랙백 주소나 목록 치환자는 지원을 안하는거 같아서 18-5는 작업을 안합니다.

그리고 스킨 가이드 문서에는 없는 "관련 글 목록"이라는 기능이 있습니다.(해당 카테고리의 다른 글 이라는 플러그인도 있지만 다릅니다.)
티스토리가 스킨 가이드 문서를 업데이트를 제대로 안하는거 같습니다 ㅡ/.,ㅡ;;

위의 관련 글 목록까지 합치면 우린 8가지의 내용을 하나의 글 영역 안에다가 코딩을 해야합니다.
자세한건 각 섹션에서 다뤄보기로 하고 우선 "글 영역 지정"을 먼저 하게습니다.

STEP 1. skin.html 글 영역 지정

• 기존 블로그 글 목록 소스 아래에 위와 같이 <s_permalink_article_rep> 추가합니다.
  이 <s_permalink_article_rep></s_permalink_article_rep>은 글 본문 영역의 시작과 끝을 지정하는것입니다.
  구조는 s_article_rep 안에 s_permalink_article_rep 으로 영역을 지정하는 것이죠

위와 같이 등록하고 "글 목록"에서 아무 글의 제목을 눌러 해당 글로 이동을 하면 아래와 같이 깨끗한 화면이 나오면 "글 영역 지정"이 완료 된것입니다.