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

방명록

이제 까지는 워밍업에 불과했다. 방명록 파트부터는 코드도 길어지고 복잡해진다..... 하지만 내 블로그에 방문한 사람들이 남겨주는 소중한 발자취를 남길수있는 기능이기에 포기해서는 안된다!

 

치환자

방명록 역시 그룹치환자가 존재한다 <s_guest>

방명록 쓰기 폼에 대한 부분의 치환자는 아래와 같다

<s_guest_input_form> 방명록 입력을 위한 폼을 출력 하는 그룹치환자

방명록 내용 입력박스 값치환자

방명록 입력 완료 이벤트 값치환자

 

<s_guest_member> 로그인을 하지 않았거나 소유자가 아닌경우 보여지는 영역 그룹치환자

<s_guest_form> 로그인을 하지 않았을경우 보여지는 영역 그룹치환자

이름 입력박스 값치환자

이름 값치환자

비밀번호 입력박스 값치환자

비밀번호 값치환자

홈페이지 입력박스 값치환자

홈페이지 값치환자

 

추가로 공식 문서에는 존재하지 않지만 꼭 필요한 기능인 비밀글 설정!

비밀글 on/off

 

치환자가 조금 많다... 하지만 두려워 해서는 안된다!

 

html 작성

<s_guest>
	<div id="guestbook">
		<h1 class='guestbook-title'>Guestbook</h1>
                                
		<div class="guest-write">
			<s_guest_input_form>
				<s_guest_member>
					<s_guest_form>
						<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_guest_form>
					<p class="secret">
						<label for=''><input name="" id="" type="checkbox" /> 비밀글 </label></p>
				</s_guest_member>
				<div class='comment'>
					<textarea type='text' name="" placeholder='여러분의 소중한 방명록을 남겨주세요' autocomplete="off"></textarea>
				</div>
				<div class='submit'>
					<input type="submit" value="방명록 남기기" onclick="" />
				</div>
			</s_guest_input_form>
		</div>
        
	</div>
</s_guest>

길다... 하지만 앞으로 해나가야 할것에 비하면 아무것도 아니다. 이런거에 쫄아서는 안된다. 글로 설명하기는 어려우니 간단한 그림과 함께 알아보자.

 

css 작성

html이 길어진만큼 css도 길어진다....

#guestbook .guestbook-title {
	padding: 10px 20px;
	font-size: 1.875rem;
	background: #aaa;
	color: #fff;
	margin-bottom: 5px;
}

#guestbook .guest-write {
	padding: 20px;
	border: 1px solid #ddd;
	background: #fff;
}

#guestbook .guest-info {
	box-sizing: border-box;
	max-width: 100%;
}

#guestbook .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;
}

#guestbook .secret {
	font-size: 1.25rem;
	margin-bottom: 5px;
	padding: 5px;
}

#guestbook .secret label {
	cursor: pointer;
}

#guestbook .secret input {
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 5px;
	vertical-align: bottom;
}

#guestbook textarea {
	box-sizing: border-box;
	width: 100%;
	height: 200px;
	font-size: 1.25rem;
	margin-bottom: 5px;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	text-indent: 10px;
	overflow-x: hidden;
}

#guestbook .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;
}

#guestbook .submit input:hover {
	background: skyblue;
}

 

확인