CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ Intersection Observer์ ๊ฒฐํฉํ์ฌ ๊ณ ๊ธ ์ปจํ ์ด๋ ๋ณ๊ฒฝ ๊ฐ์ง ๋ฐ ๋ฐ์ํ ๋์์ธ ์ ๋ต์ ๊ตฌํํ๊ณ , ๊ฐ๋ฐ์๊ฐ ๋์ฑ ๋์ ์ด๊ณ ์ ์ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค ์ ์๋๋ก ์ง์ํฉ๋๋ค.
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ Intersection Observer: ๊ณ ๊ธ ์ปจํ ์ด๋ ๋ณ๊ฒฝ ๊ฐ์ง
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ๋ฐ์ํ ๋ฐ ์ ์ํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ค๋ซ๋์ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ๋์์ธ์ ์กฐ์ ํ๋ ๋ฐ ์ฌ์ฉ๋์์ง๋ง, CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋์ฑ ์ธ๋ถํ๋๊ณ ์ปดํฌ๋ํธ ์ค์ฌ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ Intersection Observer API์ ๊ฒฐํฉํ๋ฉด ์ปจํ ์ด๋ ๋ณ๊ฒฝ์ ๊ฐ์งํ๊ณ ๋์ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ฌ ๋์ฑ ๋ฐ์ด๋ ์ฑ๋ฅ๊ณผ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋ ๊ฐ๋ ฅํ ๊ฐ๋ฅ์ฑ์ด ์ด๋ฆฝ๋๋ค.
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ์ดํด
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ทฐํฌํธ๊ฐ ์๋ ์ปจํ ์ด๋ ์์์ ํฌ๊ธฐ ๋๋ ๊ธฐํ ํน์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค. ์ฆ, ์ปดํฌ๋ํธ๋ ํ๋ฉด ํฌ๊ธฐ์ ๊ด๊ณ์์ด ๋ถ๋ชจ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ฐ๋ผ ๋ชจ์์ ์กฐ์ ํ ์ ์์ต๋๋ค.
@container ๊ท์น
์ปจํ
์ด๋ ์ฟผ๋ฆฌ์ ํต์ฌ์ @container ๊ท์น์ ์์ต๋๋ค. ์ด ๊ท์น์ ์ฌ์ฉํ๋ฉด ์ปจํ
์ด๋ ํฌ๊ธฐ(width, height, inline-size, block-size)๋ฅผ ๊ธฐ์ค์ผ๋ก ์กฐ๊ฑด์ ์ ์ํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํ์ฉํ๋ ค๋ฉด ๋จผ์ container-type ๋ฐ/๋๋ container-name์ ์ฌ์ฉํ์ฌ ์ปจํ
์ด๋๋ฅผ ์ ์ธํด์ผ ํฉ๋๋ค.
์์: ์ปจํ ์ด๋ ์ ์ธ
.card-container {
container-type: inline-size; /* or size, or normal */
container-name: card-container;
}
์ด ์์์ .card-container๋ inline-size ์ปจํ
์ด๋๋ก ์ ์ธ๋ฉ๋๋ค. ์ด๋ ์ปจํ
์ด๋ ์ฟผ๋ฆฌ ๋ด์ ์คํ์ผ์ด ์ปจํ
์ด๋์ inline ํฌ๊ธฐ(์ผ๋ฐ์ ์ผ๋ก width)๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ์ฉ๋จ์ ์๋ฏธํฉ๋๋ค.
์์: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ์ฌ์ฉ
@container card-container (min-width: 400px) {
.card {
flex-direction: row;
}
.card-image {
width: 40%;
}
.card-content {
width: 60%;
}
}
์ด ์ปจํ
์ด๋ ์ฟผ๋ฆฌ๋ 'card-container'๋ผ๋ ์ปจํ
์ด๋์ ์ต์ ๋๋น๊ฐ 400px์ธ์ง ํ์ธํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ฟผ๋ฆฌ ๋ด์ ์คํ์ผ์ด .card, .card-image ๋ฐ .card-content ์์์ ์ ์ฉ๋ฉ๋๋ค.
Intersection Observer API ์๊ฐ
Intersection Observer API๋ ๋์ ์์์ ์์ ์์ ๋๋ ๋ฌธ์ ๋ทฐํฌํธ์ ๊ต์ฐจ์ ๋ณ๊ฒฝ ์ฌํญ์ ๋น๋๊ธฐ์ ์ผ๋ก ๊ด์ฐฐํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ํตํด ์์๊ฐ ํ๋ฉด์ ํ์๋ ๋(๋๋ ๋ถ๋ถ์ ์ผ๋ก ํ์๋ ๋) ๋๋ ๊ฐ์์ฑ์ด ๋ณ๊ฒฝ๋ ๋ ์ด๋ฅผ ๊ฐ์งํ ์ ์์ต๋๋ค.
Intersection Observer ์๋ ๋ฐฉ์
API๋ ์ฝ๋ฐฑ ํจ์์ ์ต์
๊ฐ์ฒด๋ฅผ ์ธ์๋ก ์ฌ์ฉํ๋ IntersectionObserver ์ธ์คํด์ค๋ฅผ ์์ฑํ์ฌ ์๋ํฉ๋๋ค. ์ฝ๋ฐฑ ํจ์๋ ๋์ ์์์ ๊ต์ฐจ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์คํ๋ฉ๋๋ค.
์์: Intersection Observer ์์ฑ
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Element is intersecting
console.log('Element is visible!');
} else {
// Element is not intersecting
console.log('Element is not visible!');
}
});
}, {
root: null, // Use the viewport as the root
rootMargin: '0px', // No margin around the root
threshold: 0.5 // Trigger when 50% of the element is visible
});
const targetElement = document.querySelector('.my-element');
observer.observe(targetElement);
์ด ์์์ Intersection Observer๋ .my-element์ 50%๊ฐ ๋ทฐํฌํธ์ ํ์๋ ๋ ํธ๋ฆฌ๊ฑฐ๋๋๋ก ๊ตฌ์ฑ๋ฉ๋๋ค. ์ฝ๋ฐฑ ํจ์๋ ์์๊ฐ ๋ณด์ด๋์ง ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ ๋ฉ์์ง๋ฅผ ์ฝ์์ ๊ธฐ๋กํฉ๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ Intersection Observer๋ฅผ ๊ฒฐํฉํ์ฌ ์ปจํ ์ด๋ ๋ณ๊ฒฝ ๊ฐ์ง
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ Intersection Observer์ ๊ฒฐํฉํ๋ฉด ์ง์ ํ ํ์ด ๋ฐํ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์ปจํ ์ด๋๊ฐ ํ์๋๋ ์์ ๋ฟ๋ง ์๋๋ผ ํฌ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋๋ ์์ ๋ ๊ฐ์งํ์ฌ ๋์ ์ ๋ฐ์ดํธ ๋ฐ ์ต์ ํ๋ ๊ฒฝํ์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
์ปจํ ์ด๋ ๋ณ๊ฒฝ ๊ฐ์ง ์ฌ์ฉ ์ฌ๋ก
- ๋ฆฌ์์ค ์ง์ฐ ๋ก๋ฉ: ์ปจํ ์ด๋๊ฐ ํ์๋๊ณ ํน์ ํฌ๊ธฐ์ ๋๋ฌํ์ ๋๋ง ์ด๋ฏธ์ง ๋๋ ๊ธฐํ ์์ฐ์ ๋ก๋ํ์ฌ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ๋ฐ ๋์ญํญ ์ฌ์ฉ๋์ ์ต์ ํํฉ๋๋ค.
- ๋์ ์ฝํ ์ธ ์ ์: ์ปจํ ์ด๋ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ์ ์ฝํ ์ธ ์ ๋ ์ด์์์ ์กฐ์ ํ์ฌ ์ฅ์น๋ ํ๋ฉด ํฌ๊ธฐ์ ๊ด๊ณ์์ด ๋ง์ถคํ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ์ฑ๋ฅ ์ต์ ํ: ์ปจํ ์ด๋๊ฐ ํ์๋๊ณ ์ถฉ๋ถํ ๊ณต๊ฐ์ด ํ๋ณด๋ ๋๊น์ง ๋ณต์กํ ์ฐจํธ ๋๋ ์ ๋๋ฉ์ด์ ๋ ๋๋ง๊ณผ ๊ฐ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ์ฐ๊ธฐํฉ๋๋ค.
- ์ปจํ ์คํธ ์ธ์ ์ปดํฌ๋ํธ: ์ฃผ๋ณ ํ๊ฒฝ์ ๊ธฐ๋ฐ์ผ๋ก ๋์์ ์กฐ์ ํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ญ๋๋ค. ์๋ฅผ ๋ค์ด ๋ค์ํ ์์ค์ ์ธ๋ถ ์ ๋ณด๋ฅผ ํ์ํ๊ฑฐ๋ ์ปจํ ์คํธ๋ณ ์์ ์ ์ ๊ณตํฉ๋๋ค. ์ง๋ ์ปดํฌ๋ํธ๊ฐ ์ปจํ ์ด๋ ๋ด์์ ์ถฉ๋ถํ ๊ณต๊ฐ์ ์ฌ์ฉํ ์ ์์ ๋ ๋ ์์ธํ ์ ๋ณด๋ฅผ ํ์ํ๋ ๊ฒ์ ์์ํด ๋ณด์ธ์.
๊ตฌํ ์ ๋ต
- ์ปจํ
์ด๋ ์ ์ธ:
container-type๋ฐ/๋๋container-name์ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ์์๋ฅผ ์ ์ํฉ๋๋ค. - Intersection Observer ์์ฑ: Intersection Observer๋ฅผ ์ค์ ํ์ฌ ์ปจํ ์ด๋ ์์๋ฅผ ๋ชจ๋ํฐ๋งํฉ๋๋ค.
- ๊ต์ฐจ ๋ณ๊ฒฝ ๊ด์ฐฐ: Intersection Observer ์ฝ๋ฐฑ ๋ด์์ ์ปจํ ์ด๋์ ํฌ๊ธฐ ๋๋ ๊ธฐํ ๊ด๋ จ ์์ฑ์ ๋ณ๊ฒฝ ์ฌํญ์ ํ์ธํฉ๋๋ค.
- ๋์ ์ ๋ฐ์ดํธ ํธ๋ฆฌ๊ฑฐ: ๊ด์ฐฐ๋ ๋ณ๊ฒฝ ์ฌํญ์ ๊ธฐ๋ฐ์ผ๋ก CSS ํด๋์ค๋ฅผ ์ ์ฉํ๊ฑฐ๋, ์์ ์์ฑ์ ์์ ํ๊ฑฐ๋, JavaScript ์ฝ๋๋ฅผ ์คํํ์ฌ ์ปดํฌ๋ํธ์ ๋ชจ์์ด๋ ๋์์ ์ ๋ฐ์ดํธํฉ๋๋ค.
์์: ์ปจํ ์ด๋ ๋ณ๊ฒฝ ๊ฐ์ง๋ฅผ ์ฌ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ
์ด ์์์๋ CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ Intersection Observer๋ฅผ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ๋ด์์ ์ด๋ฏธ์ง๋ฅผ ์ง์ฐ ๋ก๋ํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
HTML:
CSS:
.image-container {
container-type: inline-size;
container-name: image-container;
width: 100%;
height: 200px; /* Initial height */
overflow: hidden; /* Prevent content overflow */
}
.lazy-image {
width: 100%;
height: auto;
opacity: 0; /* Initially hidden */
transition: opacity 0.5s ease-in-out;
}
.lazy-image.loaded {
opacity: 1;
}
@container image-container (min-width: 600px) {
.image-container {
height: 400px; /* Increased height for larger containers */
}
}
JavaScript:
const lazyImages = document.querySelectorAll('.lazy-image');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
if (src) {
img.src = src;
img.addEventListener('load', () => {
img.classList.add('loaded');
observer.unobserve(img);
});
}
}
});
});
lazyImages.forEach(img => {
observer.observe(img.parentNode);
});
์ค๋ช :
image-container๋ inline-size ์ปจํ ์ด๋๋ก ์ ์ธ๋ฉ๋๋ค.- Intersection Observer๋ ์ปจํ ์ด๋ ์์๋ฅผ ๋ชจ๋ํฐ๋งํฉ๋๋ค.
- ์ปจํ
์ด๋๊ฐ ํ์๋๋ฉด observer๋
data-src์์ฑ์์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๊ณloadedํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ ํ์ด๋ ์ธํฉ๋๋ค. - ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋๋น๋ฅผ ๊ธฐ์ค์ผ๋ก ์ปจํ ์ด๋์ ๋์ด๋ฅผ ์กฐ์ ํฉ๋๋ค.
๊ณ ๊ธ ๊ธฐ์
- ๋๋ฐ์ด์ฑ: ๋๋ฐ์ด์ฑ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ปจํ ์ด๋ ํฌ๊ธฐ ๋ณ๊ฒฝ์ผ๋ก ์ธํด ํธ๋ฆฌ๊ฑฐ๋๋ ์ ๋ฐ์ดํธ ๋น๋๋ฅผ ์ ํํ์ฌ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
- ์ค๋กํ๋ง: ๋๋ฐ์ด์ฑ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ค๋กํ๋ง์ ์ฌ์ฉํ์ฌ ์ ๋ฐ์ดํธ๊ฐ ์ฒ๋ฆฌ๋๋ ์๋๋ฅผ ์ ์ดํ ์๋ ์์ต๋๋ค.
- ์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ: ์ปจํ ์ด๋ ํฌ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋ ๋ ์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ๋ฅผ ๋์คํจ์นํ์ฌ ๋ค๋ฅธ ์ปดํฌ๋ํธ ๋๋ ๋ชจ๋์ด ์ ๋ฐ์ดํธ์ ๋ฐ์ํ ์ ์๋๋ก ํฉ๋๋ค.
- Resize Observer API: ์ด ๋ฌธ์์์๋ IntersectionObserver์ ์ค์ ์ ๋์ง๋ง Resize Observer API๋ ์์ ํฌ๊ธฐ ๋ณ๊ฒฝ์ ์ง์ ๊ด์ฐฐํ ์ ์๋๋ก ํฉ๋๋ค. ๊ทธ๋ฌ๋ IntersectionObserver๋ ์์๊ฐ ๋ณด์ด๋ ๊ฒฝ์ฐ์๋ง ํธ๋ฆฌ๊ฑฐ๋์ด ์ ์ฌ์ ์ผ๋ก ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํ๋ฏ๋ก ์ข ์ข ์ ํธ๋ฉ๋๋ค.
- ํด๋ฆฌํ: Intersection Observer API์ ๋ํ ํด๋ฆฌํ์ ์ฌ์ฉํ์ฌ ์ด์ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
์ปจํ ์ด๋ ์ฟผ๋ฆฌ Intersection Observer ์ฌ์ฉ์ ์ด์
- ํฅ์๋ ์ฑ๋ฅ: ํ์ํ ๊ฒฝ์ฐ์๋ง ๋ฆฌ์์ค๋ฅผ ๋ก๋ํ๊ณ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ์คํํ๋ฉด ํ์ด์ง ๋ก๋ ์๊ฐ๊ณผ ์ ์ฒด ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ์ ์ฝํ ์ธ ์ ๋ ์ด์์์ ์กฐ์ ํ์ฌ ๋ชจ๋ ์ฅ์น์ ์ฌ์ฉ์์๊ฒ ๋ง์ถคํ ์ต์ ํ๋ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ๋ ํฐ ์ ์ฐ์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋์์ธ์ ๋ํ ๋ณด๋ค ์ ์ฐํ๊ณ ์ปดํฌ๋ํธ ์ค์ฌ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ์ฌ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ์ ์ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ํฉ๋๋ค.
- ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์น ์ฌ์ดํธ ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋ฌ ์น์ ์์ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ์ด์งํฉ๋๋ค. ๋์ผํ ์ปดํฌ๋ํธ๊ฐ ์ปจํ ์ด๋์์ ์ ๊ณตํ๋ ์ปจํ ์คํธ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ๋ ๋๋ง๋์ด ์ฝ๋ ์ค๋ณต์ ์ค์ ๋๋ค.
- ์ ์ง ๊ด๋ฆฌ์ฑ: ์ปจํ ์ด๋ ๊ธฐ๋ฐ ์คํ์ผ ์ง์ ์ ๋ณต์กํ ๋ทฐํฌํธ ์ข ์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋นํด ์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์ ์ง ๊ด๋ฆฌํ๊ณ ์ ๋ฐ์ดํธํ ์ ์๋๋ก ํฉ๋๋ค.
๊ณ ๋ ค ์ฌํญ ๋ฐ ์ ์ฌ์ ์ธ ๋จ์
- ๋ธ๋ผ์ฐ์ ์ง์: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ฐ Intersection Observer API ๋ชจ๋์ ๋ํ ์ถฉ๋ถํ ๋ธ๋ผ์ฐ์ ์ง์์ ํ์ธํฉ๋๋ค. ํ์ํ ๊ฒฝ์ฐ ์ด์ ๋ธ๋ผ์ฐ์ ์ ํด๋ฆฌํ์ ์ฌ์ฉํฉ๋๋ค.
- ๋ณต์ก์ฑ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ฐ Intersection Observer๋ฅผ ๊ตฌํํ๋ฉด ํนํ ๋ณต์กํ ์ํธ ์์ฉ ๋ฐ ์ข ์์ฑ์ ์ฒ๋ฆฌํ ๋ ์ฝ๋๋ฒ ์ด์ค์ ๋ณต์ก์ฑ์ด ์ถ๊ฐ๋ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ์ค๋ฒํค๋: Intersection Observer๋ ์ฑ๋ฅ์ด ์ข๋๋ก ์ค๊ณ๋์์ง๋ง observer ์ฝ๋ฐฑ ๋ด์์ ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ฐ ๋ณต์กํ ๊ณ์ฐ์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ฌ์ ํ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ์ค๋ฒํค๋๋ฅผ ์ต์ํํ๋๋ก ์ฝ๋๋ฅผ ์ ์คํ๊ฒ ์ต์ ํํฉ๋๋ค.
- ํ ์คํธ: ์ปจํ ์ด๋ ์ฟผ๋ฆฌ ๋ฐ observer ๊ตฌํ์ด ์์๋๋ก ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น์ ๋ธ๋ผ์ฐ์ ์์ ์ฒ ์ ํ ํ ์คํธํฉ๋๋ค.
๊ธ๋ก๋ฒ ๊ด์ : ๋ค์ํ ์ฌ์ฉ์ ์๊ตฌ์ ์ ์
๋ฐ์ํ ๋์์ธ ์ ๋ต์ ๊ตฌํํ ๋ ์ ์ธ๊ณ ์ฌ์ฉ์์ ๋ค์ํ ์๊ตฌ๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค.
- ๋ค์ํ ์ธํฐ๋ท ์๋: ๋๋ฆฐ ์ธํฐ๋ท ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์๋ฅผ ์์ฉํ๊ธฐ ์ํด ์ด๋ฏธ์ง ํฌ๊ธฐ์ ๋ฆฌ์์ค ๋ก๋ฉ์ ์ต์ ํํฉ๋๋ค. ์ง์ฐ ๋ก๋ฉ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ํ๋ฉด ์ฝํ ์ธ ์ ์ฐ์ ์์๋ฅผ ์ง์ ํฉ๋๋ค.
- ๋ค์ํ ์ฅ์น ์ฌ์ฉ๋: ๊ณ ๊ธ ์ค๋งํธํฐ์์ ๊ตฌํ ํผ์ฒํฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๊ด๋ฒ์ํ ์ฅ์น๋ฅผ ๋์์ธํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ํด์๋์ ๋ง๊ฒ ๋ ์ด์์์ ์กฐ์ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ: ๋์์ธ์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํฉ๋๋ค. ์๋งจํฑ HTML์ ์ฌ์ฉํ๊ณ , ์ด๋ฏธ์ง์ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๊ณ , ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ๋ณด์ฅํฉ๋๋ค.
- ์ง์ญํ: ๋์์ธ์ ๋ค์ํ ์ธ์ด ๋ฐ ๋ฌธํ์ ์ปจํ ์คํธ์ ๋ง๊ฒ ์กฐ์ ํฉ๋๋ค. ํ ์คํธ ๋ฐฉํฅ(์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ vs. ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ)๊ณผ ์๊ฐ์ ์์์ ๋ํ ๋ฌธํ์ ์ ํธ๋์ ์ํฅ์ ๊ณ ๋ คํฉ๋๋ค.
์๋ฅผ ๋ค์ด ์ ๋ฝ๊ณผ ์์์๋ฅผ ๋ชจ๋ ๋์์ผ๋ก ํ๋ ์ ์ ์๊ฑฐ๋ ์น์ฌ์ดํธ๋ ๋ค์ ์ฌํญ์ ๊ณ ๋ คํด์ผ ํฉ๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ ๋ฝ์ ๊ณ ํด์๋ ๋์คํ๋ ์ด์ ์์์ ์ผ๋ถ ์ง์ญ์ ๋ฎ์ ๋์ญํญ ์ฐ๊ฒฐ ๋ชจ๋์ ๋ํด ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ ์ปจํ ์ด๋ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์กฐ๊ฑด๋ถ๋ก ๋ก๋ํ ์ ์์ต๋๋ค.
- ๋ ์ด์์ ์ ์: ๋ค์ํ ํ ์คํธ ๊ธธ์ด์ ์ฝ๊ธฐ ๋ฐฉํฅ(์: ์๋์ด ๋๋ ํ๋ธ๋ฆฌ์ด)์ ์์ฉํ๋๋ก ๋ ์ด์์์ ์กฐ์ ํฉ๋๋ค.
- ๊ฒฐ์ ๊ฒ์ดํธ์จ์ด: ๋ฌธํ์ ์ ํธ๋์ ํ์ง ๊ท์ ์ ๊ณ ๋ คํ์ฌ ๋ ์ง์ญ ๋ชจ๋์์ ์ธ๊ธฐ ์๋ ๊ฒฐ์ ๊ฒ์ดํธ์จ์ด๋ฅผ ํตํฉํฉ๋๋ค.
๊ฒฐ๋ก
CSS ์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ฅผ Intersection Observer API์ ๊ฒฐํฉํ๋ฉด ๋์ ์ด๊ณ ์ ์ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๊ฐ๋ ฅํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ปจํ ์ด๋ ๋ณ๊ฒฝ์ ๊ฐ์งํ๊ณ ๋์ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ฉด ์ฑ๋ฅ์ ์ต์ ํํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ฉฐ ๋ณด๋ค ์ ์ฐํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ์ผ๋์ ๋์ด์ผ ํ ๊ณ ๋ ค ์ฌํญ์ด ์์ง๋ง ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์ด์ ์ ์ต์ ์น ๊ฐ๋ฐ์ ์ํ ๊ท์คํ ๋๊ตฌ๊ฐ ๋ฉ๋๋ค. ์ปจํ ์ด๋ ์ฟผ๋ฆฌ์ ๋ํ ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ณ์ ์ฆ๊ฐํจ์ ๋ฐ๋ผ ์์ผ๋ก ์ด ๊ธฐ์ ์ ๋์ฑ ํ์ ์ ์ด๊ณ ์ฐฝ์์ ์ธ ์ฌ์ฉ์ ๊ธฐ๋ํ ์ ์์ต๋๋ค.
์ด๋ฌํ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์ฒญ์ค์ ๋ค์ํ ์๊ตฌ์ ์ง์ ์ผ๋ก ์ ์ํ๋ ์น ๊ฒฝํ์ ๊ตฌ์ถํ์ญ์์ค.