<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ง์</title>
</head>
<body>
<fieldset>
<h1>ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ์ง์์</h1>
<div>HTML, CSS, ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ ์ ์ดํดํ๊ณ ์ค๋ฌด ๊ฒฝํ์ด ์๋ ๋ถ์ ์ฐพ์ต๋๋ค.</div>
<hr>
<section> <!-- ์์
์์ ํ ๋ฌถ์์ผ๋ก ๋ฌถ์ด์ค -->
<div> <h3>๊ฐ์ธ์ ๋ณด</h3> <!-- ์์
์์๋ <b>๊ฐ์ธ์ ๋ณด</b>๋ก ํ์ <p>ํ๊ทธ๋ ๊ฐ๋ฅ--></div>
<ul>
<li>
<label for="user-name" >์ด๋ฆ</label>
<input type="text" id="user-name" placeholder="๊ณต๋ฐฑ์์ด ์
๋ ฅํ์ธ์." />
</li>
<li>
<label for="user-number">์ฐ๋ฝ์ฒ</label>
<input type="number" id="user-number" />
</li>
</ul>
</section>
<h3>์ง์ ๋ถ์ผ</h3> <!-- <p><b>์ง์ ๋ถ์ผ</b<p> -->
<ul>
<li>
<input type="radio" id="web" name="web" />
<label for="web"> ์น ํผ๋ธ๋ฆฌ์ฑ </label>
</li>
<li>
<input type="radio" id="web-dev" name="web" />
<label for="web-dev"> ์น ์ดํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ </label>
</li>
<li>
<input type="radio" id="web-dev2" name="web" />
<label for="web-dev2">๊ฐ๋ฐ ํ๊ฒฝ ๊ฐ์ </label>
</li>
</ul>
<h3>์ฃผ๋ฌธํ ์ํ์ ์ ํํด ์ฃผ์ธ์.</h3>
<ul>
<li>
<label><input type="checkbox" /> ์ ๋ฌผ์ฉ 3kg</label>
<label><input type="number" /> ๊ฐ </label>
</li>
<li>
<label><input type="checkbox" /> ์ ๋ฌผ์ฉ 5kg </label>
<label><input type="range" /></label>
</li>
<li>
<label><input type="checkbox" /> ๊ฐ์ ์ฉ 3kg</label>
<label><input type="number" value="1"/> ๊ฐ </label>
</li>
<li>
<label><input type="checkbox" /> ๊ฐ์ ์ฉ 5kg </label>
<label><input type="number" /> ๊ฐ</label>
</li>
</ul>
<h3>ํฌ์ฅ ์ ํ</h3>
<ul>
<li>
<label><input type="radio" name="present"> ์ ๋ฌผ ํฌ์ฅ</label>
</li>
<li>
<label><input type="radio" name="present"> ์ ๋ฌผ ํฌ์ฅ ์ํจ</label>
</li>
</ul>
<section>
<h3>์ง์ ๋๊ธฐ</h3>
<label>
<textarea rows="2" cols="5" placeholder="๋ณธ์ฌ ์ง์ ๋๊ธฐ๋ฅผ ๊ฐ๋ตํ ์จ๋ผ"></textarea>
</label>
<!-- rows : ์ธ๋ก / cols : ๊ฐ๋ก -->
</section>
<section>
<button>์ ์ํ๊ธฐ</button> <!-- type="submit"์ด ๊ธฐ๋ณธ -->
<input type="reset" value="๋ค์์ฐ๊ธฐ" />
</section>
</fieldset>
</body>
</html>
