Section 13-2 - 티스토리 반응형 스킨 만들기 - 보호 글 목록

지난 섹션에선 보호글을 등록하였습니다.
하지만 "보호 글 목록" 코딩을 하지 않았기 때문에 눈씻고 찾아봐도 보이지 않습니다 ㅡ/.,ㅡ;;
그러니 신속히 보호글 목록을 작업 해보도록 하겠습니다.

※ 주의 사항 ※

• 보호 글 작업시 새로운 세션의 브라우저이거나 로그인이 안되어 있는 다른 브라우저를 이용하여 접근해서 확인하셔야 합니다.
• 블로그 소유자가 로그인이 되어 있는 상태에서 비밀글 접근시 일반글로 보이기 때문에 확인이 안됩니다.
• 확인은 꼭 로그인이 안되어 있는 상태(방문자)에서 하셔야 합니다!!

STEP 1. skin.html 보호 글 목록 코드 추가

보호 글 코드를 공지사항 코드 아래부분에 이어서 작성합니다.

skin.html 보호글 목록 코드

1

• <s_article_protected></s_article_protected> : 보호 글 목록, 보호 글 비밀번호 확인 화면이 출력되는 영역 지정
• <s_index_article_rep></s_index_article_rep> : 보호 글 목록이 반복되어 출력되는 영역 지정
• /48 : 보호 글의 고유 주소
• Section 13-2 - 티스토리 반응형 스킨 만들기 - 보호 글 목록 : 보호 글의 제목
• 티스토리 스킨만들기/Tistory One : 보호 글의 카테고리
• 2017. 10. 26. 18:12 : 보호 글의 생성일시

보호글 목록 코드 구조

• 이번 html코드도 기존 글 목록에서 복사하여 붙여넣고 클래스명만 바꿨습니다.
• 독립적인 스타일 관리를 위하여 클래스명만 바꾸었습니다.

STEP 2. style.css 보호 글 코드 추가

보호 글 스타일은 공지사항 스타일 아래에 넣습니다.

style.css 보호 글 코드

1 2 3 4 5 6 7 8 9 10 11 12

/* *********************************************************************    Protected Article    ****************************************************************** */ /* Protected Article list */ .protected-list {margin:10px 0; padding:24px 20px 26px; background:#f9f9f9; border:1px solid #ddd} .protected-list .protected-item a {display:block; text-decoration:none} .protected-list .protected-item .title {font-weight:normal; font-size:1.375em; text-align:center;} .protected-list .protected-item .summary {margin-top:4px; color:#7e7e7e; text-align:center; vertical-align:top; font:normal 0.875em 'NanumBarunGothic','Noto Sans', sans-serif; line-height:1.5em;} .protected-list .info {margin-top:6px; font-size:0.875em; text-align:center} .protected-list .info a {color:#ff8149} .protected-list .info .pipe {display:inline-block; margin:0 10px; color:#dfdfdf} .protected-list .info .date {color:#999}

• 다른 글 목록(일반 글, 공지사항)과 다르게 텍스트를 가운데로 정렬하였습니다. (배경도 살짝 회색으로..)

STEP 3. 보호 글 결과 확인

보호 글 목록 결과 확인

위와 같이 나왔다면 다음 섹션인 "보호 글 비밀번호 입력 화면" 작업으로 넘어갑니다~