Section 12-1 - 티스토리 반응형 스킨 만들기 - 공지사항 사이드바

이번 Section 12는 공지사항을 시작합니다.

공지사항은 블로그 포스트와 별개로 방문자에게 소식을 알리기 위한 기능이므로 있으면 좋겠죠?
이 기능이 필요 없다면 만들지 않아도 블로그 운영에 크게 문제가 되진 않습니다.
하지만 필수 기능이라는건 변한없으니 작업을 시작하겠습니다.

DESCRIPTION

공지사항은 일반 티스토리 블로그 글 쓰기와 다르게 공지사항이라는 글 쓰기가 따로 메뉴가 존재합니다.
그러므로 블로그 카테고리에는 공지사항이 노출되지 않습니다.
공지사항으로 접근하려면 공지사항 메뉴를 만들거나, 공지사항 목록을 사이드바에서 출력해줘야 접근이 가능합니다.
우리는 두번째 방법인 공지사항 목록을 사이드바에 출력하여 방문자들이 공지사항에 접근할 수 있도록 작업을 진행하도록 하겠습니다.

공지사항 작업 순서

• Section 12-1 : 공지사항 사이드바 작업
• Section 12-2 : 공지사항 목록
• Section 12-3 : 공지사항 본문(상세보기)

이번 섹션은 공지사항 사이드바 작업을 시작하겠습니다.

STEP 1. skin.html 공지사항 사이드바 추가

• <s_rct_notice>, </s_rct_notice> : 공지사항 리스트를 출력할 영역 지정
• <s_rct_notice_rep>, </s_rct_notice_rep> : 공지사항 리스트를 반복 출력 영역 지정
• : 해당 공지사항의 고유 주소
• : 공지사항의 글 제목

STEP 2. 관리자 화면에서 추가 된 공지사항 사이드바 활성

공지사항 사이드바 설정

STEP 3. 중간결과 확인

중간결과 확인

• 공지사항 사이드바 요소를 기존 카테고리 사이드바 하단부에 추가합니다.
• 공지사항이 추가 될 때마다 <s_rct_notice_rep> 안에 있는 <li>요소가 반복되어 출력됩니다.
• 다른 공지사항을 더 볼 수 있도록 공지사항 목록으로 이동하는 링크를 만들어줍니다. (주소는 /notice 로 하시면 됩니다)

STEP 4. style.css 공지사항 사이드바 추가

/* sidebar */
#sidebar div {position:relative; margin-bottom:10px; padding:10px; background:#fff; border:1px solid #ddd}
#sidebar div h1 {font-size:1.125em}
/* category */
.category {}
.category .tt_category {list-style:none}
.category .tt_category .link_tt {}
.category .tt_category .c_cnt {color:#ff8149; font-size:0.725em;}
.category .tt_category img {display:none;}
.category .tt_category ul.category_list {margin:10px 0 0 20px}
.category .tt_category ul.category_list li {list-style:disc}
.category .tt_category ul.category_list li a {}
.category .tt_category ul.category_list li ul.sub_category_list {margin:0 0 10px 0;}
.category .tt_category ul.category_list li ul.sub_category_list li {list-style:none}
.category .tt_category ul.category_list li ul.sub_category_list li a {display:block; padding:3px 0 3px 15px; font-size:0.85em; color:#777; border-left:1px solid #e9e9e9}
/* notice */
.notice {}
.notice ul {margin:10px 0 0; border-top:1px solid #e9e9e9; list-style:none}
.notice ul li:before {content:"- "}
.notice ul li {font-size:0.875em}
.notice ul li a {display:inline-block; padding:8px 0 0;}
.notice ul li a:hover, .notice ul li a:active, .notice ul li a:focus {color:#ff8149; text-decoration:none}
.notice .more {position:absolute; top:10px; right:10px; font-size:0.875em}

• 기존 사이드바 스타일과 다르면 위와 같이 수정합니다.(카테고리 주석과 스타일이 변경 되었습니다.)
• 사이드바 스타일은 위쪽 header 아래에 있습니다. 기존 사이드바 하단부에 notice 스타일을 추가하시면 됩니다.
• 디자인은 개인취향대로 하시면 됩니다.ㅡ/,.ㅡ;;

STEP 5. 결과 확인

공지사항 사이드바 최종결과 확인

크게 무리 없이 공지사항 사이드바를 추가하였습니다.
다음에는 "공지사항 목록"을 작업하도록 하겠습니다. 고생하셨습니다.