Day 44 : 폼 꾸미기

pancakemaker 2021. 12. 17. 11:31

1. 폼 요소에 스타일 입히기

input[type=text] { /* 속성 셀렉터 : <input>의 type 속성이 text인 경우에 적용 */
	color : red;
}

2. 폼 요소에 테두리 만들기

input[type=text] {
	border : 2px solid skyblue;
    border-radius : 5px;
}

<label>
	이름 : <input type="text" placeholder="Elvis">
</label>

3. 폼 요소에 마우스 처리

① :hover

input[type=text] {
	color : red;
}
input[type=text]:hover {
	background : aliceblur;
}

② :focus

input[type=text]:focus {
	font-size : 120%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>폼 스타일 주기</title>
	<style type="text/css">
		input[type=text] { /* <input type="text"> 에만 적용 */
			color: red;
		}
		input:hover, textarea:hover { /* 마우스 올라올 때 */
			background: aliceblue;
		}
		input[type=text]:focus, input[type=email]:focus { /* 포커스 받을 때 */
			font-size: 120%;
		}
		label {
			display: block; /* 새 라인에서 시작 */
			padding: 5px;
		}
		label span {
			display: inline-block;
			width: 90px;
			text-align: right;
			padding: 10px;
		}
	</style>
</head>
<body>
	<h3>CONTACT US</h3>
	<hr>
	<form>
		<label>
			<span>Name</span><input type="text" placeholder="Elvis">
		</label>
		<label>
			<span>Email</span><input type="email" placeholder="elvis@graceland.com">
		</label>
		<label>
			<span>Comment</span><textarea placeholder="메시지를 남겨주세요."></textarea>
		</label>
		<label>
			<span></span><input type="submit" value="submit">
		</label>
	</form>
</body>
</html>