티스토리 스킨 만들기 #15 댓글 (1) 쓰기폼

댓글 쓰기 폼

열심히 포스팅한 글의 댓글을 쓰기위한 폼을 만들어보자

 

치환자

치환자는 다르지만 일전시간에 해보았던

2020/03/04 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼

티스토리 스킨 만들기 #10 방명록 (1) 쓰기폼

과 유사하다.

 

<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;
}