Section 14-2 - 티스토리 반응형 스킨 만들기 - 방명록 글쓰기 폼

지난 섹션 2017/10/31 - Section 14-1 - 티스토리 반응형 스킨 만들기 - 방명록 에서 영역을 지정하였습니다.
이번 섹션에선 본격적으로 방명록 글쓰기 폼을 만들도록 하겠습니다.

STEP 1. skin.html 방명록 글쓰기 폼 코드 추가

• <s_guest></s_guest> : 방명록 글쓰기 폼, 목록 출력 영역 지정
• <s_guest_input_form></s_guest_input_form> : 방명록 글쓰기 폼 출력 영역 지정
• <s_guest_member></s_guest_member> : 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역
• <s_guest_form></s_guest_form> : 로그인을 하지 않았을 경우 보여지는 영역
• : 이름입력 박스 이름 
• : 이름 
• : 비밀번호 입력 박스 이름 
• : 비밀번호 
• : 글 내용 입력박스 이름 
• : 입력 완료 온클릭 이벤트

방명록 글쓰기 폼 코드 구조

• 글 댓글 입력 폼과 규칙은 똑같습니다.
• 블로그 소유자가 아닌 방문자들이 2가지 유형이 있는데, "티스토리 로그인을 한 방문객(로그인)" / "티스토리 로그인을 안한 방문객(비로그인 또는 티스토리 미 가입자)" 이 두가지 유형이 있습니다.
  • 방문자가 "티스토리 로그인 상태" : 이름과 비밀번호 입력 폼이 필요 없기때문에 미노출
  • 방문자가 "비로그인 또는 티스토리 미 가입자" : 이름과 비밀번호 입력 폼이 노출
• 블로그 소유자를 제외한 모든 사람들은 "비밀 댓글" 로 지정할 수 있는 체크박스가 출력됩니다.
• 내용 입력과 전송 버튼은 항상 노출합니다.

STEP 2. style.css 글쓰기 폼 스타일 추가

/* *********************************************************************
   GuestBook
   ****************************************************************** */
.guestbook-title {padding:10px 20px; font-weight:normal; font-size:1.5em; background:#2d2d2d; color:#fff}
.guestbook-wrap {padding:20px; border:1px solid #ddd; background:#fff}
/* Guestbook Form */
.guestbook-form {}
.guestbook-form dl.guestbook-guest {}
.guestbook-form dl.guestbook-guest dt {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.guestbook-form dl.guestbook-guest dd {margin-bottom:10px}
.guestbook-form dl.guestbook-guest dd input {width:100%; padding:10px 0; border:1px solid #ddd; background:#f9f9f9; color:#999; text-indent:10px;}
.guestbook-form dl.guestbook-guest dd input:focus, .guestbook-form dl.guestbook-guest dd input:active {background:#fff; color:#111}
.guestbook-form .secret {}
.guestbook-form .secret label {cursor:pointer}
.guestbook-form .secret input {width:24px; height:24px; margin-right:10px; vertical-align:bottom;}
.guestbook-form dl.guestbook-write {margin-top:10px;}
.guestbook-form dl.guestbook-write dt {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.guestbook-form dl.guestbook-write dd {}
.guestbook-form dl.guestbook-write dd textarea {width:100%; margin-bottom:10px; padding:10px 0; height:200px; border:1px solid #ddd; background:#f9f9f9; color:#999; text-indent:10px;}
.guestbook-form dl.guestbook-write dd textarea:focus, .guestbook-form dl.guestbook-write dd textarea:active {background:#fff; color:#111}
.guestbook-form button {display:block; width:100%; margin:10px 0 0 0; padding:10px 0; border:1px solid #ff7035; background:#ff8149; color:#fff; text-align:center;}

• 글 쓰기 댓글 폼의 스타일을 복사해서 붙여넣기 했습니다.
• 차이점은 클래스명이 바뀌었다는 거죠~이유는 독립적인 스타일 커스터마이징을 할 수 있다는 전제하에 따로 스타일을 추가해둡니다.

STEP 3. 글쓰기 폼 결과 확인

방명록 글쓰기 폼-비로그인 방문자

방명록 글쓰기 폼-로그인 방문자

방명록 글쓰기 폼-블로그 소유자