728x90
1. HTML rel ์์ฑ (<link> tag)
๊ณผ๊ฑฐ CSS ๊ณต๋ถํ๋ฉด์ stylesheet๋ฅผ ๊ณต๋ถํด๋ดค๊ณ , W3School์์ ๋์ค๋ Favicon ์์ ์์๋ icon์ ์ฌ์ฉํ๋ค.
<!doctype html>
<head>
<title>HTML Example</title>
<!-- type: ๋ฏธ๋์ด ํ์
, ๊ผญ ๋ช
์ํด์ฃผ์ด์ผ ํ๋ค. -->
<link rel="icon" type="image/x-icon" href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbeJ1V8%2FbtrrmeSZW7U%2F8VPnZxDQ7I0oEIkxhqpUp1%2Fimg.jpg">
</head>
<body>
</body>
</html>
[์ถ์ฒ]
http://tcpschool.com/html-tag-attrs/link-type
2. HTML Table Tag
- ํ ์ด๋ธ ์์ฑ
| ํ๊ทธ | ์ค๋ช |
| <table> | ํ ์ด๋ธ tag |
| <th> | ํ ์ด๋ธ header |
| <tr> | ํ ์ด๋ธ ํ |
| <td> | ํ ์ด๋ธ ์ด |
- ํ ์ด๋ธ ์์ฑ
| ์์ฑ๋ช | ์์ฑ ๊ฐ | ์ค๋ช |
| align | left, center, right | ํ ์ด๋ธ ์ ๋ ฌ ๋ฐฉ๋ฒ |
| bdcolor | rgb(x,x,x), #xxxx, ์์ ๋ช | ํ ์ด๋ธ ๋ฐฐ๊ฒฝ์ |
| border | 1, 0 | ํ ๋๋ฆฌ ์ฌ์ฉํ ์ง ์ํ ์ง |
| cellingpadding | ํฝ์ | ์ ๊ฒฝ๊ณ ์ฌ์ด์ ๊ณต๊ฐ |
| cellspacing | ํฝ์ | ์ ๊ณผ ์ ์ฌ์ด์ ๊ณต๊ฐ |
| frame | void, above, below, hsides, lhs, rhs, vsides, box, border | ๋ฐ๊นฅ์ชฝ ํ ๋๋ฆฌ ๋ช ์ |
| rules | none, groups, rows, cols, all | ์์ชฝ ํ ๋๋ฆฌ ๋ช ์ |
| summary | ํ ์คํธ | ์ฝํ ์ธ ๊ฐ์ ๋ช ์ |
| width | ํฝ์ , % | ํ ์ด๋ธ ๋๋น ๋ช ์ |
| border-collapse | seperate: ๊ฐ๊ฒฉ ๋๊ธฐ collapse: ๊ฐ๊ฒฉ ์์ ๊ธฐ initial: ๊ธฐ๋ณธ ๊ฐ inherit: ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์ |
ํ
์ด๋ธ ํ
๋๋ฆฌ์ ์
ํ
๋๋ฆฌ ์ฌ์ด ๊ฐ๊ฒฉ |
| border-radius | ํฝ์ | ๋ฅ๊ทผ ํ ์ด๋ธ |
| border-style |  |
ํ ์ด๋ธ ์คํ์ผ |
728x90
<!doctype html>
<head>
<title>HTML Example</title>
<!-- type: ๋ฏธ๋์ด ํ์
, ๊ผญ ๋ช
์ํด์ฃผ์ด์ผ ํ๋ค. -->
<link rel="icon" type="image/x-icon" href="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbeJ1V8%2FbtrrmeSZW7U%2F8VPnZxDQ7I0oEIkxhqpUp1%2Fimg.jpg">
<style>
th, td{
border: 1px solid black;
/* ์ฌ์ด ๊ฐ๊ฒฉ ์์ ๊ธฐ */
border-collapse: collapse;
border-radius: 10px;
border-style: dashed;
}
</style>
</head>
<body>
<!-- table width -->
<table style="width: 50%;">
<tr>
<!-- table column width -->
<th style="width: 50%;">์ํ๋ฒณ</th>
<th>์ฝ๋ ์๋ฆฌ</th>
</tr>
<tr style="height: 80px;"><!-- table row Height -->
<td>A a</td>
<td>์์ด</td>
</tr>
</table>
</body>
</html>
- Vertical Table Headers
<!doctype html>
<head>
<title>HTML Example</title>
<style>
th, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- table width -->
<table>
<tr>
<th>๋ํ๊ต</th>
<td>A university</td>
<td>B university</td>
</tr>
<tr>
<th>ํ๋ถ</th>
<td>๊ณตํ๋ถ</td>
<td>๊ณตํ๋ถ</td>
</tr>
<tr>
<th>์ ๊ณต</th>
<td>์ ์๊ณตํ๊ณผ</td>
<td>์ปดํจํฐ๊ณตํ๊ณผ</td>
</tr>
</table>
</body>
</html>
-Header for Multiple Columns
| <th> tag์ ์์ | ์ค๋ช |
| colspan | header of multiple columns ๊ฐ ๊ฐ๋ฅ |
-Table Caption ( <caption> tag )
<table>
<caption> ๋ํ๊ต ํ
์ด๋ธ </caption>
<tr>
<th colspan="3">UNIVERSITY</th>
</tr>
<tr>
<th>๋ํ๊ต</th>
<td>A university</td>
<td>B university</td>
</tr>
<tr>
<th>ํ๋ถ</th>
<td>๊ณตํ๋ถ</td>
<td>๊ณตํ๋ถ</td>
</tr>
<tr>
<th>์ ๊ณต</th>
<td>์ ์๊ณตํ๊ณผ</td>
<td>์ปดํจํฐ๊ณตํ๊ณผ</td>
</tr>
</table>
[์ถ์ฒ]
728x90
'Programming Language > HTML | CSS | JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML 9์ผ์ฐจ ๊ณต๋ถ <picture> Tag (0) | 2022.01.20 |
|---|---|
| HTML 8์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.20 |
| HTML 7์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.18 |
| HTML 6์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.13 |
| HTML 5์ผ์ฐจ ๊ณต๋ถ (0) | 2022.01.12 |
