Semantic Web, Semantic Tags

Jihyun-Jeonยท2022๋…„ 5์›” 25์ผ
0

HTML,CSS

๋ชฉ๋ก ๋ณด๊ธฐ
21/34

๐Ÿ”ถ Semantic Web, Semantic Tags

์ฐธ๊ณ  ์‚ฌ์ดํŠธ : https://poiemaweb.com/html5-semantic-web

Semantic Tags๋ž€?

Semantic์€ '์˜๋ฏธ์˜', '์˜๋ฏธ๋ก ์ ์ธ'์ด๋ผ๋Š” ๋œป์„ ๊ฐ€์ง„ ํ˜•์šฉ์‚ฌ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ž€ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ๋ฅผ ๋งํ•œ๋‹ค.

  • ์˜๋ฏธ
    div๋‚˜ span๊ณผ ๊ฐ™์ด ์˜๋ฏธ๊ฐ€ ์—†๋Š” ํƒœ๊ทธ๋Š” ํƒœ๊ทธ ์ด๋ฆ„๋งŒ ๋ณด๊ณ ๋Š” ์–ด๋–ค ๋‚ด์šฉ์ธ์ง€ ์ „ํ˜€ ์œ ์ถ”ํ•  ์ˆ˜๊ฐ€ ์—†๋Š” ๋ฐ˜๋ฉด, form, table, article ๋“ฑ ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ํƒœ๊ทธ๋Š” ๋‚ด์šฉ์„ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•œ๋‹ค.

  • ์žฅ์ 
    1) ๊ฒ€์ƒ‰์—”์ง„์ตœ์ ํ™”(SEO) ๐Ÿ” : ๊ฒ€์ƒ‰์—”์ง„์€ ํƒœ๊ทธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํŽ˜์ด์ง€ ๋‚ด ๊ฒ€์ƒ‰ ํ‚ค์›Œ๋“œ์˜ ์šฐ์„ ์ˆœ์œ„๋ฅผ ํŒ๋‹จํ•œ๋‹ค. ๊ฒ€์ƒ‰์—”์ง„์— ๋…ธ์ถœ์ด ์ž˜ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
    2) ๊ฐ€๋…์„ฑ์ด ์ข‹๋‹ค.


๐Ÿ”ถ "imgํƒœ๊ทธ"์™€ "divํƒœ๊ทธ์— background-image ์†์„ฑ ์‚ฌ์šฉ"์˜ ์ฐจ์ด์ 

์ฐธ๊ณ ์‚ฌ์ดํŠธ
1. https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
2. https://www.youtube.com/watch?v=xDFNvEwPYYY
3. https://daco2020.tistory.com/m/54

์‚ฌ์ดํŠธ์— ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์€ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.
<img> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ <div> ํƒœ๊ทธ์— background-image ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ.

๐Ÿ”† 1. ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์˜ ์ฐจ์ด์ 

  • imgํƒœ๊ทธ๋Š” semantic์  ์˜๋ฏธ๋ฅผ ๊ฐ–๋Š” ํƒœ๊ทธ์—ฌ์„œ, ์‚ฌ๋žŒ(๊ฐœ๋ฐœ์ž)์ด๋‚˜ ๊ธฐ๊ณ„(๊ฒ€์ƒ‰์—”์ง„ ๋“ฑ) ์ž…์žฅ์—์„œ ์ž˜ ์ฝํžŒ๋‹ค.
  • divํƒœ๊ทธ๋Š” semantic์  ์˜๋ฏธ๊ฐ€ ์—†์–ด์„œ ๊ฐ€๋…์„ฑ์ด ์•ˆ์ข‹๋‹ค.

๐Ÿ”† 2. ๊ฐ๊ฐ ์–ด๋– ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€์ง€

1) <img /> ํƒœ๊ทธ ํ™œ์šฉ

  • ๊ฒ€์ƒ‰ ์‹œ ๋…ธ์ถœ์ด ๋˜๋„๋ก ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ
  • ์ฝ˜ํ…์ธ ์— ๊ด€๋ จ์ด ์žˆ๋Š” ์ด๋ฏธ์ง€์ผ ๋•Œ
  • ์›นํŽ˜์ด์ง€ ์„ฑ๋Šฅ์„ ๋†’์ด๊ณ  ์‹ถ์„ ๋•Œ

2) CSS background-image ์†์„ฑ ํ™œ์šฉ

  • ๋””์ž์ธ์ ์ธ ์š”์†Œ๋กœ๋งŒ ์ด๋ฏธ์ง€๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ
  • ์ฝ˜ํ…์ธ ์™€ ๊ด€๋ จ์ด ์—†์–ด ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ง€ ๋ชปํ•ด๋„ ์ƒ๊ด€ ์—†์„ ๋•Œ

0๊ฐœ์˜ ๋Œ“๊ธ€