Section 17 - 티스토리 반응형 스킨 만들기 - 페이지

이번 섹션은 티스토리의 새로운 기능인 "페이지"를 만들어 보겠습니다.

페이지란?

이번 섹션에서 다루는 페이지와 지난 섹션에서 작업했던 "페이지네이션"과는 완전히 다른겁니다.
페이지는 말 그대로 페이지입니다. ㅡ/.,ㅡ;;
쉽게 생각하면 독립된 하나의 화면을 페이지라고 생각하시면 됩니다.
이런 페이지(독립된 화면)을 메뉴로 연결 시키고 레이아웃을 통일시키면 하나의 홈페이지가 완료되는 것입니다.
참고로 티스토리 페이지는 "정적 페이지"입니다.(위지웍에디터에서 입력한 내용을 단순하게 화면에 출력하는 페이지)

페이지를 꼭 만들어야 하나요?

페이지는 궂이 페이지 관련 치환자를 넣지 않아도 글 본문(상세) 보기 화면에 출력이 됩니다.
그러니 꼭 만들필요는 없지만 글 본문 상단의 제목과 작성자 등등 정보를 표현 할 필요가 없는 독립된 페이지를 만들때는 페이지만의 레이아웃을 만들어놔야할 필요가 있습니다.
페이지 기능 사용유무를 떠나서 한번 만들어보면서 치환자를 공부할 필요는 있다고 생각됩니다.

페이지는 어떻게 활용할까요?

예로 페이지를 활용할 수 있는 것들은 "회사소개", "오시는 길" 등등 독립된 정적 화면을 구축 할 수 있습니다.
워드프레스라는 블로그 솔루션이 있는데 이 워드프레스는 이제 단순한 블로그 솔루션이 아닌 홈페이지를 구축하거나
플러그인 추가와 설정만으로 CMS를 뛰어넘어 쇼핑몰, ERP, LMS 등등으로 확장이 가능합니다.
이로인해 워드프레스는 전세계에서 제일 많이 쓰는 CMS가 되었던거죠.
(워드프레스와 티스토리를 비교해서 기분이 상하신분들이 있다면 죄송합니다. ㅡ/.,ㅡ;;)
티스토리는 아직 단순한 블로그 솔루션 서비스이지만 국내 다른 블로그 서비와 다르게 사용자가 직접 html과 css파일에 접근하여 수정할 수 있는 자유도가 있기에 구글 애드센스와 사용자만의 독립된 디자인의 블로그를 꾸밀 수 있는 특징이 있는 서비스였습니다.
하지만 이제 "페이지" 라는 새로운 기능으로 정적 홈페이지, 포트폴리오 사이트 등으로 활용할 수 있는 길이 열렸습니다.(소리 질러 ㅡ/.,ㅡ~~)
참고로 네이버 블로그, 다음 블로그에서는 블로그를 홈페이지처럼 하나의 독립된 화면을 구성할 수 있는 기능이 없습니다.

시작전에 체크!!

페이지 치환자 작업을하면 확인 할 페이지를 미리 추가하셔야합니다.
페이지 추가 및 메뉴를 미리 추가하시고 아래 STEP을 진행하시기 바랍니다.
※ 혹시나 해서 알려드립니다. 페이지 접근 주소는 "http://자기주소/pages/페이지 작성시 넣은 주소" 이렇게 됩니다. 참고만하세요.

서론은 여기까지!! 바로 코드 작업들어갑니다~!

STEP 1. skin.html 페이지 코드 추가

...  ...
... 태그 클라우드 ...

            

... 페이지네이션 ...

• <s_page_rep></s_page_rep>: "페이지"가 출력되는 영역 지정(이 영역이 없다면 글 상세보기 영역에서 출력됩니다.)
• : 페이지 고유 주소 
• : 페이지 제목 
• : 페이지 작성 일시
• : 페이지 본문 내용 
• : 페이지 작성자 이름

페이지 코드 구조

• 기존 "태그 클라우드" 코드 아래, "페이지네이션" 코드 위에 "페이지" 코드를 작성합니다.
• 우리는 글 본문과 다르게 "제목", "내용" 이 두가지만 출력하므로 치환자는 2개만 들어갑니다.

STEP 2. style.css 페이지 스타일 코드 추가

/* *********************************************************************
   Pages
   ****************************************************************** */
.pages-wrap {}
.pages-wrap .page-title {padding:20px 0 20px 10px; background:#191919; color:#fff}
.pages-wrap .page-view {padding:20px; background:#fff; border:1px solid #ddd; font-weight:normal; font-size:1em; line-height:1.75em}
.pages-wrap .page-view:after {display:block; clear:both; content:''}

• 글 본문과 크게 다르지 않습니다.
• 페이지는 독립적인 화면으로 만들 수 있지만 우리는 블로그 레이아웃에 글 본문과 같은 형태로 만들었습니다.
• 페이지의 제목 요소(h1,h2,h3,h4)와 목록 요소(ul, ol, dl) 등등 요소들의 스타일은 각각 개인이 필요한 형태로 .page-view 하단에 넣으시면 됩니다.

STEP 3. 페이지 결과 확인

페이지 결과 확인