HTML ํ ์ด๋ธ(Table) ์ ๋ชฉ ๋ง๋ค๊ธฐ - <caption>
HTML <caption>
- ํ<table>๋ง๋ค์์ ๋, ํ ์ด๋ธ์ ์ ๋ชฉ์ด๋ ์งง์ ์ค๋ช ์ ๋ถ์ผ ๋ ์ฌ์ฉ!
- <caption>~</caption> ์ด๋ ๊ฒ ํด๋ก์ง ํ๊ทธ๋ฅผ ์์ฑํด์ผํฉ๋๋ค.
- ์๋ฌด๋ฐ CSSํจ๊ณผ๋ฅผ ๋ฃ์ง ์์ผ๋ฉด ํ ๊ฐ์ด๋ฐ ์ ๋ ฌ๋ก ์์นํฉ๋๋ค.
- <caption>~</caption> ์์ ์์ฑํ ๋ด์ฉ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ ์์ ์์นํ์ง๋ง, ์์น๋ฅผ ๋ฐ๊ฟ ์ ์์ต๋๋ค.
→ (โป CSS์ caption-side๋ก ์์น๋ฅผ ์ ํ ์ ์์ต๋๋ค.)
[ caption ๊ธฐ๋ณธ ํํ ]
<h2>ํ
์ด๋ธ ์ ๋ชฉ ๋ฃ๊ธฐ</h2>
<table>
<caption>ํ์ ์ ๋ชฉ ์์น</caption>
<tr>
<th>์ ๋ชฉ</th>
<th>์ ๋ชฉ</th>
</tr>
<tr>
<td>๋ด์ฉ</td>
<td>๋ด์ฉ</td>
</tr>
</table>
[ ์คํ์ ํ๋ฉด ]
ใด "์๊น์ด ์๋ค์ด๊ฐ ์์ด์ ํ
์ด๋ธ์ ํํ๊ฐ ๊ตฌ๋ถ์ด ์ ์๊ฐ์์ฃ ?"
์๋์ css ์์๋ฅผ ์ ๊น ๋ฃ์ด ํ
์ด๋ธ ๊ตฌ๋ถ๋ง ํด๋ณผ๊ป์~๐
(↓↓↓css๋ ๋์ค์ ๋ฐฐ์ธํ ๋ ์ง๊ธ์ ํ ์ด๋ธ์ ์์ญ๋ง ํ์ธํ๊ธฐ!๐คฉ↓↓↓)
[ table์ ๊พธ๋ฐ์ถ๊ฐ code ]
<body>
<h2>ํ
์ด๋ธ ์ ๋ชฉ ๋ฃ๊ธฐ</h2>
<table style="width:100%">
<!-- <table> -->
<caption>ํ์ ์ ๋ชฉ ์์น</caption>
<tr style="background-color: lightskyblue;">
<th>์ ๋ชฉ</th>
<th>์ ๋ชฉ</th>
</tr>
<tr>
<td>๋ด์ฉ</td>
<td>๋ด์ฉ</td>
</tr>
</table>
</body>
[ ์คํ์ ํ๋ฉด ]
๐ ์ค์ ๋ก ์์ฉํด์ ๋ง๋ค์ด๋ณผ๊น์? ๐
ใด ์ด์ ์ค๋ ๋ฐฐ์ด <table>ํ๊ทธ๋ก ์ค๋ ํ๋ฃจ๊ณํํ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์!๐