



img ํ๊ทธ์ srcset ์์ฑ์ ์ฌ์ฉํ๋ฉด ํฌ๊ธฐ๊ฐ ๋ค๋ฅธ ์ฌ๋ฌ ์ด๋ฏธ์ง๋ฅผ ์ ์ํ ์ ์์ด ํ๋ฉด ํฌ๊ธฐ์ ๊ฐ์ฅ ์ ๋ง๋ ์ด๋ฏธ์ง๋ฅผ ์๋์ผ๋ก ์ ํํ๋ค.

๋ธ๋ผ์ฐ์ ์ฐฝ์ด ์์์ ธ๋ ๊ต์ฅํ ํฐ ์ด๋ฏธ์ง ํ๋๋ฅผ ์ด์ฉํด์ ๋ณด์ฌ์ฃผ๊ณ ์์ด ๋นํจ์จ์ ์ด๋ค.

srcset์ ํ์ฉํ๋ฉด ๋ทฐํฌํธ ํฌ๊ธฐ๋ ๊ธฐ๊ธฐ์ ํด์๋์ ๋ฐ๋ผ ์ต์ ์ ์ด๋ฏธ์ง๋ฅผ ์ ํํ์ฌ ๋ก๋ํ ์ ์๊ฒ ๋๋ค.
๐ w unit์ ์ฌ์ฉํ๋ ์ด์
srcset ์์ฑ์์ ์ฌ์ฉ๋๋ w ๋จ์๋ ์ด๋ฏธ์ง์ ์ค์ ๋๋น๋ฅผ ๋ํ๋ธ๋ค. ์๋ฅผ ๋ค์ด, 300w๋ ์ด๋ฏธ์ง์ ๋๋น๊ฐ 300ํฝ์ ์์ ์๋ฏธํ๋ค.
<img
srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
src="default.jpg"
alt="Responsive Image">
srcset: ๊ฐ ์ด๋ฏธ์ง ํ์ผ์ URL๊ณผ ํจ๊ป ํด๋น ์ด๋ฏธ์ง์ ๋๋น๋ฅผ w ๋จ์๋ก ์ง์ . ๋ธ๋ผ์ฐ์ ๋ ๋ทฐํฌํธ ํฌ๊ธฐ์ ๊ธฐ๊ธฐ์ ํฝ์ ๋ฐ๋์ ๋ฐ๋ผ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง๋ฅผ ์ ํ.
sizes ์์ฑ: ๋ธ๋ผ์ฐ์ ๊ฐ srcset์์ ์ด๋ค ์ด๋ฏธ์ง๋ฅผ ์ ํํ ์ง ๊ฒฐ์ ํ ๋ ์ฐธ๊ณ . ๋ทฐํฌํธ์ ์ต๋ ๋๋น์ ๋ฐ๋ผ ์ด๋ฏธ์ง๊ฐ ํ๋ฉด์ ๋ช %๋ฅผ ์ฐจ์งํ ์ง ์ ์.
๋ธ๋ผ์ฐ์ ๋ ์ด๋ฅผ ํ๋จํ๊ธฐ ์ํด์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ๊ธฐ๊ธฐ์ pixel density๋ฅผ ํ์ธํ๋๋ฐ, ์ด๊ฒ์ window.devicepixelRatio ๋ฅผ ์ด์ฉํ๊ฒ ๋๋ค.
window.devicePixelRatio๋ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ๊ธฐ๊ธฐ์ ํ๋ฉด ํฝ์ ๋ฐ๋๋ฅผ ๋ํ๋ด๋ ๊ฐ์ด๋ค. ์ด ๊ฐ์ด 2๋ผ๋ฉด, ๊ธฐ๊ธฐ์ ๋ฌผ๋ฆฌ์ ํฝ์ 2๊ฐ๊ฐ CSS ํฝ์ 1๊ฐ๋ก ๋ ๋๋ง๋๋ค. ์๋ฅผ ๋ค์ด, devicePixelRatio๊ฐ 2์ธ ๊ฒฝ์ฐ, ๋ธ๋ผ์ฐ์ ๋ 300px ๋์ 600px ์ด๋ฏธ์ง๋ฅผ ์ ํํ ์ ์๋ค.
์ฌ์ฉํ๋ ๊ธฐ๊ธฐ(์คํฌ๋ฆฐ)์ ํด์๋๊ฐ ์ข์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ํ๋ฉด์์ ๋ ์ ๋ช ํ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์ ๋ ํฐ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์์ค๊ฒ ๋๋ค.

w ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋์ผํ ์ด๋ฏธ์ง์ ๋ค์ํ ํด์๋ ๋ฒ์ ์ ์ ๊ณตํ ์ ์์ผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๋ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง๋ฅผ ์ ํํ์ฌ ๋ก๋ํ ์ ์๋ค. ์ด๋ ํนํ ๊ณ ํด์๋ ๋์คํ๋ ์ด(์: ๋ ํฐ๋ ๋์คํ๋ ์ด)์์ ๋ ์ ๋ช ํ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๋ฐ ์ ์ฉํ๋ค.
์ด๋ก ์ธํด ์ด๋ฏธ์ง๊ฐ ๋ ์ ๋ช ํ๊ณ ๋ช ํํ๊ฒ ํ์๋๋ฉฐ, ํ์ ์ด์์ ๋์ฉ๋ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ์ง ์์ ์ฑ๋ฅ๋ ์ต์ ํํ ์ ์๋ค

๐ picture๋ srcset์ ์ฐจ์ด์
๊ธฐ๋ณธ๋ฌธ๋ฒ
:is(selector1, selector2, selector3, ...)
์์
/* ๋ชจ๋ <h1>, <h2>, <h3> ์์์ ๋์ผํ ์คํ์ผ ์ ์ฉ */
:is(h1, h2, h3) {
color: blue;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
/* ํน์ ํด๋์ค๋ ํ๊ทธ๋ฅผ ๊ฐ์ง ์์๋ค์ ๋์ผํ ์คํ์ผ ์ ์ฉ */
:is(.btn-primary, .btn-secondary, button) {
padding: 10px 20px;
border-radius: 5px;
background-color: #007BFF;
color: white;
}
โ:is(h1, h2, h3) ์ h1, h2, h3 ์ ์ฐจ์ด
๋ ์ฝ๋์ ๊ธฐ๋ฅ์ ๋์ผํ์ง๋ง ๋ช ๊ฐ์ง ๋ฏธ๋ฌํ ์ฐจ์ด์ ์ด ์๋ค.
1. ์ฐ์ ์์(Priority)
2. ์ง์ ๋ฐ ํธํ์ฑ