๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML5 & CSS3

[HTML5 & CSS3] ์ƒํ’ˆ ์ฃผ๋ฌธ์„œ ์ž‘์„ฑํ•˜๊ธฐ

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 1. 30.
๋ฐ˜์‘ํ˜•
// ๊ฐœ์ธ์ •๋ณด ์นธ
<fieldset>
<legend>๊ฐœ์ธ ์ •๋ณด</legend>
<ul>
<li>
<label for="uname" class="title">์ด๋ฆ„</label>
<input type="text" id="uname" placeholder="์—ฌ๋ฐฑ์—†์ด ์ž…๋ ฅ" required>
</li>
<li>
<label for="tell" class="title">์—ฐ๋ฝ์ฒ˜</label>
<input type="tel" id="tell" placeholder="์—ฐ๋ฝ๊ฐ€๋Šฅํ•œ ๋ฒˆํ˜ธ">
</li>
</ul>
</fieldset>

// ๋ฉ”๋ชจ ์นธ
<label for="comment" class="title">๋ฉ” ๋ชจ</label>
<textarea cols="40" rows="3" id="comment"></textarea>

// ์ปคํ”ผ ์ฒดํฌ๋ฐ•์Šค
<label><input type="checkbox">๊ณผํ…Œ๋ง๋ผ ์•ˆํ‹ฐ๊ตฌ์•„ (100g) </label>
<label><input type="number" values="0" min="0" max="5">๊ฐœ</label>

// ์ฃผ๋ฌธํ•˜๊ธฐ, ๋‹ค์‹œ ์ž‘์„ฑ ๋ฒ„ํŠผ
<div class="centered">
<input type="submit" value="์ฃผ๋ฌธํ•˜๊ธฐ">
<input type="reset" value="๋‹ค์‹œ ์ž‘์„ฑ">
</div>

 

 

-์ฒ˜์Œ์—” ์ด๋žฌ๋Š”๋ฐ css๋ฅผ ์ ์šฉํ•˜๋‹ˆ๊นŒ ํ›จ์”ฌ ๊น”๋”ํ•ด์กŒ๋‹ค.

 

 

<style>
.container {
	width:600px;
	margin:0 auto;
}

ul { /* ์ˆœ์„œ์—†๋Š” ๋ชฉ๋ก์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
	list-style-type: none; /* ๋ถˆ๋ฆฟ ์—†์•ฐ */
}

label.title { /* class=title์ธ label์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
	font-weight: bold; /* ๊ตต์€ ๊ธ€์ž */
	width: 80px; /* ๋„ˆ๋น„ 80px */
	float: left; /* ์™ผ์ชฝ๋ถ€ํ„ฐ ๋ฐฐ์น˜ */
}

div.centered { /* class=centered์ธ div์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
	text-align: center; /* ๊ฐ€์šด๋ฐ ์ •๋ ฌ */
}

fieldset { /* ํ•„๋“œ์…‹์— ์ ์šฉํ•  ์Šคํƒ€์ผ*/
	margin: 15px 10px; /* ์ƒํ•˜ ๋งˆ์ง„ 15xp, ์ขŒ์šฐ ๋งˆ์ง„ 10px */
}

fieldset legend { /* ํ•„๋“œ์…‹์˜ ์ œ๋ชฉ */
	font-weight: bold; /* ๊ตต์€ ๊ธ€์ž */
	font-size: 18px; /* ๊ธ€์ž ํฌ๊ธฐ 18px */
	color: purple; /* ๊ธ€์ž์ƒ‰ ์ž์ฃผ */
}

