[TIL] Embedded content

Sohee Yeoยท2022๋…„ 3์›” 31์ผ
1

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
5/23
post-thumbnail

2022.03.30 Today I Learned๐Ÿ“š

๐Ÿ“Embedded content

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

Embedded content๋ž€ ์ด๋ฏธ์ง€, ๋™์˜์ƒ ๋“ฑ ๋‹ค๋ฅธ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฌธ์„œ์— ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ๋ฌธ์„œ์— ์‚ฝ์ž…๋œ ๋‹ค๋ฅธ ์šฉ์–ด์—์„œ ๋‚ด์šฉ์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด๋‹ค.

Embedded content์˜ ์ฃผ์š” tag๋“ค

<img>
<picture>
<iframe>
<audio>
<video>

1. img

<img> ์ด๋ฏธ์ง€๋ฅผ ์‚ฝ์ž…ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ. ๋‹ซ๊ธฐํƒœ๊ทธ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ž์‹์š”์†Œ๋ฅผ ์ถ”๊ฐ€ ๋ถˆ๊ฐ€ํ•˜๋‹ค.

  • src (source)
    ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์ด๋ฏธ์ง€ ํŒŒ์ผ์˜ ์œ„์น˜ ๋ฐ ํŒŒ์ผ๋ช…์„ ์•Œ๋ ค์ค€๋‹ค. ์ ˆ๋Œ€๊ฒฝ๋กœ ํ˜น์€ ์ƒ๋Œ€๊ฒฝ๋กœ ์ž…๋ ฅ.
    -์ ˆ๋Œ€๊ฒฝ๋กœ: ์ „์ฒด ๊ฒฝ๋กœ. ์ตœ์ดˆ ์œ„์น˜์—์„œ๋ถ€ํ„ฐ ํŒŒ์ผ์ด ์žˆ๋Š” ๊ณณ๊นŒ์ง€์˜ ๋ฃจํŠธ. ์™ธ๋ถ€์— ์žˆ๋Š” ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
    ex) C:\Users\User\images\choc.png
    http://www.cwhdk.com/images/choc.png
    -์ƒ๋Œ€๊ฒฝ๋กœ: ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ํ˜„์žฌ ์œ„์น˜๋กœ๋ถ€ํ„ฐ ํŒŒ์ผ์„ ์ฐพ์•„๊ฐ€๋Š” ๋ฃจํŠธ. ๋‚ด๋ถ€์— ์žˆ๋Š” ํด๋”์—์„œ ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
    ex) ./images/choc.png
  • alt (alternative text)
    ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ์†์„ฑ. ํ™”๋ฉด์— ์ด๋ฏธ์ง€๊ฐ€ ๋žœ๋”๋ง ๋˜์ง€ ์•Š์„ ๊ฒฝ์šฐ alt์†์„ฑ์— ์ ํžŒ ํ…์ŠคํŠธ๋กœ ๋Œ€์ฒด๋œ๋‹ค. ์Šคํฌ๋ฆฐ๋ฆฌ๋”์™€ ๊ฐ™์€ ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•œ ํ”„๋กœ๊ทธ๋žจ์— ์ •๋ณด๋ฅผ ์ œ๊ณตํ•œ๋‹ค. SEO(Search Engine Optimization)์— ๋„์›€์„ ์ฃผ๊ธฐ๋„ ํ•œ๋‹ค. ์žฅ์‹์ ์ธ ์ด๋ฏธ์ง€, ์•„์ด์ฝ˜ ๋“ฑ์—๋Š” alt๊ฐ’์„ ๋„ฃ์ง€ ์•Š๋Š”๋‹ค.
