CSS ์ต์ปค ์ฟผ๋ฆฌ: ๋ทฐํฌํธ๊ฐ ์๋ ์์ ๊ฐ์ ๊ด๊ณ์ ๋ฐ๋ผ ์คํ์ผ์ ์ง์ ํ๋ ๊ฐ๋ ฅํ ๋ฐ์ํ ๋์์ธ ๊ธฐ๋ฒ์ ์์๋ณด์ธ์.
CSS ์ต์ปค ์ฟผ๋ฆฌ: ์์ ๊ด๊ณ ๊ธฐ๋ฐ ์คํ์ผ๋ง์ ํ์
๋ฐ์ํ ์น ๋์์ธ์ ๋ง์ ๋ฐ์ ์ ์ด๋ฃจ์์ต๋๋ค. ์ด๊ธฐ์ ์ฐ๋ฆฌ๋ ๋ทฐํฌํธ ํฌ๊ธฐ์๋ง ์์กดํ์ฌ ๋ ์ด์์์ ์กฐ์ ํ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์์กดํ์ต๋๋ค. ๊ทธ ํ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ๋ฑ์ฅํ์ฌ ์ปดํฌ๋ํธ๊ฐ ํฌํจ๋ ์์์ ํฌ๊ธฐ์ ๋ง์ถฐ ์กฐ์ ๋ ์ ์๊ฒ ๋์์ต๋๋ค. ์ด์ ์ฐ๋ฆฌ๋ CSS ์ต์ปค ์ฟผ๋ฆฌ๋ผ๋ ํ๊ธฐ์ ์ธ ์ ๊ทผ๋ฒ์ ๊ฐ๊ฒ ๋์์ต๋๋ค. ์ด๋ ์์ ๊ฐ์ ๊ด๊ณ์ ๊ธฐ๋ฐํ ์คํ์ผ๋ง์ ๊ฐ๋ฅํ๊ฒ ํ์ฌ, ๋์ ์ด๊ณ ๋ฌธ๋งฅ์ ๋ง๋ ๋์์ธ์ ํฅ๋ฏธ๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค.
CSS ์ต์ปค ์ฟผ๋ฆฌ๋ ๋ฌด์์ธ๊ฐ?
์ต์ปค ์ฟผ๋ฆฌ(๋๋ก๋ "์์ ์ฟผ๋ฆฌ"๋ผ๊ณ ๋ ๋ถ๋ฆฌ์ง๋ง, ์ด ์ฉ์ด๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ๋ชจ๋ ํฌํจํ๋ ๋ ๋์ ์๋ฏธ๋ฅผ ๊ฐ์ง)๋ ๋ทฐํฌํธ๋ ์ง์ ์ปจํ ์ด๋๋ฟ๋ง ์๋๋ผ ํ์ด์ง์ ๋ค๋ฅธ ์์์ ํฌ๊ธฐ, ์ํ ๋๋ ํน์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ์์์ ์คํ์ผ์ ์ง์ ํ ์ ์๊ฒ ํด์ค๋๋ค. B ์์๊ฐ ๋ณด์ด๋์ง, ๋๋ B ์์๊ฐ ํน์ ํฌ๊ธฐ๋ฅผ ์ด๊ณผํ๋์ง์ ๋ฐ๋ผ A ์์์ ์คํ์ผ์ ์ง์ ํ๋ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ด ์ ๊ทผ๋ฒ์ ์์ ๊ด๊ณ๊ฐ ์ค์ํ ๋ณต์กํ ๋ ์ด์์์์ ํนํ ๋ ์ ์ฐํ๊ณ ๋ฌธ๋งฅ์ ๋ง๋ ๋์์ธ์ ์ด์งํฉ๋๋ค.
์ง์ ๋ถ๋ชจ-์์ ๊ด๊ณ๋ก ์ ํ๋๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋ฌ๋ฆฌ, ์ต์ปค ์ฟผ๋ฆฌ๋ DOM ํธ๋ฆฌ๋ฅผ ๊ฐ๋ก์ง๋ฌ ์์ ์์๋ ์ฌ์ง์ด ํ์ ์์๋ฅผ ์ฐธ์กฐํ ์ ์์ต๋๋ค. ์ด๋ ๋ณต์กํ ๋ ์ด์์ ๋ณ๊ฒฝ์ ์กฐ์จํ๊ณ ์ง์ ์ผ๋ก ์ ์ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๋ฐ ๋งค์ฐ ๊ฐ๋ ฅํ ๋๊ตฌ๊ฐ ๋ฉ๋๋ค.
์ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋๊ฐ?
- ํฅ์๋ ๋ฌธ๋งฅ์ ์คํ์ผ๋ง: ํ์ด์ง์ ๋ค๋ฅธ ์์์ ์์น, ๊ฐ์์ฑ, ์์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ์์์ ์คํ์ผ์ ์ง์ ํฉ๋๋ค.
- ๊ฐ์ ๋ ๋ฐ์์ฑ: ๋ค์ํ ์์ ์ํ์ ์กฐ๊ฑด์ ๋ฐ์ํ๋ ๋ ์ ์๋ ฅ ์๊ณ ๋์ ์ธ ๋์์ธ์ ๋ง๋ญ๋๋ค.
- ๋จ์ํ๋ ์ฝ๋: ์์ ๊ด๊ณ ๊ด๋ฆฌ ๋ฐ ๋์ ์คํ์ผ๋ง์ ์ํ ๋ณต์กํ JavaScript ์๋ฃจ์ ์ ๋ํ ์์กด๋๋ฅผ ์ค์ ๋๋ค.
- ํฅ์๋ ์ฌ์ฌ์ฉ์ฑ: ๊ด๋ จ ์ต์ปค ์์์ ์กด์ฌ๋ ์ํ์ ๋ฐ๋ผ ์๋์ผ๋ก ์ ์ํ๋ ๋ ๋ ๋ฆฝ์ ์ด๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํฉ๋๋ค.
- ๋ ํฐ ์ ์ฐ์ฑ: DOM ํธ๋ฆฌ์์ ๋ ์์์ ์๊ฑฐ๋ ๋ค๋ฅธ ์์น์ ์๋ ์์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์คํ์ผ์ ์ง์ ํ์ฌ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ํ๊ณ๋ฅผ ๊ทน๋ณตํฉ๋๋ค.
์ต์ปค ์ฟผ๋ฆฌ์ ํต์ฌ ๊ฐ๋
์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด ํต์ฌ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
1. ์ต์ปค ์์ (The Anchor Element)
์ด๊ฒ์ ์์ฑ(ํฌ๊ธฐ, ๊ฐ์์ฑ, ์์ฑ ๋ฑ)์ด ๊ด์ฐฐ๋๋ ์์์ ๋๋ค. ๋ค๋ฅธ ์์์ ์คํ์ผ๋ง์ ์ด ์ต์ปค ์์์ ์ํ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
์์: ์ ํ์ ํ์ํ๋ ์นด๋ ์ปดํฌ๋ํธ๋ฅผ ์๊ฐํด๋ณด์ธ์. ์ต์ปค ์์๋ ์ ํ ์ด๋ฏธ์ง๊ฐ ๋ ์ ์์ต๋๋ค. ์ ๋ชฉ์ด๋ ์ค๋ช ๊ณผ ๊ฐ์ ์นด๋์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ ์กด์ฌ ์ฌ๋ถ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ์คํ์ผ๋ง๋ ์ ์์ต๋๋ค.
2. ์ฟผ๋ฆฌ ๋์ ์์ (The Queried Element)
์ด๊ฒ์ ์คํ์ผ์ด ์ ์ฉ๋๋ ์์์ ๋๋ค. ์ด ์์์ ๋ชจ์์ ์ต์ปค ์์์ ํน์ฑ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋ฉ๋๋ค.
์์: ์ ํ ์นด๋ ์์์์ ์ ํ ์ค๋ช ์ด ์ฟผ๋ฆฌ ๋์ ์์๊ฐ ๋ฉ๋๋ค. ์ ํ ์ด๋ฏธ์ง(์ต์ปค ์์)๊ฐ ์์ผ๋ฉด ์ค๋ช ์ด ์๋ฆฌ๊ฑฐ๋ ๋ค๋ฅด๊ฒ ํ์๋ ์ ์์ต๋๋ค.
3. `@anchor` ๊ท์น
์ด๊ฒ์ ์ต์ปค ์์์ ์ํ์ ๋ฐ๋ผ ์ฟผ๋ฆฌ ๋์ ์์์ ์คํ์ผ๋ง์ด ๋ณ๊ฒฝ๋์ด์ผ ํ๋ ์กฐ๊ฑด์ ์ ์ํ๋ CSS ๊ท์น์ ๋๋ค.
`@anchor` ๊ท์น์ ์ ํ์๋ฅผ ์ฌ์ฉํ์ฌ ์ต์ปค ์์๋ฅผ ๋์์ผ๋ก ํ๊ณ , ์ฟผ๋ฆฌ ๋์ ์์์ ๋ํ ๋ค๋ฅธ ์คํ์ผ๋ง ๊ท์น์ ํธ๋ฆฌ๊ฑฐํ๋ ์กฐ๊ฑด์ ์ง์ ํฉ๋๋ค.
๊ตฌ๋ฌธ ๋ฐ ๊ตฌํ
๊ตฌ๋ฌธ์ ํน์ ๊ตฌํ(๋ธ๋ผ์ฐ์ ์ง์์ ์์ง ๋ฐ์ ์ค)์ ๋ฐ๋ผ ์ฝ๊ฐ ๋ค๋ฅผ ์ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
/* ์ต์ปค ์์ ์ ์ */
#anchor-element {
anchor-name: --my-anchor;
}
/* ์ต์ปค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฟผ๋ฆฌ ๋์ ์์์ ์คํ์ผ ์ ์ฉ */
@anchor (--my-anchor) {
& when (width > 300px) {
/* ์ต์ปค ์์์ ๋๋น๊ฐ 300px๋ณด๋ค ํด ๋ ์ ์ฉํ ์คํ์ผ */
#queried-element {
font-size: 1.2em;
}
}
& when (visibility = visible) {
/* ์ต์ปค ์์๊ฐ ๋ณด์ผ ๋ ์ ์ฉํ ์คํ์ผ */
#queried-element {
display: block;
}
}
& when (attribute(data-type) = "featured") {
/* ์ต์ปค ์์์ data-type ์์ฑ์ด featured๋ก ์ค์ ๋์์ ๋ ์ ์ฉํ ์คํ์ผ */
#queried-element {
background-color: yellow;
}
}
}
์ค๋ช :
- `anchor-name`: ์ต์ปค ์์์ ์ด๋ฆ์ ์ ์ํ์ฌ `@anchor` ๊ท์น์์ ์ฐธ์กฐํ ์ ์๊ฒ ํฉ๋๋ค. `--my-anchor`๋ ์ฌ์ฉ์ ์ ์ ์์ฑ ์ด๋ฆ์ ์์ ๋๋ค.
- `@anchor (--my-anchor)`: ๋ค์ ๊ท์น๋ค์ด `--my-anchor`๋ผ๋ ์ด๋ฆ์ ์ต์ปค ์์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ์ฉ๋จ์ ์ง์ ํฉ๋๋ค.
- `& when (condition)`: ์คํ์ผ ๋ณ๊ฒฝ์ ํธ๋ฆฌ๊ฑฐํ๋ ํน์ ์กฐ๊ฑด์ ์ ์ํฉ๋๋ค. `&`๋ ์ต์ปค ์์๋ฅผ ์ฐธ์กฐํฉ๋๋ค.
- `#queried-element`: ์ต์ปค ์์์ ์ํ์ ๋ฐ๋ผ ์คํ์ผ์ด ์ง์ ๋ ์์๋ฅผ ๋์์ผ๋ก ํฉ๋๋ค.
์ค์ฉ์ ์ธ ์์
์ต์ปค ์ฟผ๋ฆฌ์ ํ์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
์์ 1: ๋์ ์ ํ ์นด๋
์ ํ์ ํ๋งคํ๊ณ ์นด๋๋ก ํ์ํ๋ ์น์ฌ์ดํธ๋ฅผ ์์ํด๋ณด์ธ์. ์ฐ๋ฆฌ๋ ์ ํ ์ด๋ฏธ์ง์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์ ํ ์ค๋ช ์ด ์ ์ํ๊ธฐ๋ฅผ ์ํฉ๋๋ค.
HTML:
Product Title
A detailed description of the product.
CSS:
/* ์ต์ปค ์์ (์ ํ ์ด๋ฏธ์ง) */
#product-image {
anchor-name: --product-image-anchor;
width: 100%;
}
/* ์ฟผ๋ฆฌ ๋์ ์์ (์ ํ ์ค๋ช
) */
@anchor (--product-image-anchor) {
& when (width < 200px) {
#product-description {
display: none; /* ์ด๋ฏธ์ง๊ฐ ๋๋ฌด ์์ผ๋ฉด ์ค๋ช
์จ๊ธฐ๊ธฐ */
}
}
& when (width >= 200px) {
#product-description {
display: block; /* ์ด๋ฏธ์ง๊ฐ ์ถฉ๋ถํ ํฌ๋ฉด ์ค๋ช
๋ณด์ด๊ธฐ */
}
}
}
์ค๋ช :
- `product-image`๊ฐ `--product-image-anchor`๋ผ๋ ์ด๋ฆ์ ์ต์ปค ์์๋ก ์ค์ ๋ฉ๋๋ค.
- `@anchor` ๊ท์น์ `product-image`์ ๋๋น๋ฅผ ํ์ธํฉ๋๋ค.
- ์ด๋ฏธ์ง ๋๋น๊ฐ 200px ๋ฏธ๋ง์ด๋ฉด `product-description`์ด ์จ๊ฒจ์ง๋๋ค.
- ์ด๋ฏธ์ง ๋๋น๊ฐ 200px ์ด์์ด๋ฉด `product-description`์ด ํ์๋ฉ๋๋ค.
์์ 2: ์ ์ํ ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด
์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ(์: ํค๋์ ๋๋น)์ ๋ฐ๋ผ ๋ ์ด์์์ ๋ณ๊ฒฝํด์ผ ํ๋ ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด๋ฅผ ์๊ฐํด๋ณด์ธ์. ์ ์ฒด ๋ทฐํฌํธ ๋๋น์ ์์กดํ๋ ๋์ , ํค๋ ์์๋ฅผ ์ต์ปค๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
HTML:
CSS:
/* ์ต์ปค ์์ (ํค๋) */
#main-header {
anchor-name: --header-anchor;
width: 100%;
/* ๊ธฐํ ํค๋ ์คํ์ผ */
}
/* ์ฟผ๋ฆฌ ๋์ ์์ (๋ด๋น๊ฒ์ด์
๋ฉ๋ด) */
@anchor (--header-anchor) {
& when (width < 600px) {
#main-nav ul {
flex-direction: column; /* ์์ ํ๋ฉด์์๋ ๋ฉ๋ด ํญ๋ชฉ์ ์ธ๋ก๋ก ์๊ธฐ */
align-items: flex-start;
}
}
& when (width >= 600px) {
#main-nav ul {
flex-direction: row; /* ํฐ ํ๋ฉด์์๋ ๋ฉ๋ด ํญ๋ชฉ์ ๊ฐ๋ก๋ก ํ์ */
align-items: center;
}
}
}
์ค๋ช :
- `main-header`๊ฐ `--header-anchor`๋ผ๋ ์ด๋ฆ์ ์ต์ปค ์์๋ก ์ค์ ๋ฉ๋๋ค.
- `@anchor` ๊ท์น์ `main-header`์ ๋๋น๋ฅผ ํ์ธํฉ๋๋ค.
- ํค๋ ๋๋น๊ฐ 600px ๋ฏธ๋ง์ด๋ฉด ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด ํญ๋ชฉ์ด ์ธ๋ก๋ก ์์ ๋๋ค.
- ํค๋ ๋๋น๊ฐ 600px ์ด์์ด๋ฉด ๋ด๋น๊ฒ์ด์ ๋ฉ๋ด ํญ๋ชฉ์ด ๊ฐ๋ก๋ก ํ์๋ฉ๋๋ค.
์์ 3: ๊ด๋ จ ์ฝํ ์ธ ๊ฐ์กฐ
๋ฉ์ธ ๊ธฐ์ฌ์ ๊ด๋ จ ๊ธฐ์ฌ๊ฐ ์๋ค๊ณ ์์ํด๋ณด์ธ์. ๋ฉ์ธ ๊ธฐ์ฌ๊ฐ ์ฌ์ฉ์์ ๋ทฐํฌํธ์ ์์ ๋ ๊ด๋ จ ๊ธฐ์ฌ๋ฅผ ์๊ฐ์ ์ผ๋ก ๊ฐ์กฐํ๊ณ ์ถ์ต๋๋ค.
HTML:
Main Article Title
Main article content...
CSS (๊ฐ๋ ์ - Intersection Observer API ํตํฉ ํ์):
/* ์ต์ปค ์์ (๋ฉ์ธ ๊ธฐ์ฌ) */
#main-article {
anchor-name: --main-article-anchor;
}
/* ๊ฐ๋
์ - ์ด ๋ถ๋ถ์ Intersection Observer API ์คํฌ๋ฆฝํธ์ ์ํด ์ค์ ๋ ํ๋๊ทธ๋ก ๊ตฌ๋๋์ด์ผ ํจ */
:root {
--main-article-in-view: false; /* ์ด๊ธฐ๊ฐ์ false๋ก ์ค์ */
}
/* ์ฟผ๋ฆฌ ๋์ ์์ (๊ด๋ จ ๊ธฐ์ฌ) */
@anchor (--main-article-anchor) {
& when (var(--main-article-in-view) = true) { /* ์ด ์กฐ๊ฑด์ ์คํฌ๋ฆฝํธ์ ์ํด ๊ตฌ๋๋์ด์ผ ํจ */
#related-articles {
background-color: #f0f0f0; /* ๊ด๋ จ ๊ธฐ์ฌ ๊ฐ์กฐ */
border: 1px solid #ccc;
padding: 10px;
}
}
}
/* ์คํฌ๋ฆฝํธ๊ฐ Intersection Observer API๋ฅผ ๊ธฐ๋ฐ์ผ๋ก --main-article-in-view ์์ฑ์ ํ ๊ธํจ */
์ค๋ช :
- `main-article`์ด `--main-article-anchor`๋ผ๋ ์ด๋ฆ์ ์ต์ปค ์์๋ก ์ค์ ๋ฉ๋๋ค.
- ์ด ์์ ๋ ๊ฐ๋ ์ ์ด๋ฉฐ `main-article`์ด ๋ทฐํฌํธ์ ์๋์ง ํ์ธํ๊ธฐ ์ํด (์ผ๋ฐ์ ์ผ๋ก JavaScript๋ฅผ ํตํด) Intersection Observer API์ ์์กดํฉ๋๋ค.
- CSS ๋ณ์ `--main-article-in-view`๋ ๊ธฐ์ฌ๊ฐ ๋ทฐ์ ์๋์ง ์ฌ๋ถ๋ฅผ ์ ํธ๋ก ์ฌ์ฉ๋ฉ๋๋ค. Intersection Observer API๋ฅผ ์ฌ์ฉํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๊ฐ ์ด ๋ณ์๋ฅผ ํ ๊ธํฉ๋๋ค.
- `--main-article-in-view` ๋ณ์๊ฐ `true`์ผ ๋(Intersection Observer API์ ์ํด ์ค์ ๋จ), `related-articles` ์น์ ์ด ๊ฐ์กฐ๋ฉ๋๋ค.
์ฐธ๊ณ : ์ด ๋ง์ง๋ง ์์ ๋ Intersection Observer API๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ์ธ ๊ธฐ์ฌ์ ๊ฐ์์ฑ์ ๊ฐ์งํ๊ธฐ ์ํด JavaScript๊ฐ ํ์ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด CSS๋ JavaScript๊ฐ ์ ๊ณตํ๋ ์ํ์ ๋ฐ์ํ์ฌ ๊ธฐ์ ๋ค์ ๊ฐ๋ ฅํ ์กฐํฉ์ ๋ณด์ฌ์ค๋๋ค.
๊ธฐ์กด ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ฐ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋ํ ์ด์
์ต์ปค ์ฟผ๋ฆฌ๋ ๊ธฐ์กด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋นํด ๋ช ๊ฐ์ง ์ฅ์ ์ ์ ๊ณตํฉ๋๋ค:
- ๊ด๊ณ ๊ธฐ๋ฐ ์คํ์ผ๋ง: ๋ทฐํฌํธ๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์๋ง ์์กดํ๋ ๋์ , ์ต์ปค ์ฟผ๋ฆฌ๋ ๋ค๋ฅธ ์์์์ ๊ด๊ณ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์์์ ์คํ์ผ์ ์ง์ ํ ์ ์๊ฒ ํ์ฌ ๋ ๋ฌธ๋งฅ์ ์ด๊ณ ์๋ฏธ ์๋ ๋์์ธ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ์ฝ๋ ์ค๋ณต ๊ฐ์: ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์ข ์ข ๋ค๋ฅธ ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋ํด ์ ์ฌํ ์คํ์ผ์ ์์ฑํด์ผ ํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ด๋ฅผ ์ค์ฌ์ฃผ์ง๋ง, ์ต์ปค ์ฟผ๋ฆฌ๋ ์์ ๊ด๊ณ์ ์ด์ ์ ๋ง์ถฐ ์ฝ๋๋ฅผ ๋์ฑ ๋จ์ํํ ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ์ฑ ํฅ์: ์ปดํฌ๋ํธ๋ ๋ค๋ฅธ ์์์ ์กด์ฌ๋ ์ํ์ ๋ฐ๋ผ ํ๊ฒฝ์ ์ ์ํ ์ ์์ผ๋ฏ๋ก ์น์ฌ์ดํธ์ ๋ค๋ฅธ ๋ถ๋ถ์์ ๋ ์ฌ์ฌ์ฉํ๊ธฐ ์ฌ์์ง๋๋ค.
- ๋ ์ ์ฐํ ๋ ์ด์์: ์ต์ปค ์ฟผ๋ฆฌ๋ ๊ธฐ์กด ๋ฐฉ๋ฒ์ผ๋ก๋ ๋ฌ์ฑํ๊ธฐ ์ด๋ ต๊ฑฐ๋ ๋ถ๊ฐ๋ฅํ ๋ ๋ณต์กํ๊ณ ๋์ ์ธ ๋ ์ด์์์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๋์ปคํ๋ง(Decoupling): ๋ค๋ฅธ ์์์ ์ํ์ ๋ฐ๋ผ ์์๋ฅผ ์คํ์ผ๋งํ์ฌ ๊ด์ฌ์ฌ์ ๋ถ๋ฆฌ๋ฅผ ์ด์งํ๊ณ , ๋ณต์กํ JavaScript ๋ก์ง์ ํ์์ฑ์ ์ค์ ๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ํด๋ฆฌํ
2024๋ ํ๋ฐ ๊ธฐ์ค์ผ๋ก, ์ต์ปค ์ฟผ๋ฆฌ์ ๋ํ ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ ์ง์์ ์์ง ๋ฐ์ ์ค์ด๋ฉฐ ์คํ์ ํ๋๊ทธ๋ ํด๋ฆฌํ ์ฌ์ฉ์ด ํ์ํ ์ ์์ต๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ ๋ณด๋ caniuse.com์์ ํ์ธํ์ธ์.
๋ค์ดํฐ๋ธ ์ง์์ด ์ ํ์ ์ผ ๋, ํด๋ฆฌํ์ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๊ฐ์ ํธํ์ฑ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ํด๋ฆฌํ์ ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์๋์ง ์๋ ๊ธฐ๋ฅ์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ JavaScript ์ฝ๋ ์กฐ๊ฐ์ ๋๋ค.
๋์ ๊ณผ์ ๋ฐ ๊ณ ๋ ค ์ฌํญ
์ต์ปค ์ฟผ๋ฆฌ๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ์ ์ฌ์ ์ธ ๋์ ๊ณผ์ ๋ฅผ ์ธ์งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ๋ธ๋ผ์ฐ์ ์ง์: ์ ํ์ ์ธ ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ ์ง์์ผ๋ก ์ธํด ํด๋ฆฌํ์ ์ฌ์ฉํด์ผ ํ ์ ์์ผ๋ฉฐ, ์ด๋ ์น์ฌ์ดํธ์ ์ค๋ฒํค๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ: ํนํ ๋ณต์กํ ์กฐ๊ฑด๊ณผ ํจ๊ป ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ฟผ๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ ์ฒ ์ ํ ํ ์คํธํ์ธ์.
- ๋ณต์ก์ฑ: ์์ ๊ฐ์ ๊ด๊ณ๋ฅผ ์ดํดํ๊ณ ํจ๊ณผ์ ์ธ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ์์ฑํ๋ ๊ฒ์ ๊ธฐ์กด CSS๋ณด๋ค ๋ ๋ณต์กํ ์ ์์ต๋๋ค.
- ์ ์ง๋ณด์์ฑ: ์ฝ๋์ ๋ช ํ์ฑ์ ์ ์งํ๊ณ ์๊ธฐ์น ์์ ๋์์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ์ ๋ฌธ์ํํ๊ณ ์ ๋ฆฌํด์ผ ํฉ๋๋ค.
- JavaScript ์์กด์ฑ (ํน์ ์ฌ์ฉ ์ฌ๋ก): "๊ด๋ จ ์ฝํ ์ธ ๊ฐ์กฐ" ์์ ์์ ๋ณด์๋ฏ์ด, ์ผ๋ถ ๊ณ ๊ธ ์ฌ์ฉ ์ฌ๋ก์์๋ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ Intersection Observer API์ ๊ฐ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํตํฉํด์ผ ํ ์ ์์ต๋๋ค.
์ต์ปค ์ฟผ๋ฆฌ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
์ต์ปค ์ฟผ๋ฆฌ์ ์ด์ ์ ๊ทน๋ํํ๊ณ ์ ์ฌ์ ์ธ ํจ์ ์ ํผํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ธ์:
- ๊ฐ๋จํ๊ฒ ์์ํ๊ธฐ: ํต์ฌ ๊ฐ๋ ์ ์ดํดํ๊ธฐ ์ํด ๊ฐ๋จํ ์ต์ปค ์ฟผ๋ฆฌ๋ก ์์ํ๊ณ ์ ์ฐจ ๋ ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ๋์ ํ์ธ์.
- ์๋ฏธ ์๋ ์ต์ปค ์ด๋ฆ ์ฌ์ฉ: ์ต์ปค ์์์ ๋ชฉ์ ์ ๋ช ํํ๊ฒ ๋ํ๋ด๋ ์ค๋ช ์ ์ธ ์ต์ปค ์ด๋ฆ์ ์ ํํ์ธ์ (์: `--anchor1` ๋์ `--product-image-anchor`).
- ์กฐ๊ฑด ์ต์ ํ: `@anchor` ๊ท์น์ ์กฐ๊ฑด์ ๊ฐ๋ฅํ ํ ๊ฐ๋จํ๊ณ ํจ์จ์ ์ผ๋ก ์ ์งํ์ธ์. ์ง๋์น๊ฒ ๋ณต์กํ ๊ณ์ฐ์ด๋ ๋ก์ง์ ํผํ์ธ์.
- ์ฒ ์ ํ ํ ์คํธ: ์ผ๊ด๋ ๋์์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ํ ์คํธํ์ธ์.
- ์ฝ๋ ๋ฌธ์ํ: ๊ฐ ์ต์ปค ์์์ ๋ชฉ์ ๊ณผ ์คํ์ผ์ด ์ ์ฉ๋๋ ์กฐ๊ฑด์ ์ค๋ช ํ์ฌ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ธ์.
- ์ฑ๋ฅ ๊ณ ๋ ค: ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ ํ์ํ ๊ฒฝ์ฐ ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ์ต์ ํํ์ธ์.
- ์ ์ง์ ํฅ์๊ณผ ํจ๊ป ์ฌ์ฉ: ์ต์ปค ์ฟผ๋ฆฌ๊ฐ ์ง์๋์ง ์๋ ๊ฒฝ์ฐ์๋ ์น์ฌ์ดํธ๊ฐ ์ ์์ ์ผ๋ก ์๋ํ๋๋ก ๋์์ธํ์ธ์ (์: ๋์ฒด ์คํ์ผ ์ฌ์ฉ).
- ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ์ง ์๊ธฐ: ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ์ ๋ต์ ์ผ๋ก ์ฌ์ฉํ์ธ์. ๊ฐ๋ ฅํ์ง๋ง ํญ์ ์ต์์ ์๋ฃจ์ ์ ์๋๋๋ค. ๋ ๊ฐ๋จํ ์๋๋ฆฌ์ค์์๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๊ฐ ๋ ์ ํฉํ ์ ์๋์ง ๊ณ ๋ คํ์ธ์.
CSS์ ์ต์ปค ์ฟผ๋ฆฌ์ ๋ฏธ๋
์ต์ปค ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ์น ๋์์ธ์์ ์ค์ํ ์ง์ ์ ๋ํ๋ด๋ฉฐ, ์์ ๊ด๊ณ์ ๊ธฐ๋ฐํ ๋ ๋์ ์ด๊ณ ๋ฌธ๋งฅ์ ์ธ ์คํ์ผ๋ง์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ฐ์ ๋๊ณ ๊ฐ๋ฐ์๋ค์ด ์ด ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋ํ ๊ฒฝํ์ ๋ ๋ง์ด ์๊ฒ ๋จ์ ๋ฐ๋ผ, ๋ฏธ๋์๋ ํจ์ฌ ๋ ํ์ ์ ์ด๊ณ ์ฐฝ์์ ์ธ ์ต์ปค ์ฟผ๋ฆฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณผ ์ ์์ ๊ฒ์ผ๋ก ๊ธฐ๋๋ฉ๋๋ค. ์ด๋ ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์๊ฒ ๋ ์ ์๋ ฅ ์๊ณ , ์ฌ์ฉ์ ์นํ์ ์ด๋ฉฐ, ๋งค๋ ฅ์ ์ธ ์น ๊ฒฝํ์ผ๋ก ์ด์ด์ง ๊ฒ์ ๋๋ค.
์ต์ปค ์ฟผ๋ฆฌ์ ๊ฐ์ ๊ธฐ๋ฅ์ ๊ฐ์ถ CSS์ ์ง์์ ์ธ ๋ฐ์ ์ ๊ฐ๋ฐ์๋ค์ด JavaScript์ ๋ํ ์์กด๋๋ฅผ ์ค์ด๋ฉด์ ๋ ์ ๊ตํ๊ณ ์ ์ ๊ฐ๋ฅํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ์ง์ํ์ฌ ๋ ๊นจ๋ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ ์ฑ๋ฅ์ด ์ข์ ์ฝ๋๋ฅผ ๋ง๋ค์ด๋ ๋๋ค.
๊ธ๋ก๋ฒ ์ํฅ ๋ฐ ์ ๊ทผ์ฑ
์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ๊ตฌํํ ๋ ๋์์ธ์ ๊ธ๋ก๋ฒ ์ํฅ๊ณผ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ธ์. ๋ค๋ฅธ ์ธ์ด์ ์ฐ๊ธฐ ์ฒด๊ณ๋ ์์์ ๋ ์ด์์๊ณผ ํฌ๊ธฐ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ค๊ตญ์ด ํ ์คํธ๋ ํ๊ท ์ ์ผ๋ก ์์ด ํ ์คํธ๋ณด๋ค ์ ์ ์๊ฐ์ ๊ณต๊ฐ์ ์ฐจ์งํฉ๋๋ค. ์ต์ปค ์ฟผ๋ฆฌ๊ฐ ์ด๋ฌํ ๋ณํ์ ์ ์ ํ๊ฒ ์ ์ํ๋์ง ํ์ธํ์ธ์.
์ ๊ทผ์ฑ ๋ํ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ต์ปค ์ฟผ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฝํ ์ธ ๋ฅผ ์จ๊ธฐ๊ฑฐ๋ ํ์ํ๋ ๊ฒฝ์ฐ, ์จ๊ฒจ์ง ์ฝํ ์ธ ๊ฐ ์ ์ ํ ๋ ๋ณด์กฐ ๊ธฐ์ ์ ์ฌ์ ํ ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํ์ธ์. ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ์์์ ๊ทธ ์ํ ๊ฐ์ ๊ด๊ณ์ ๋ํ ์๋ฏธ๋ก ์ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ธ์.
๊ฒฐ๋ก
CSS ์ต์ปค ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ์น ๋์์ธ ํดํท์ ์ถ๊ฐ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ผ๋ก, ๋ค๋ฅธ ์์์์ ๊ด๊ณ์ ๋ฐ๋ผ ์์๋ฅผ ์คํ์ผ๋งํ๋ ๋ฐ ์๋ก์ด ์์ค์ ์ ์ด์ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. ์์ง ๋น๊ต์ ์๋กญ๊ณ ๋ฐ์ ์ค์ด์ง๋ง, ์ต์ปค ์ฟผ๋ฆฌ๋ ์ฐ๋ฆฌ๊ฐ ๋ฐ์ํ ๋์์ธ์ ์ ๊ทผํ๋ ๋ฐฉ์์ ํ์ ํ์ฌ ๋ ๋์ ์ด๊ณ , ๋ฌธ๋งฅ์ ์ด๋ฉฐ, ์ฌ์ฉ์ ์นํ์ ์ธ ์น ๊ฒฝํ์ ์ด๋์ด๋ผ ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ํต์ฌ ๊ฐ๋ , ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ์ ์ฌ์ ์ธ ๋์ ๊ณผ์ ๋ฅผ ์ดํดํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ์ต์ปค ์ฟผ๋ฆฌ์ ํ์ ํ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ง์ ์ผ๋ก ์ ์๋ ฅ ์๊ณ ๋งค๋ ฅ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.