ul li { /* ๋ชฉ๋ก์˜ ๊ฐ ํ•ญ๋ชฉ */
	margin-bottom: 10px; /* ์•„๋ž˜ ๋งˆ์ง„ 10px */
}
</style>

 

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title> ์ฃผ๋ฌธ์„œ ์ž‘์„ฑํ•˜๊ธฐ</title>
	<style>
		.container {
			width:600px;
			margin:0 auto;
		}
		ul { /* ์ˆœ์„œ์—†๋Š” ๋ชฉ๋ก์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
			list-style-type: none; /* ๋ถˆ๋ฆฟ ์—†์•ฐ */
		}

		label.title { /* class=title์ธ label์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
			font-weight: bold; /* ๊ตต์€ ๊ธ€์ž */
			width: 80px; /* ๋„ˆ๋น„ 80px */
			float: left; /* ์™ผ์ชฝ๋ถ€ํ„ฐ ๋ฐฐ์น˜ */
		}

		div.centered { /* class=centered์ธ div์— ์ ์šฉํ•  ์Šคํƒ€์ผ */
			text-align: center; /* ๊ฐ€์šด๋ฐ ์ •๋ ฌ */
		}

		fieldset { /* ํ•„๋“œ์…‹์— ์ ์šฉํ•  ์Šคํƒ€์ผ*/
			margin: 15px 10px; /* ์ƒํ•˜ ๋งˆ์ง„ 15xp, ์ขŒ์šฐ ๋งˆ์ง„ 10px */
		}

			fieldset legend { /* ํ•„๋“œ์…‹์˜ ์ œ๋ชฉ */
				font-weight: bold; /* ๊ตต์€ ๊ธ€์ž */
				font-size: 18px; /* ๊ธ€์ž ํฌ๊ธฐ 18px */
				color: purple; /* ๊ธ€์ž์ƒ‰ ์ž์ฃผ */
			}

		ul li { /* ๋ชฉ๋ก์˜ ๊ฐ ํ•ญ๋ชฉ */
			margin-bottom: 10px; /* ์•„๋ž˜ ๋งˆ์ง„ 10px */
		}
	</style>	
</head>
<body>
	<div class="container">
		<h1>์ƒํ’ˆ ์ฃผ๋ฌธ์„œ</h1>
		<form>
			<fieldset>
				<legend>๊ฐœ์ธ ์ •๋ณด</legend>
				<ul>
					<li>
						<label for="uname" class="title">์ด๋ฆ„</label>
						<input type="text" id="uname" placeholder="์—ฌ๋ฐฑ์—†์ด ์ž…๋ ฅ" required>
					</li>
					<li>
						<label for="tel1" class="title">์—ฐ๋ฝ์ฒ˜</label>
						<input type="tel" id="tel1" placeholder="์—ฐ๋ฝ๊ฐ€๋Šฅํ•œ ๋ฒˆํ˜ธ">
					</li>
				</ul>
			</fieldset>
			<fieldset>
				<legend>๋ฐฐ์†ก์ง€ ์ •๋ณด</legend>
				<ul>
					<li>
						<label for="addr" class="title">์ฃผ์†Œ</label>
						<input type="text" size="40" id="addr" required>
					</li>
					<li>
						<label for="tel2" class="title">์ „ํ™”๋ฒˆํ˜ธ</label>
						<input type="tel" id="tel2" required>
					</li>
					<li>
						<label for="comment" class="title">๋ฉ” ๋ชจ</label>
						<textarea cols="40" rows="3" id="comment"></textarea>
					</li>
				</ul>
			</fieldset>
			<fieldset>
				<legend>์ฃผ๋ฌธ ์ •๋ณด</legend>
				<ul>
					<li>
						<label><input type="checkbox">๊ณผํ…Œ๋ง๋ผ ์•ˆํ‹ฐ๊ตฌ์•„ (100g) </label>
						<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
					</li>
					<li>
						<label><input type="checkbox">์ธ๋„๋„ค์‹œ์•„ ๋งŒ๋ธ๋ง (100g) </label>
						<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
					</li>
					<li>
						<label><input type="checkbox">ํƒ๋ผ๋Š”๋„๋‹ค(๋ธ”๋ Œ๋”ฉ) (100g) </label>
						<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
					</li>
				</ul>
			</fieldset>
			<div class="centered">
				<input type="submit" value="์ฃผ๋ฌธํ•˜๊ธฐ">
				<input type="reset" value="๋‹ค์‹œ ์ž‘์„ฑ">
			</div>
		</form>
	</div>
</body>
</html>
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'HTML5 & CSS3' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML5 & CSS3] ์ˆ™์ œ (ํŽ˜์Šคํ‹ฐ๋ฒŒ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ)  (0) 2021.02.03
[HTML5 & CSS3] ํผ ๊ด€๋ จ ํƒœ๊ทธ๋“ค - ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ๋‚˜์—ดํ•ด ๋ณด์—ฌ์ฃผ๊ธฐ  (0) 2021.02.02
[HTML5 & CSS3] <input> ํƒœ๊ทธ์˜ ๋‹ค์–‘ํ•œ ์†์„ฑ  (0) 2021.01.29
[HTML5 & CSS3] <input> ํƒœ๊ทธ  (0) 2021.01.29
[HTML5 & CSS3] Form  (0) 2021.01.29

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”