<img src="img/๊ตฌ๋ฆ„.jpg"> โ†’ ์ฝ์ง€ ์•Š๋Š”๋‹ค
<img src="img/๊ตฌ๋ฆ„.jpg" alt=" "> โ†’ ํŒŒ์ผ๋ช…์„ ์ฝ๋Š”๋‹ค
<img src="img/๊ตฌ๋ฆ„.jpg" alt=""> โ†’ ์ฝ์ง€ ์•Š๋Š”๋‹ค
<img src="img/๊ตฌ๋ฆ„.jpg" alt="ํ•˜๋Š˜์— ๋–  ์žˆ๋Š” ๊ตฌ๋ฆ„"> โ†’ 'ํ•˜๋Š˜์— ๋–  ์žˆ๋Š” ๊ตฌ๋ฆ„' ์ด๋ผ๊ณ  ์ฝ๋Š”๋‹ค
  • srcset
    ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๋ฅผ ์œ„ํ•œ ๊ฒƒ. ๋‹ค์–‘ํ•œ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๋Š” ๋™์ผ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์†Œ 2๊ฐœ ์ด์ƒ ์‚ฌ์šฉํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ตœ์ ์˜ ์ด๋ฏธ์ง€๋ฅผ ๊ณจ๋ผ์„œ ๋ธŒ๋ผ์šฐ์ €์— ๋žœ๋”๋งํ•œ๋‹ค.

  • x ์„œ์ˆ ์ž
    ํ™”์†Œ์˜ ๋ฐ€๋„(pixel density)๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๋””๋ฐ”์ด์Šค์˜ ํ™”์†Œ ๋ฐ€๋„์— ์•Œ๋งž์€ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋”ฉํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ค€๋‹ค.

<img
width="200px"
srcset="img/peng_1.png 2x,
        img/peng_2.png 3x"
src="a.png"
alt="๊ฑธ์–ด๊ฐ€๋Š” ํŽญ๊ท„">
  • w ์„œ์ˆ ์ž: ์›๋ณธ ์ด๋ฏธ์ง€์˜ ๋„“์ด๋ฅผ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ค€๋‹ค px์ด ์•„๋‹Œ w๋กœ ํ‘œ๊ธฐ.
<img
width="200px"
srcset="img/peng_3.png 700w,
        img/peng_2.png 600w,
		img/peng_1.png 300w"
src="a.png"
alt="๊ฑธ์–ด๊ฐ€๋Š” ํŽญ๊ท„">

โœ’๏ธw์„œ์ˆ ์ž์™€ x์„œ์ˆ ์ž๋Š” ๋™์‹œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. ๋˜ํ•œ ๋น„๊ต์  ์ตœ์‹  ๊ธฐ๋Šฅ์ด๊ธฐ ๋•Œ๋ฌธ์— srcset์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๋ธŒ๋ผ์šฐ์ €(Internet Explorer)๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ src ์†์„ฑ์„ ์œ ์ง€ํ•ด์•ผ ํ•œ๋‹ค.

  • sizes ์†์„ฑ
    viewport์˜ ์กฐ๊ฑด์— ๋”ฐ๋ผ ์ด๋ฏธ์ง€๊ฐ€ UI์•ˆ์—์„œ ์ฐจ์ง€ํ•˜๊ฒŒ ๋  ์‚ฌ์ด์ฆˆ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ์•Œ๋ ค์ค€๋‹ค.
<img
srcset="img/peng_3.png 700w,
        img/peng_2.png 600w,
				img/peng_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.jpg"
alt="๊ฑธ์–ด๊ฐ€๋Š” ํŽญ๊ท„">

โœ’๏ธ์‚ฌ์ด์ฆˆ๊ฐ€ ํฐ ์ด๋ฏธ์ง€๋ถ€ํ„ฐ ๋‚˜์—ดํ•˜๊ธฐ

โœ’๏ธsizes ์†์„ฑ์„ ์‚ฌ์šฉํ•  ๋•Œ CSS์™€ ์ถฉ๋Œ ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ˜‘์—…์‹œ์—” ์‚ฌ์ „์— ๋ฐ˜๋“œ์‹œ ์–ด๋– ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๋ฅผ ์ฒ˜๋ฆฌํ–ˆ๋Š”์ง€ ๊ณต์œ ํ•˜๊ธฐ!

