๋ค์ด๊ฐ๊ธฐ
HTML ํ์ด์ง์์๋ ํ๊ทธ๋ฅผ ์ฌ์ฉํด ์ฌ์ฉ์์๊ฒ ์์๋ฅผ ๋ณด์ฌ์ค๋ค.
์ด์ HTML5 ํ์ค์์ ์ง์ํ๋ ๊ธฐ๋ณธ ํ๊ทธ๋ฅผ ์ดํด๋ณด์
| ๊ตฌ๋ถ | ํ๊ทธ | ์ค๋ช |
| ๊ธ์ ํ๊ทธ | h1 ~ h6 | ์ ๋ชฉ ๊ธ์ ์์ฑ |
| p, br, hr | ๋ณธ๋ฌธ ์์ฑ | |
| a | ํ์ดํผ๋งํฌ ์์ฑ | |
| b, i, small, sub, sup, ins, del | ๊ธ์ ๋ชจ์ ์ง์ | |
| ๋ชฉ๋ก ํ๊ทธ | ul/ol, li | ์์๊ฐ ์๋/์๋ ๋ชฉ๋ก ์์ฑ, ๋ชฉ๋ก ์์ ์์ฑ |
| ํ ์ด๋ธ ํ๊ทธ | table, tr, th, td | ํ ์์ฑ |
| ๋ฏธ๋์ด ํ๊ทธ | ima, audio, video | ์ด๋ฏธ์ง, ์ค๋์ค, ๋น๋์ค ์ฝ์ |
๐ ํ ์ด๋ธ ํ๊ทธ
ํ๋ฅผ ๋ง๋ค ๋๋ ํ ์ด๋ธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค.
- ํ ์ด๋ธ ํ๊ทธ -
| ํ๊ทธ | ์ค๋ช |
| table | ํ ์ฝ์ |
| tr | ํ์ ํ ( table row ) ์ฝ์ |
| th | ํ์ ์ ๋ชฉ ์ ( table heading ) ์์ฑ |
| td | ํ์ ์ผ๋ฐ ์ ( table data ) ์์ฑ |
- ์์ ) ์๊ฐํ ๋ง๋ค๊ธฐ -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์๊ฐํ ๋ง๋ค๊ธฐ</title>
</head>
<body>
<table border="0" cellspacing="0" width="750">
<tr align="center">
<td>
<image src="interior.jpg"></image>
</td>
</tr>
</table>
<br>
<table border="1" cellspacing="0">
<thead bgcolor="beige">
<tr align="center">
<th></th>
<th>์</th>
<th>ํ</th>
<th>์</th>
<th>๋ชฉ</th>
<th>๊ธ</th>
</tr>
</thead>
</tbody>
<tr align="center" height="30">
<td>1๊ต์</td>
<td>์ค๋ด๋์์ธ์คํ๋์ค</td>
<td>์ค๋ด๋์์ธ๋ฐฉ๋ฒ๋ก </td>
<td>์ค๋ด๋์์ธ์ํฌ์ต</td>
<td>์ค๋ด์ปดํจํฐ๋์์ธ</td>
<td>์ค๋ด๋์์ธํํ๊ธฐ๋ฒ</td>
</tr>
<tr align="center" height="30">
<td>2๊ต์</td>
<td>๋์์ธ์ฝํน</td>
<td>์ฐฝ์์ ์ฌ๊ณ ๋ฐฉ๋ฒ</td>
<td>๊ณต๊ฐ๋ก </td>
<td>ํ๋ฆฌ์ ํ
์ด์
๋์์ธ</td>
<td>ํฌํธํด๋ฆฌ์ค์ฐ๊ตฌ</td>
</tr>
</table>
</body>
</html>
<!-- ์ฌ์ฉํ ์ด๋ฏธ์ง ์ถ์ฒ: AHC SPA by FLYmingo located in Seoul,South Korea.-->
๐ ํ ์ด๋ธ ํ๊ทธ์ ์ฌ์ฉ๋๋ ์์ฑ
๐ค table, tr, td ๊ณตํต ์์ฑ
| width | table, tr, td ๋์ด |
| height | table, tr, td ๋์ด |
| bgcolor | table, tr, td ๋ฐํ์ |
| background | table, tr, td ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง |
| align | table, tr, td ์ํ์ ๋ ฌ |
| valign | table, tr, td ์์ง์ ๋ ฌ |
๐ค table ์๋ง ์๋ ์์ฑ
| border | ํ ์ด๋ธ ๊ฒฝ๊ณ์ ๋๊ป |
| bordercolor | ํ ์ด๋ธ ๊ฒฝ๊ณ์ ์์ |
| bordercolorllight | ํ ์ด๋ธ ๊ฒฝ๊ณ์ ์์์ ๋ฐ์ ๋ถ๋ถ |
| bordercolordark | ํ ์ด๋ธ ๊ฒฝ๊ณ์ ์์์ ์ด๋์ด ๋ถ๋ถ |
| cellpadding | ์ด ( ์ ) ๋ด๋ถ์์์ ๋ด์ฉ๋ฌผ์ด ๊ฒฝ๊ณ์ ์ผ๋ก๋ถํฐ ๋จ์ด์ ธ์ผ ํ ์ฌ๋ฐฑ |
| cellspacing | ๊ฐ ์ด ( ์ ) ๋ค ๊ฐ์ ๋จ์ด์ ธ์ผ ํ ์ฌ๋ฐฑ |
๐คth, td ์์ ์ฐ์ด๋ ์์ฑ
| colspan | ์นธ์ ์ด๋ก ํฉ์น๊ธฐ ( ์์ญ์ด ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ๋์ด๋๋ค. ) |
| rowspan | ์นธ์ ํ์ผ๋ก ํฉ์น๊ธฐ ( ์์ญ์ด ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ๋์ด๋๋ค. ) |
- ์์ ) ํ * ์ด ๋ณํฉ ํ ์์ฑ -
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<table border="1" cellspacing="0">
<tr bgcolor="beige">
<th colspan="2">์ค๋ด๊ณต๊ฐ๋์์ธ ๊ณผ๋ชฉ</th>
</tr>
<tr>
<th rowspan="3">์ค๋ด๋์์ธ</th>
<td>์ค๋ด๋์์ธ์คํ๋์ค</td>
</tr>
<tr>
<td>์ค๋ด๋์์ธ๋ฐฉ๋ฒ๋ก </td>
</tr>
<tr>
<td>์ค๋ด๋์์ธํํ๊ธฐ๋ฒ</td>
</tr>
<tr>
<th rowspan="5">๋์์ธ</th>
<td>๋์์ธ์ํฌ์ต</td>
</tr>
<tr>
<tr>
<td>๋์์ธ์ฝํน</td>
</tr>
<tr>
<td>์ฐฝ์์ ์ฌ๊ณ ๋ฐฉ๋ฒ</td>
</tr>
<tr>
<td>๊ณต๊ฐ๋ก </td>
</tr>
</tr>
</table>
</body>
</html>
01. http://www.kyobobook.co.kr/<๋์> HTML5 ์น ํ๋ก๊ทธ๋๋ฐ ์ ๋ฌธ
HTML5 ์น ํ๋ก๊ทธ๋๋ฐ ์ ๋ฌธ - ๊ต๋ณด๋ฌธ๊ณ
1. ์น ํ๋ก๊ทธ๋๋ฐ ์ฒซ ๊ฑธ์(1~2์ฅ) ์น๊ณผ HTML5 ํ์ค์ ์ญ์ฌ๋ฅผ ์ดํด๋ณด๊ณ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ถํฉ๋๋ค. HTML5์ ๊ธฐ๋ณธ ๊ตฌ์กฐ์ ์์ฑ๋ฒ, ๋๋ฒ๊น ๋ฐฉ๋ฒ์ ์์๋ด ๋๋ค.2. HTML5 ํ๊ทธ(3~4์ฅ) HTML5 ๊ธฐ๋ณธ ํ๊ทธ์ ๊ณต๊ฐ ๋ถํ
www.kyobobook.co.kr
02. https://zxchsr.tistory.com/ํ ์ด๋ธ ์์ฑ ์ค๋ช
[HTML] ํ ์ด๋ธ(TABLE) ์์ฑ
โ HTML ํ ์ด๋ธ(TABLE) ์์ฑ โ table ,tr, td ๊ณตํต ์์ฑ width table ,tr, td ๋์ด height table ,tr, td ๋์ด bgcolor table ,tr, td ๋ฐํ์ background table ,tr, td ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง align table ,tr, td ์ํ์ ๋ ฌ..
zxchsr.tistory.com
