01
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์์ฝ์ ๋ณด</title>
<style>
ul {
list-style:none;
}
li {
line-height:50px;
}
label {
width:60px;
float:left;
}
</style>
</head>
<body>
<form>
<h1>์์ฝ ์ ๋ณด</h1>
<ul>
<li>
<label for="u-name">์ด ๋ฆ </label>
<input type="text" id="u-name">
</li>
<li>
<label for="u-tel">ํด๋ํฐ </label>
<input type="tel" id="u-tel">
</li>
<li>
<label for="u-mail">์ด๋ฉ์ผ </label>
<input type="email" id="u-mail">
</li>
<li>
<input type="button" value="์์ฝํ๊ธฐ">
</li>
</ul>
</form>
</body>
</html>
02
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ์ง์์</title>
<style>
#container {
width:520px;
border:1px solid black;
padding:20px 40px;
margin:0 auto;
}
fieldset { margin-bottom:15px; }
legend { font-weight:bold; }
ul {list-style-type: none;}
li { line-height:30px;}
</style>
</head>
<body>
<div id="container">
<h1>ํ๋ฐํธ์๋ ๊ฐ๋ฐ์ ์ง์์ </h1>
<p>HTML, CSS, Javascript์ ๋ํ ๊ธฐ์ ์ ์ดํด์ ๊ฒฝํ์ด ์๋ ๋ถ์ ์ฐพ์ต๋๋ค.</p>
<hr>
<form>
<h4>๊ฐ์ธ์ ๋ณด</h4>
<ul>
<li>
<label for="name">์ด๋ฆ </label>
<input type="text" id="name" placeholder="๊ณต๋ฐฑ์์ด ์
๋ ฅํ์ธ์">
</li>
<li>
<label for="tel">์ฐ๋ฝ์ฒ </label>
<input type="tel" id="tel">
</li>
</ul>
<h4>์ง์ ๋ถ์ผ</h4>
<ul>
<li>
<label><input type="radio" name="field" value="webpb"> ์น ํผ๋ธ๋ฆฌ์ฑ</label>
</li>
<li>
<label><input type="radio" name="field" value="webdp"> ์น ์ ํ๋ฆฌ์ผ์ด์
๊ฐ๋ฐ</label>
</li>
<li>
<label><input type="radio" name="field" value="web"> ๊ฐ๋ฐ ํ๊ฒฝ ๊ฐ์ </label>
</li>
</ul>
<h4>์ง์ ๋๊ธฐ</h4>
<label><textarea cols="60" rows="5" placeholder="๋ณธ์ฌ ์ง์ ๋๊ธฐ๋ฅผ ๊ฐ๋ตํ ์จ ์ฃผ์ธ์."></textarea></label>
<br>
<button type="submit">์ ์ํ๊ธฐ</button>
<button type="reset">๋ค์ ์ฐ๊ธฐ</button>
</form>
</div>
</body>
</html>
< ์ฐธ๊ณ >
Do it! HTML5+CSS3 ์น ํ์ค์ ์ ์
โป ํด๋น ๊ธ์ ์ต๋ ๋ชฉ์ ์ผ๋ก ์์ฑ๋ ๊ธ์ ๋๋ค โป
๋ฐ์ํ
'๊ฐ์ธ๊ณต๋ถ > HTML5 + CSS3' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML+CSS][CSS ๊ธฐ์ด] 02 - ์ฃผ์ ์ ํ์ (0) | 2020.06.23 |
|---|---|
| [HTML+CSS][CSS ๊ธฐ์ด] 01 - ์คํ์ผ๊ณผ ์คํ์ผ ์ํธ (0) | 2020.06.22 |
| [HTML+CSS][ํผ ๊ด๋ จ ํ๊ทธ๋ค] 05 - ๋ค์ํ ํผ ์์๋ค (0) | 2020.06.20 |
| [HTML+CSS][ํผ ๊ด๋ จ ํ๊ทธ๋ค] 04 - ์ฌ๋ฌ ๋ฐ์ดํฐ ๋์ดํด ๋ณด์ฌ์ฃผ๊ธฐ (0) | 2020.06.19 |
| [HTML+CSS][ํผ ๊ด๋ จ ํ๊ทธ๋ค] 03 - <input> ํ๊ทธ์ ๋ค์ํ ์์ฑ (0) | 2020.06.18 |
๋๊ธ