2. Picture

<picture> ๊ฐ๊ธฐ ๋‹ค๋ฅธ ๋””์Šคํ”Œ๋ ˆ์ด ํ˜น์€ ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ผ ์กฐ๊ฑด์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์š”์†Œ. ์ด๋ฏธ์ง€ ํฌ๋งท ์ž์ฒด๋ฅผ ๋ณ€๊ฒฝ ํ•  ์ˆ˜ ์žˆ๋‹ค

<picture>
    <source srcset="_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="๊ท€์—ฌ์šด ์•„๊ธฐ ํŒฝ๊ท„๋“ค">
</picture>
  • media ์†์„ฑ
    media ์†์„ฑ์˜ ๊ฐ’์„ ํ†ตํ•ด ์กฐ๊ฑด์— ์•Œ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์ฐพ๋Š”๋‹ค. ์กฐ๊ฑด์— ๋งž๋Š” <source> ์š”์†Œ ์•ˆ์˜ srcset ์†์„ฑ ๊ฐ’์„ ์ฐพ์•„ src ์— ๋„ฃ์–ด ํ™”๋ฉด์— ๋ณด์—ฌ์ค€๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— <img> ์š”์†Œ๊ฐ€ ์—†๋‹ค๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š๋Š”๋‹ค.

    โœ’๏ธ<picture> ์™€ <source> ์š”์†Œ๋Š” <img>๊ฐ€ ์—†์œผ๋ฉด ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค!

  • type ์†์„ฑ
    ์ด๋ฏธ์ง€์˜ ํฌ๋งท ํƒ€์ž…์„ ๋ธŒ๋ผ์šฐ์ €์—๊ฒŒ ์•Œ๋ ค์ค€๋‹ค.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="๊ท€์—ฌ์šด ์•„๊ธฐ ํŒฝ๊ท„๋“ค">
</picture>

์œ„์—์„œ๋ถ€ํ„ฐ ์ฐจ๋ก€๋Œ€๋กœ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ง€์›ํ•˜๋Š” ํฌ๋งท์ธ์ง€ ํƒ์ƒ‰, ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋‹ค์Œ <source>์š”์†Œ๋กœ ๋„˜์–ด๊ฐ„๋‹ค. ๋ชจ๋“  ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•œ๋‹ค๋ฉด ์ตœํ›„์— <img>์š”์†Œ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋žœ๋”๋งํ•œ๋‹ค.

๋•Œ๋ฌธ์— ์ตœ์‹  ํฌ๋งท์˜ ์ด๋ฏธ์ง€๋ฅผ ์ง€์›ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง•์„ ์œ„ํ•ด <picture> ์š”์†Œ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ ํ•˜๋Š”๊ฒƒ์ด ์ข‹๋‹ค.
์ด๋Ÿฌํ•œ ๋ฐฉ์‹์˜ ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ๊ธฐ๋ฒ•์„ โ€˜์ ์ง„์  ํ–ฅ์ƒ๊ธฐ๋ฒ•โ€™์ด๋ผ๊ณ  ํ•œ๋‹ค.

โœ’๏ธ์ ์ง„์  ํ–ฅ์ƒ๊ธฐ๋ฒ•
๊ธฐ๋ณธ์ ์œผ๋กœ ์˜ˆ์ „ ๊ธฐ์ˆ  ํ™˜๊ฒฝ์—์„œ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋‘๊ณ , ์ตœ์‹  ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์—์„œ๋Š” ์ตœ์‹  ๊ธฐ์ˆ ์„ ์ œ๊ณตํ•˜์—ฌ ๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•



์ฐธ๊ณ ์‚ฌ์ดํŠธ

https://www.w3.org


profile
์‹คํŒจ์— ๋ฌด๋”˜ ์‚ฌ๋žŒ. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊ฟ‰๋‹ˆ๋‹ค

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