์ฐ์ ๊ธฐ๋ก ๐ช
HTML ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - 4 ๋ณธ๋ฌธ
๋ง์ง๋ง! ์ด์ HTML์ ํ, form ๋ถ๋ถ์ ์ ๋ฆฌํ ๊ฒ์ด๋ค.
HTML - ํ
https://opentutorials.org/course/2039/10949
์ฐ์ ์์ 1์ ๋ถ์ํด๋ณด์.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<tr>
<td>์ด๋ฆ</td> <td>์ฑ๋ณ</td> <td>์ฃผ์</td>
</tr>
<tr>
<td>์ต์งํ</td> <td>๋จ</td> <td >์ฒญ์ฃผ</td>
</tr>
<tr>
<td>์ต์ ๋น</td> <td>์ฌ</td> <td>์ฒญ์ฃผ</td>
</tr>
</table>
</body>
</html>
ํ๋ฅผ ๋ง๋๋ ค๋ฉด ์ฐ์ ์ ์ฒด๋ฅผ <table></table>ํ๊ทธ๋ก ๊ฐ์ธ ์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ ํ์ ๋ฐ์ดํฐ๋ค์ <tr></tr>ํ๊ทธ๋ก ๊ฐ์ธ์ฃผ์ด์ผ ํ๋ค.(์ฌ๊ธฐ์ r์ row๋ฅผ ์๋ฏธํ๋ค.) ๊ทธ๋ฆฌ๊ณ ๊ฐ ๋ฐ์ดํฐ๋ค์ <td></td>๋ก ๊ฐ์ธ์ค๋ค.
border์ ํ์ ํ ๋๋ฆฌ๋ฅผ ์๋ฏธํ๋๋ฐ ์ซ์๊ฐ ํด์๋ก ๊ตต๊ธฐ๊ฐ ๊ตต์ด์ง๋ค.
์ฌ๊ธฐ์ ์ด๋ฆ ์ฑ๋ณ ์ฃผ์ ์ ๋ฐ ๋ด์ฉ์ ์ฑ๊ฒฉ์ด ๋ค๋ฅด๋ค. ์ด๊ฒ์ ํ๊ทธ๋ก ํํํด์ฃผ๋ ๋ฐฉ๋ฒ์ด ์๋๋ฐ thead, tbodyํ๊ทธ์ด๋ค. ๊ฐ๋จํ๊ฒ ๊ฐ์ ๋ด์ฉ๋ผ๋ฆฌ ๋ฌถ์ด์ฃผ๋ฉด ๋๋ค!
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>์ด๋ฆ</th> <th>์ฑ๋ณ</th> <th>์ฃผ์</th> <th>ํ๋น</th>
</tr>
</thead>
<tbody>
<tr>
<td>์ต์งํ</td> <td>๋จ</td> <td >์ฒญ์ฃผ</td> <td>1000</td>
</tr>
<tr>
<td>์ต์ ๋น</td> <td>์ฌ</td> <td>์ฒญ์ฃผ</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>ํฉ๊ณ</td> <td></td> <td></td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
head์ foot๋ฑ์ ์์๋ฅผ ๋ฐ๊ฟ๋ ํ์ ์์๊ฐ ๋ฐ๋์ง ์๋๋ค. ์ ๋ด์ฉ์ ์ ์ฉํ ์นํ์ด์ง์ ๋ชจ์ต์ ์๋์ ๊ฐ์์ง๋ค.
์๋๋ ์ธ๋ฒ์งธ ์์ ์ ์ฝ๋์ธ๋ฐ ์ง๊ด์ ์ผ๋ก ํ๊ณผ ํ์ ํฉ์น๋ค. ์ด๊ณผ ์ด์ ํฉ์น๋ค๋ ๊ฐ๋ ์ผ๋ก ์ดํดํ๋ฉด ๋๋ค.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>์ด๋ฆ</th> <th>์ฑ๋ณ</th> <th>์ฃผ์</th> <th>ํ๋น</th>
</tr>
</thead>
<tbody>
<tr>
<td>์ต์งํ</td> <td>๋จ</td> <td rowspan="2">์ฒญ์ฃผ</td> <td>1000</td>
</tr>
<tr>
<td>์ต์ ๋น</td> <td>์ฌ</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">ํฉ๊ณ</td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
์ฆ
์๋์ ๊ฐ์ด ๋๋๊น ํ๊ณผ ํ์ ํฉ์น๋ฉด ์ธ๋ก๋ณํฉ, ์ด๊ณผ ์ด์ ํฉ์น๋ฉด ๊ฐ๋ก ๋ณํฉ์ด ๋๋ ๊ฒ์ด๋ค.
HTML - form
opentutorials.org/course/2039/10944
์์ฑ๋ ์นํ์ด์ง์ ๋ชจ์ต์ ์๋์ ๊ฐ๋ค.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>์์ด๋ : <input type="text" name="id"></p>
<p>๋น๋ฐ๋ฒํธ : <input type="password" name="pwd"></p>
<p>์ฃผ์ : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
์์ ์ ์ฝ๋๋ ์์ ๊ฐ๋ค. ์ฌ๊ธฐ์ input type๋ฅผ text๋ก ํ๋ฉด ์๋์ ๊ฐ์ด ์ ๋ ฅํ ๊ฐ์ด ๋ณด์ด๊ณ , password๋ก ํ๋ฉด ๋น๋ฐ๋ฒํธ ๋ถ๋ถ๊ณผ ๊ฐ์ด ์ ๋ ฅํ ๋ด์ฉ์ ํ์ธํ ์ ์๊ฒ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ ์ถ๋ฒํผ์ <input type="submit">์ด๋ ๊ฒ ๋ง๋ค ์ ์๋ค.
์ด๋ ๊ฒ ์ ๋ ฅํ๊ณ ์ ์ถ์ ๋๋ฅด๋ฉด?
์ด๋ ๊ฒ ๋งํฌ์ ๋ด๊ฐ ์ ๋ ฅํ ๊ฒ์ด ์ ์ ๋ฌ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
'WEB > HTML+CSS+JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
CSS ๋ด์ฉ์ ๋ฆฌ - 2 (0) | 2020.12.29 |
---|---|
CSS ๋ด์ฉ์ ๋ฆฌ - 1 (0) | 2020.12.22 |
HTML ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - 3 (0) | 2020.12.06 |
HTML ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ -2 (0) | 2020.12.04 |
HTML ๊ธฐ์ด ๋ด์ฉ ์ ๋ฆฌ - 1 (0) | 2020.12.02 |