Section 11-6 - 티스토리 반응형 스킨 만들기 - 댓글 입력 폼

댓글 입력 폼은 블로그의 글에 의견, 문의등의 사용자와 소통할 수 있는 창구역할을 하는 기능입니다.
때로는 글의 내용보다 댓글의 내용이 더 재미있고 유익할 수 있는 상황이 발생하기도 하죠~
자신만 읽을 수 있는 기록이나 일기와 같은 글에는 필요가 없을 수 있지만..ㅎㅎ
그래도 블로그의 필수 기능중 하나인 댓글 입력 폼을 만들어보겠습니다.

STEP 1. skin.html 코드 추가

위와 같이 코드를 추가하면 아래와 같이 댓글 입력 폼이 출력됩니다.

댓글 입력 폼

댓글 입력 폼 코드 구조

• <s_rp_count>3</s_rp_count> : 댓글 갯수
• <s_rp></s_rp> : 댓글 입력 폼 출력, 댓글 목록 출력 영역 지정
• <s_rp_input_form></s_rp_input_form> : 댓글 입력 폼 출력 영역 지정
  1. <s_rp_member></s_rp_member> : 티스토리 로그인을 하지 않았거나 블로그 소유자가 아닌경우 보여지는 영역 지정
  2. <s_rp_guest></s_rp_guest> : 티스토리 로그인을 하지 않았을경우 보여지는 영역 지정
     • : 이름 입력 checkbox 이름
     • : 비밀번호 입력 checkbox 이름
  3. : 비밀댓글 체크박스 이름 (label target, checkbox name 지정시 사용)
  4. : 댓글 입력 textarea 이름
  5. : 댓글 입력 전송 버튼의 onclick event 치환자

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

STEP 2. style.css 코드 추가

/* Article Reply */
.article-reply h1 {padding:10px 20px; font-weight:normal; font-size:1.5em; background:#2d2d2d; color:#fff}
.reply-wrap {padding:20px; border:1px solid #ddd; background:#fff}
/* Reply Form */
.reply-form {}
.reply-form dl.reply-guest {}
.reply-form dl.reply-guest dt {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.reply-form dl.reply-guest dd {margin-bottom:10px}
.reply-form dl.reply-guest dd input {width:100%; padding:10px 0; border:1px solid #ddd; background:#f9f9f9; color:#999; text-indent:10px;}
.reply-form dl.reply-guest dd input:focus, .reply-form dl.reply-guest dd input:active {background:#fff; color:#111}
.reply-form .secret {}
.reply-form .secret label {cursor:pointer}
.reply-form .secret input {width:24px; height:24px; margin-right:10px; vertical-align:bottom;}
.reply-form dl.reply-write {margin-top:10px;}
.reply-form dl.reply-write dt {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.reply-form dl.reply-write dd {}
.reply-form dl.reply-write dd textarea {width:100%; margin-bottom:10px; padding:10px 0; height:200px; border:1px solid #ddd; background:#f9f9f9; color:#999; text-indent:10px;}
.reply-form dl.reply-write dd textarea:focus, .reply-form dl.reply-write dd textarea:active {background:#fff; color:#111}
.reply-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;}

• .reply-wrap 클래스는 "댓글 입력 폼", "댓글 목록"을 모두다 쌓는 랩입니다.
• .reply-form 클래스 안에는 "댓글 입력 폼" 관련 요소들의 스타일을 넣습니다.

STEP 3. 결과 확인

※ 비로그인 방문자 댓글 입력 폼 출력

댓글 입력 폼-비로그인 방문자

※ 로그인 방문자 댓글 입력 폼 출력

댓글 입력 폼-로그인 방문자

※ 블로그 소유자 댓글 입력 폼 출력