Section 12-3 - 티스토리 반응형 스킨 만들기 - 공지사항 본문(상세보기 화면)

지난 섹션에서는 "공지사항 목록"을 만들었으니 이젠 그 공지사항의 본문을 볼 수 있게 상세보기 화면을 작업해야겠죠?

이번에도 글 상세보기 코드를 재활용하여 만들면 금방 만들기 때문에 소스 위주로 설명하고 공지사항 섹션을 끝내도록 하겠습니다.

STEP 1. skin.html 공지사항 상세보기 코드 추가

• <s_permalink_article_rep></s_permalink_article_rep> : 공지사항 본문(상세보기)이 출력되는 영역
• : 공지사항 제목
• : 공지사항 작성자 (팀블로그가 아닌 개인 사용자용 블로그면 궂이 안넣으셔도 됩니다.)
• : 공지사항 작성일시
• : 공지사항 본문(상세 내용)

공지사항 본문 코드 구조

• 공지사항 영역인 <s_notice_rep> 안에 "공지사항 목록" 소스 하단부에 위의 "공지사항 본문" 소스를 넣습니다.

STEP 2. style.css 공지사항 본문 스타일 추가

/* Notice View */
.notice-header {margin-bottom:10px; background:#fff; border:1px solid #ddd}
.notice-header:after {display:block; clear:both; content:''}
.notice-header .title-wrap {padding:20px 20px 10px 20px}
.notice-header .title-wrap .category-info a {color:#ff8149}
.notice-header .title-wrap .notice-title {margin-top:5px; font-size:2em; color:#111; line-height:1em}
.notice-header .info-wrap {margin-top:10px; padding:10px 20px; background:#ff8149}
.notice-header .info-wrap:after {display:block; clear:both; content:''}
.notice-header .info-wrap .notice-info {float:left; list-style:none}
.notice-header .info-wrap .notice-info:after {display:block; clear:both; content:''}
.notice-header .info-wrap .notice-info li {margin-right:15px; float:left; font-size:0.875em; color:#fff5f0}
.notice-header .info-wrap .notice-info li i {margin-right:4px; color:#fff}

• 공지사항 관련 정보 배경색을 다른 색으로 변경하여 일반 글과 공지사항의 차이점을 표현하였습니다.
• 글 본문 스타일과 크게 다르지 않는데 또 복사해서 독립적으로 사용하는 이유는 공지사항 본문의 커스터마이징을 더 편하게 하기위하여 여지를 남겨두는 것입니다. 소스가 중복되는게 싫으시면 skin.html에 공지사항 본문을 일반 글 본문의 클래스로 대체하신 후 사용하시면 불필요한 소스를 제거하실 수 있습니다.
  하지만 우선 소스를 남겨두시는게 훗날에 도움이 되실 겁니다 ㅡ/.,ㅡ후훗

STEP 3. 공지사항 본문 결과 확인

공지사항 본문 결과 확인