Section 12-2 - 티스토리 반응형 스킨 만들기 - 공지사항 목록

지난 섹션에선 사이드바에 공지사항 목록과 MORE 버튼으로 공지사항 목록으로 바로갈 수 있는 기능을 만들었습니다.
이번에는 공지사항 목록을 만들도록 하겠습니다.

공지사항 목록은 글 목록과 마크업은 똑같고 치환자만 다르기 때문에 치환자 설명과 스타일시트 소스만 간단하게 보여드리고 마무리합니다.

STEP 1. skin.html 공지사항 영역 지정

• <s_notice_rep></s_notice_rep> : 공지사항 영역은 "목록"과 "상세 보기" 두가지를 출력하는 영역
• <s_index_article_rep></s_index_article_rep> : 공지사항 목록이 반복되어 출력되는 영역

STEP 2. skin.html 공지사항 목록 코드 추가

• : 해당 공지사항 고유 링크 주소
• : 공지사항 목록 제목
• : 공지사항 내용의 일부
• : 공지사항 작성일시

공지사항 목록 코드 구조

• 카테고리 치환자가 없는 대신에 항상 공지사항 글만 보이기 때문에 카테고리 링크를 "/notice"로 경로를 고정시켜주면 됩니다.

STEP 3. style.css 공지사항 목록 스타일 추가

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

STEP 4. 공지사항 목록 결과 확인

공지사항 목록 결과 확인