๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
CODING/WEB

[HTML] ํ‘œ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ& ์ด๋ฏธ์ง€

by ๋ฐํ†จ๋งนํ†จ 2020. 9. 24.
728x90
728x90

๐Ÿ”ถ ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ

<table> /<table> 

 - border๋ฅผ ์„ค์ •ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ์„ ์ด ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Œ

 

<tr>/<tr> - ํ–‰ row 

 - ์œ„์˜ ์‚ฌ์ง„์—์„œ๋Š” ์ดˆ๋ก ๋ฐ•์Šค

<th> ์…€ ์ œ๋ชฉ ( row / col ์ƒ๊ด€์—†์ด ) 

 - ์œ„์˜ ์‚ฌ์ง„์—์„œ๋Š” [ "์ด๋ฆ„" , "์ฃผ์†Œ" , "์—ฐ๋ฝ์ฒ˜", "์ž๊ธฐ์†Œ๊ฐœ" ]

<td> - ์…€ ( cell )

- ์œ„์˜ ์‚ฌ์ง„์—์„œ๋Š” ๋ชจ๋“  ๋นˆ์นธ

 

[ th , td ์†์„ฑ - colspan/rowspan ]

โœ”๏ธ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์˜ˆ์‹œ : <th colspan="2" rowspan="2"> ๊ตฌ๋ถ„ </th>

<colspan>
 - column ํ•ฉ์น  ๋•Œ ์‚ฌ์šฉ
<rowspan> 
 - row ํ•ฉ์น  ๋•Œ ์‚ฌ์šฉ

 

<caption>

 - ํ‘œ ์ œ๋ชฉ์œผ๋กœ [ ์œ„์ชฝ ์ค‘์•™ ]์— ํ‘œ์‹œ 
 - ์•„๋ž˜์˜ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ๋‚˜์˜ด 

<figure>, <figcaption> 

 - ํ‘œ ์ œ๋ชฉ์œผ๋กœ figcaption์˜ ์œ„์น˜์— ๋”ฐ๋ผ ์œ„๋‚˜ ์•„๋ž˜์— ์ œ๋ชฉ ํ‘œ์‹œ

<figcaption>์ด table ์œ„์— ์žˆ์„ ๋•Œ
<figcaption>์ด table ์•„๋ž˜์— ์žˆ์„ ๋•Œ

[ ํ‘œ ๊ตฌ์กฐ ์ •์˜ ]

 

<thead - ์ œ๋ชฉ>, <tbody - ๋‚ด์šฉ> , <tfoot - ์š”์•ฝ>

์‹œ๊ฐ ์žฅ์• ์ธ๋„ ํ™”๋ฉด ํŒ๋…๊ธฐ๋ฅผ ํ†ตํ•ด ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ์‰ฝ๊ฒŒ ์ดํ•ด ๊ฐ€๋Šฅ

- ํ‘œ์˜ ๋‚ด์šฉ์ด ๊ธธ์–ด์งˆ ๊ฒฝ์šฐ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜๋ฉด ์ œ๋ชฉ๊ณผ ๋ฐ”๋‹ฅ ๋ถ€๋ถ„์„ ๊ณ ์ •ํ•˜๋ฉด ๋ณธ๋ฌธ๋งŒ ์Šคํฌ๋กค๋˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์Œ

์•„๋ž˜์™€ ๊ฐ™์ด ์Šคํƒ€์ผ๋„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ์Œ.

์ฃผํ™ฉ๋ฐ•์Šค๋Š” <thead> ํฐ์ƒ‰์€ <tbody>

 

<col>, <colgroup>

 - column๋ผ๋ฆฌ ๋ฌถ์–ด์„œ ์Šคํƒ€์ผ ์ง€์ • ๊ฐ€๋Šฅ 
 - <caption> ํƒœ๊ทธ ๋’ค์— <tr><td> ํƒœ๊ทธ ์ „์— ์‚ฌ์šฉ  โžก๏ธ  captionโ–ถ๏ธ colgroup, col โ–ถ๏ธ tr , th, td ์ˆœ
 - colgroup ํƒœ๊ทธ ์•ˆ <col> ๊ฐœ์ˆ˜ + ๋‹จ๋… <col> ๊ฐœ์ˆ˜ = ํ‘œ์˜ ์—ด ๊ฐœ์ˆ˜
 <col>
     - ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์Œ 
     - span ์†์„ฑ์œผ๋กœ ์—ฌ๋Ÿฌ column ๋ฌถ์–ด์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ 


<img> ํƒœ๊ทธ

src ์†์„ฑ

- src = "url" 
- ์ด๋ฏธ์ง€ ํŒŒ์ผ ๊ฒฝ๋กœ
- html ๊ธฐ์ค€์œผ๋กœ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ ์ง€์ • โžก๏ธ html๊ณผ ์ด๋ฏธ์ง€๊ฐ€ ๊ฐ™์€ ํด๋”์— ์žˆ๋‹ค๋ฉด ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ด๋ฆ„๋งŒ ์ ์Œ
- ์›น ์‚ฌ์ดํŠธ์— ์žˆ๋Š” ์ด๋ฏธ์ง€์˜ ์ฃผ์†Œ๋กœ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ โžก๏ธ http:// ํฌํ•จํ•œ ์ฃผ์†Œ
alt ์†์„ฑ

- alt = " "
- ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋Œ€์ฒด ํ…์ŠคํŠธ
- ํ™”๋ฉด ๋‚ญ๋…๊ธฐ์—์„œ ์ด๋ฏธ์ง€ ๋Œ€์‹  ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ฝ์–ด์คŒ 
width, height ์†์„ฑ

- ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์กฐ์ •
- ์ด ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์›๋ž˜ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋Œ€๋กœ ํ‘œ์‹œ
- ์ด ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋”๋ผ๋„ ์ด๋ฏธ์ง€์˜ ์šฉ๋Ÿ‰์€ ๊ทธ๋Œ€๋กœ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋งŒ ์กฐ์ •

 

[ <figure>, <figcaption> - ์ด๋ฏธ์ง€ ์„ค๋ช…๊ธ€ ๋ถ™์ด๊ธฐ ]

<figure> - ์„ค๋ช…๊ธ€์„ ๋ถ™์ผ ๋Œ€์ƒ ์ง€์ •

<figcation> - ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ํ…์ŠคํŠธ  โžก๏ธ <table> ํƒœ๊ทธ์—์„œ ์ผ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ <figure> ํƒœ๊ทธ ์•ˆ์— ์“ฐ๋ฉด ๋จ 
728x90

๋Œ“๊ธ€