티스토리 관리/티스토리 스킨 만들기/
티스토리 스킨 만들기 #15 댓글 (1) 쓰기폼
2020. 3. 10.
댓글 쓰기 폼
열심히 포스팅한 글의 댓글을 쓰기위한 폼을 만들어보자
치환자
치환자는 다르지만 일전시간에 해보았던
2020/03/04 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼
티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼
방명록 이제 까지는 워밍업에 불과했다. 방명록 파트부터는 코드도 길어지고 복잡해진다..... 하지만 내 블로그에 방문한 사람들이 남겨주는 소중한 발자취를 남길수있는 기능이기에 포기해서는 안된다! 치환자 방..
shalchoong.tistory.com
과 유사하다.
<s_rp> 댓글 그룹치환자
<s_rp_input_form> 댓글 쓰기폼 그룹치환자
댓글 입력박스 값치환자
댓글 입력 온클릭 이벤트 값치환자
<s_rp_member> 비로그인 or admin이 아닐경우 보여지는 그룹치환자
비밀글 체크박스 값치환자
<s_rp_guest> 비로그인시 보여지는 그룹치환자
이름 입력 박스 값치환자
이름 값치환자
비밀번호 입력 박스 값치환자
비밀번호 값치환자
html 작성
<article>
<!-- 글목록 리스트형 -->
<s_article_rep>
<!-- 글목록 내용형-->
<s_permalink_article_rep>
<!-- 글 본문 -->
<!-- 카테고리내 다른 글-->
<s_rp>
<div id='comment'>
<h1 class='rp-title'>Comment</h1>
<div class='rp-write'>
<s_rp_input_form>
<s_rp_member>
<s_rp_guest>
<div class='guest-info'>
<input type='text' name='' value=''
title='이름' placeholder='이름' autocomplete="off" />
</div>
<div class='guest-info'>
<input type="password" maxlength="8" name=""
value="" title='password' placeholder='password' />
</div>
</s_rp_guest>
<p class="rp-secret">
<label for=''><input name=""
id="" type="checkbox" /> 비밀글 </label></p>
</s_rp_member>
<div class='comment'>
<textarea type='text' name="" placeholder='여러분의 소중한 댓글을 남겨주세요'
autocomplete="off"></textarea>
</div>
<div class='submit'>
<input type="submit" value="댓글 남기기" onclick="" />
</div>
</s_rp_input_form>
</div>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</article>
설명은 그림으로
css 작성
#comment .rp-title {
padding: 10px 20px;
font-size: 1.375rem;
background: #ddd;
margin-top: 10px;
margin-bottom: 5px;
}
#comment .rp-write {
padding: 20px;
background: #fff;
}
#comment .guest-info {
box-sizing: border-box;
max-width: 100%;
}
#comment .guest-info input {
box-sizing: border-box;
width: 100%;
font-size: 1.25rem;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
text-indent: 10px;
}
#comment .rp-secret {
font-size: 1.25rem;
margin-bottom: 5px;
padding: 5px;
}
#comment .rp-secret label {
cursor: pointer;
}
#comment .rp-secret input {
box-sizing: border-box;
width: 1.5rem;
height: 1.5rem;
margin-right: 5px;
vertical-align: bottom;
}
#comment textarea {
box-sizing: border-box;
width: 100%;
height: 100px;
font-size: 1.25rem;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
text-indent: 10px;
overflow-x: hidden;
}
#comment .submit input {
box-sizing: border-box;
width: 100%;
font-size: 1.25rem;
margin-bottom: 5px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
}
#comment .submit input:hover {
background: skyblue;
}