Section 13-3 - 티스토리 반응형 스킨 만들기 - 보호 글 비밀번호 입력 폼

이번 섹션은 지난번에 말씀드린 것처럼 보호 글 비밀번호 입력 폼을 만듭니다.
목록에 노출이 되고 그 보호 글을 눌렀을때 바로 글 본문이 보여진다면 비밀글이 아니겠죠?
글 본문을 눌렀을시 비밀번호를 아는 사람들만 접근할 수 있도록 비밀번호를 입력 받아야 하는 화면이 필요한데
그 화면을 이번 섹션에서 작업을 하는 것입니다.

※ 혹시나 해서 한번더 말씀드리지만, 보호 글(비밀 글)은 비로그인 사용자들만 노출됩니다.

STEP 1. skin.html 보호 글 비밀번호 입력 폼 코드 추가

skin.html 보호 글 비밀번호 입력 폼 코드

1

• <s_permalink_article_rep></s_permalink_article_rep> : 보호 글 비밀번호 입력 폼 영역 지정
• /category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%EB%A7%8C%EB%93%A4%EA%B8%B0/Tistory%20One : 보호 글 카테고리 고유 링크 주소
• 티스토리 스킨만들기/Tistory One : 보호 글 카테고리
• Section 13-3 - 티스토리 반응형 스킨 만들기 - 보호 글 비밀번호 입력 폼 : 보호 글 제목
• nOo9ya : 보호 글 작성자
• 2017. 10. 26. 19:42 : 보호 글 작성일시
• {reloadEntry(49);return false;} : 보호 글의 비밀번호를 입력하고 엔터키나 확인버튼을 눌렀을 때 실행될 자바스크립트 코드
  form 태그에 onsubmit 을 이용하여 사용 : <form onsubmit="{reloadEntry(49);return false;}">

보호 글 비밀번호 입력 폼 코드 구조

• 글 상세보기 화면 상단의 제목과 카테고리 정보의 구조는 똑 같습니다.
• 본문 영역 대신 비밀번호를 입력하는 form영역으로 대체합니다.
• form을 사용하기 때문에 input type, button type은 submit으로 전송합니다.

STEP 2. style.css 보호 글 비밀번호 입력 폼 스타일 추가

보호 글 목록 스타일 바로 아래에 아래 스타일을 입력합니다.

style.css 보호 글 비밀번호 입력 폼 스타일

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* Protected Article Form */ .protected-header {margin-bottom:10px; background:#fff; border:1px solid #ddd} .protected-header:after {display:block; clear:both; content:''} .protected-header .title-wrap {padding:20px 20px 10px 20px} .protected-header .title-wrap .category-info a {color:#ff8149} .protected-header .title-wrap .article-title {margin-top:5px; font-size:2em; color:#111; line-height:1em} .protected-header .info-wrap {margin-top:10px; padding:10px 20px; background:#1d1d1d} .protected-header .info-wrap:after {display:block; clear:both; content:''} .protected-header .info-wrap .protected-info {float:left; list-style:none} .protected-header .info-wrap .protected-info:after {display:block; clear:both; content:''} .protected-header .info-wrap .protected-info li {margin-right:15px; float:left; font-size:0.875em; color:#bbb} .protected-header .info-wrap .protected-info li i {margin-right:4px; color:#eee} .protected-header .info-wrap .protected-info li a {color:#bbb} .protected-form {display:block; padding:90px 20px; background:#fff; border:1px solid #ddd; font-weight:normal; font-size:1em; line-height:1.75em; text-align:center} .protected-form strong {display:block; font-size:2em; color:#111} .protected-form p {margin-bottom:10px; color:#999} .protected-form input {padding:0 10px; height:40px; line-height:40px; color:#777; border:1px solid #ddd} .protected-form button {padding:0 20px; height:40px; line-height:40px; color:#fff; background:#ff8149; border:1px solid #ff8149}

STEP 3. 보호 글(비밀 글) 비밀번호 입력 폼 결과 확인

보호 글 비밀번호 입력 폼 결과 확인

보호 글 관련 섹션이 끝났습니다.
이제 기능 관련 섹션은 얼마 안남았습니다. 파이팅!!