CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ง์คํฐํ์ฌ ์น ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฑธ์ณ ์ ๋ฐํ ์ ๋๋ฉ์ด์ ์ ์ด์ ์ํํ ๋๊ธฐํ๋ฅผ ๊ตฌํํ๊ณ , ๊ณ ๊ธ ์ง๊ด์ ์ ๋๋ฉ์ด์ ๊ธฐ์ ๋ก ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์ ์ญ๋์ ๊ฐํํ์ธ์.
CSS ์คํฌ๋กค ํ์๋ผ์ธ ๊ท์น: ๊ธ๋ก๋ฒ ์น์ ์ํ ์ ๋๋ฉ์ด์ ์ ์ด ๋ฐ ๋๊ธฐํ ํ์
์ญ๋์ ์ธ ์น ๊ฐ๋ฐ ์ธ๊ณ์์ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ณ , ์ฌ์ฉ์์ ์ฃผ์๋ฅผ ์ ๋ํ๋ฉฐ, ์ธํฐํ์ด์ค๋ฅผ ๋งค๋ ฅ์ ์ผ๋ก ๋ง๋๋ ๋ฐ ์ค์ถ์ ์ธ ์ญํ ์ ํฉ๋๋ค. ์ ํต์ ์ผ๋ก ์ฌ์ฉ์ ์ํธ์์ฉ, ํนํ ์คํฌ๋กค์ ๋ฐ์ํ์ฌ ์ ๋๋ฉ์ด์ ์ ์ ์ดํ๋ ๊ฒ์ ๋ณต์กํ ์๋ฐ์คํฌ๋ฆฝํธ ์๋ฃจ์ ์ ํ์๋ก ํ์ต๋๋ค. ๊ทธ๋ฌ๋ CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ฑ์ฅ์ ์ด๋ฌํ ํ๊ฒฝ์ ํ์ ํ ์ค๋น๊ฐ ๋์ด ์์ผ๋ฉฐ, ์คํฌ๋กค ์งํ ์ํฉ์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์ ์ ๋๊ธฐํํ๋ ์ ์ธ์ ์ด๊ณ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ธ์์๋ CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด ๊ทธ ๊ธฐ๋ฅ, ์ด์ , ๊ทธ๋ฆฌ๊ณ ์ ์ธ๊ณ ๊ฐ๋ฐ์์ ๋์์ด๋๊ฐ ์ ๊ตํ ์คํฌ๋กค ๊ธฐ๋ฐ ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ์ด๋ป๊ฒ ์ง์ํ๋์ง ํ๊ตฌํฉ๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์งํ
์๋ ๊ฐ ์น ๊ฐ๋ฐ์๋ค์ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๊ธฐ๋ฐํ์ฌ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํํ๋ ๋ ์ง๊ด์ ์ธ ๋ฐฉ๋ฒ์ ๋ชจ์ํด ์์ต๋๋ค. ์คํฌ๋กค ํ์๋ผ์ธ ์ด์ ์ ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ๋ฆฌ์ค๋:
scroll์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ฐ๊ฒฐํ์ฌ ์คํฌ๋กค ์์น๋ฅผ ์ถ์ ํ ํ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ์ ๋๋ฉ์ด์ ์์ฑ(์: ํฌ๋ช ๋, ๋ณํ)์ ์๋์ผ๋ก ์ ๋ฐ์ดํธํ๋ ๋ฐฉ์์ ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ํจ๊ณผ์ ์ด์ง๋ง, ์คํฌ๋กค ์ด๋ฒคํธ๊ฐ ๋น๋ฒํ๊ฒ ๋ฐ์ํ๊ธฐ ๋๋ฌธ์ ์ ์คํ๊ฒ ์ต์ ํํ์ง ์์ผ๋ฉด ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค. - Intersection Observer API: ๊ฐ๋ฐ์๊ฐ ๋์ ์์์ ์กฐ์ ์์ ๋๋ ๋ทฐํฌํธ์ ๊ต์ฐจ ๋ณ๊ฒฝ ์ฌํญ์ ๋น๋๊ธฐ์ ์ผ๋ก ๊ด์ฐฐํ ์ ์๊ฒ ํด์ฃผ๋ ๋ ์ฑ๋ฅ์ด ์ข์ ์๋ฐ์คํฌ๋ฆฝํธ API์ ๋๋ค. ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ฌ ๋ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํ๋ ๋ฐ๋ ํ๋ฅญํ์ง๋ง, ์คํฌ๋กค๋ฐ์ ์์ง์์ ๋ฐ๋ฅธ ์ ๋๋ฉ์ด์ ์งํ ์ํฉ์ ๋ํ ์ธ๋ถํ๋ ์ ์ด๋ ์ ํ์ ์ด์์ต๋๋ค.
- ์คํฌ๋กค ๋ผ์ด๋ธ๋ฌ๋ฆฌ: GSAP(GreenSock Animation Platform)๊ณผ ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ทธ ScrollTrigger ํ๋ฌ๊ทธ์ธ์ ํ์ฉํ๋ฉด ๊ฐ๋ ฅํ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ์ข ์ข ๋ง์ ๋ณต์ก์ฑ์ ์ถ์ํํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ ์ฌ์ ํ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ธ๋ถ ์ข ์์ฑ์ ํฌํจํฉ๋๋ค.
์ด๋ฌํ ๋ฐฉ๋ฒ๋ค์ด ์น ์ปค๋ฎค๋ํฐ์ ๋ง์ ๊ธฐ์ฌ๋ฅผ ํ์ง๋ง, ์ข ์ข ์ฅํฉํ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํ๊ณ , ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ๊ด๋ฆฌํด์ผ ํ์ผ๋ฉฐ, CSS์ ๋ณธ์ง์ ์ธ ๋จ์์ฑ๊ณผ ์ ์ธ์ ํน์ฑ์ด ๋ถ์กฑํ์ต๋๋ค. CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ์ด ๊ฒฉ์ฐจ๋ฅผ ํด์ํ์ฌ ์ ๊ตํ ์ ๋๋ฉ์ด์ ์ ์ด๋ฅผ CSS ์คํ์ผ์ํธ๋ก ์ง์ ๊ฐ์ ธ์ค๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค.
CSS ์คํฌ๋กค ํ์๋ผ์ธ ์๊ฐ
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ด๋ผ๊ณ ๋ ๋ถ๋ฆฌ๋ CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ์น ๊ฐ๋ฐ์๊ฐ ์ ๋๋ฉ์ด์ ์ ์งํ ์ํฉ์ ์์์ ์คํฌ๋กค ์์น์ ์ง์ ์ฐ๊ฒฐํ ์ ์๋๋ก ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ํ์๋ผ์ธ(์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง ๋ก๋ ๋๋ ์ฌ์ฉ์ ์ํธ์์ฉ ์ฃผ๊ธฐ์ ์ฐ๊ฒฐ๋จ)์ ์์กดํ๋ ๋์ , ์คํฌ๋กค ํ์๋ผ์ธ์ ์คํฌ๋กค ๊ฐ๋ฅํ ์ปจํ ์ด๋์ ํด๋นํ๋ ์๋ก์ด ํ์๋ผ์ธ ์์ค๋ฅผ ๋์ ํฉ๋๋ค.
ํต์ฌ์ ์ผ๋ก ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ค์๊ณผ ๊ฐ์ด ์ ์๋ฉ๋๋ค:
- ์คํฌ๋กค ์ปจํ ์ด๋: ์คํฌ๋กค๋ฐ์ ์์ง์์ด ์ ๋๋ฉ์ด์ ์งํ์ ๊ฒฐ์ ํ๋ ์์์ ๋๋ค. ์ด๋ ๋ฉ์ธ ๋ทฐํฌํธ์ด๊ฑฐ๋ ํ์ด์ง์ ๋ค๋ฅธ ์คํฌ๋กค ๊ฐ๋ฅํ ์์์ผ ์ ์์ต๋๋ค.
- ์คํ์ : ์ปจํ ์ด๋์ ์คํฌ๋กค ๋ฒ์ ๋ด ํน์ ์ง์ ์ผ๋ก, ์ ๋๋ฉ์ด์ ์ ํน์ ๊ตฌ๊ฐ ์์ ๋๋ ๋์ ์ ์ํฉ๋๋ค.
์ฌ๊ธฐ์ ํต์ฌ ๊ฐ๋ ์ ๋๊ธฐํ์ ๋๋ค. ์ ๋๋ฉ์ด์ ์ ์ฌ์ ์์น๋ ๋ ์ด์ ๋ ๋ฆฝ์ ์ด์ง ์์ผ๋ฉฐ, ์ฌ์ฉ์๊ฐ ์ผ๋ง๋ ์คํฌ๋กคํ๋์ง์ ๋ณธ์ง์ ์ผ๋ก ์ฐ๊ฒฐ๋ฉ๋๋ค. ์ด๋ ์ ๋์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๋ฉฐ ๋ฌธ๋งฅ์ ์ธ์ํ๋ ์ ๋๋ฉ์ด์ ์ ๋ง๋๋ ๋ฌดํํ ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค.
์ฃผ์ ๊ฐ๋ ๋ฐ ์์ฑ
CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๊ตฌํํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์๋ก์ด CSS ์์ฑ๊ณผ ๊ฐ๋ ์ด ์ฌ์ฉ๋ฉ๋๋ค:
animation-timeline: ์ ๋๋ฉ์ด์ ์ ํ์๋ผ์ธ์ ์ฐ๊ฒฐํ๋ ํต์ฌ ์์ฑ์ ๋๋ค. ๋ฏธ๋ฆฌ ์ ์๋ ํ์๋ผ์ธ(์:scroll())์ด๋ ์ฌ์ฉ์ ์ ์ ๋ช ๋ช ๋ ํ์๋ผ์ธ์ ์์์ ์ ๋๋ฉ์ด์ ์ ํ ๋นํ ์ ์์ต๋๋ค.scroll()ํจ์: ์ด ํจ์๋ ์คํฌ๋กค ๊ธฐ๋ฐ ํ์๋ผ์ธ์ ์ ์ํฉ๋๋ค. ๋ ๊ฐ์ง ์ฃผ์ ์ธ์๋ฅผ ๋ฐ์ต๋๋ค:source: ์คํฌ๋กค ์ปจํ ์ด๋๋ฅผ ์ง์ ํฉ๋๋ค.auto(๊ฐ์ฅ ๊ฐ๊น์ด ์คํฌ๋กค๋๋ ์กฐ์์ ์ฐธ์กฐ)์ด๊ฑฐ๋ ํน์ ์์์ ๋ํ ์ฐธ์กฐ์ผ ์ ์์ต๋๋ค(์:document.querySelector('.scroll-container')์ฌ์ฉ, ๋น๋ก CSS๊ฐ ์ด๋ฅผ ๋ ์ ์ธ์ ์ผ๋ก ์ฒ๋ฆฌํ๋๋ก ๋ฐ์ ํ๊ณ ์์ง๋ง).orientation: ์คํฌ๋กค ๋ฐฉํฅ์ ์ ์ํฉ๋๋ค.block(์์ง ์คํฌ๋กค) ๋๋inline(์ํ ์คํฌ๋กค)์ ๋๋ค.motion-path: ์คํฌ๋กค ํ์๋ผ์ธ์๋ง ๊ตญํ๋ ๊ฒ์ ์๋์ง๋ง,motion-path๋ ์ข ์ข ํจ๊ป ์ฌ์ฉ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์์๋ฅผ ์ ์๋ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ๋ฐฐ์นํ ์ ์์ผ๋ฉฐ, ์คํฌ๋กค ํ์๋ผ์ธ์ ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์ด ์์น๋ฅผ ์ ๋๋ฉ์ด์ ํํ ์ ์์ต๋๋ค.animation-range: ์ด ์์ฑ์animation-timeline๊ณผ ํจ๊ป ์์ฃผ ์ฌ์ฉ๋๋ฉฐ, ์คํฌ๋กค ๊ฐ๋ฅ ๋ฒ์์ ์ด๋ ๋ถ๋ถ์ด ์ ๋๋ฉ์ด์ ์ง์ ์๊ฐ์ ์ด๋ ๋ถ๋ถ์ ๋งคํ๋๋์ง๋ฅผ ์ ์ํฉ๋๋ค. ๋ฐฑ๋ถ์จ์ด๋ ํค์๋๋ก ํํ๋๋ ์์๊ณผ ๋, ๋ ๊ฐ์ง ๊ฐ์ ๋ฐ์ต๋๋ค.
animation-range์ ๊ฐ๋ ฅํจ
animation-range ์์ฑ์ ์ธ๋ถํ๋ ์ ์ด์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์คํฌ๋กค ์งํ ์ํฉ์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์
์ด ์ธ์ ์์ํ๊ณ ๋๋์ผ ํ๋์ง๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด:
animation-range: entry 0% exit 100%;: ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ฌ ๋ ์ ๋๋ฉ์ด์ ์ด ์์๋๊ณ ๋๊ฐ ๋ ๋๋ฉ๋๋ค.animation-range: cover 50% contain 100%;: ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๋ ์ค๊ฐ ์ง์ ๋ถํฐ ์์๋ฅผ ์์ ํ ๋ฒ์ด๋ ๋๊น์ง ์ ๋๋ฉ์ด์ ์ด ์ฌ์๋ฉ๋๋ค.animation-range: 0% 100%;: ์์ค์ ์ ์ฒด ์คํฌ๋กค ๊ฐ๋ฅ ๋ฒ์๊ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ฒด ์ง์ ์๊ฐ์ ํด๋นํฉ๋๋ค.
์ด๋ฌํ ๋ฒ์๋ entry, exit, cover, contain๊ณผ ๊ฐ์ ํค์๋๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์คํฌ๋กค ๊ฐ๋ฅ ๋ฒ์์ ๋ฐฑ๋ถ์จ์ ์ฌ์ฉํ์ฌ ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ ์ฐ์ฑ์ ์ ๊ตํ ์ฐ์ถ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ค์ฉ์ ์ธ ์ ์ฉ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๊ธฐ๋ฅ์ ์ ์ธ๊ณ ์น ๊ฒฝํ์ ์ํ ์๋ง์ ์ค์ฉ์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ์ด์ด์ง๋๋ค:
1. ํจ๋ด๋์ค ์คํฌ๋กค๋ง ํจ๊ณผ
์คํฌ๋กค ํ์๋ผ์ธ์ ๊ฐ์ฅ ์ง๊ด์ ์ธ ์ฉ๋ ์ค ํ๋๋ ๊ณ ๊ธ ํจ๋ด๋์ค ํจ๊ณผ๋ฅผ ๋ง๋๋ ๊ฒ์ ๋๋ค. ๋ฐฐ๊ฒฝ ์์์ ์ ๊ฒฝ ์ฝํ ์ธ ์ ๋ค๋ฅธ ์คํฌ๋กค ํ์๋ผ์ธ์ด๋ ์ ๋๋ฉ์ด์ ๋ฒ์๋ฅผ ํ ๋นํจ์ผ๋ก์จ, ์ฌ์ฉ์ ์คํฌ๋กค์ ์ ๋์ ์ผ๋ก ๋ฐ์ํ๋ ์ ๊ตํ ๊น์ด์ ์์ง์์ ๊ตฌํํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ฌํ ์น์ฌ์ดํธ์์ ํ๊ฒฝ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ๋ชฉ์ ์ง๋ฅผ ์ค๋ช ํ๋ ์ ๊ฒฝ ํ ์คํธ์ ๋ค๋ฅธ ์๋๋ก ์์ง์ด๋ ๊ฒ์ ์์ํด ๋ณด์ธ์.
์์: ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๋ฉด์ ํ์ด๋์ธ๋๊ณ ํ๋๋ฉ๋๋ค.
```css .parallax-element { animation-name: fadeAndScale; animation-timeline: scroll(block); animation-range: entry 0% exit 50%; /* ๋ทฐํฌํธ์ ์ง์ ์ ํ์ด๋์ธ ๋ฐ ํ๋ ์์, 50% ์ง์ ์์ ์๋ฃ */ } @keyframes fadeAndScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } ```2. ์งํ๋ฅ ํ์๊ธฐ
ํน์ ์น์ ์ด๋ ์ ์ฒด ํ์ด์ง์ ์คํฌ๋กค ์์น๋ฅผ ๋ฐ์ํ๋ ๋ง์ถคํ, ์๊ฐ์ ์ธ ์งํ๋ฅ ํ์๊ธฐ๋ฅผ ๋ง๋๋ ๊ฒ์ด ์ด์ ๋ ๊ฐ๋จํด์ก์ต๋๋ค. ํ์ด์ง ์๋จ์ ์ํ ๋ง๋๊ฐ ์ฌ์ฉ์๊ฐ ์๋๋ก ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์ฑ์์ง๊ฑฐ๋, ์ํ ํ์๊ธฐ๊ฐ ๊ธฐ๋ฅ ์ฃผ์๋ฅผ ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ ์ ์์ต๋๋ค.
์์: ํน์ ์น์ ์ด ์คํฌ๋กค๋์ด ๋ณด์ผ ๋ ์ฑ์์ง๋ ๋ง์ถคํ ์งํ๋ฅ ํ์์ค.
```css .progress-bar { width: 0; background-color: blue; height: 5px; animation-name: fillProgress; animation-timeline: scroll(block); animation-range: 0% 100%; /* ๋ถ๋ชจ ์ปจํ ์ด๋์ ์ ์ฒด ์คํฌ๋กค ๋ฒ์์ ์ฐ๊ฒฐ๋จ */ } .scroll-section { animation-timeline: scroll(block); animation-range: entry 0% exit 100%; /* ์น์ ์ด ๋ทฐํฌํธ ๋ด์ ์์ ๋ */ } @keyframes fillProgress { from { width: 0; } to { width: 100%; } } ```3. ์์ฐจ์ ์์ ์ ๋๋ฉ์ด์
๋ชจ๋ ์์๋ฅผ ํ ๋ฒ์ ์ ๋๋ฉ์ด์ ํํ๋ ๋์ , ์คํฌ๋กค ํ์๋ผ์ธ์ ์ ๋ฐํ ์์ฐจ ํจ๊ณผ๋ฅผ ํ์ฉํฉ๋๋ค. ๊ฐ ์์๋ ์์ ์๊ฒ ์ง์ ๋ ์คํฌ๋กค ๋ฒ์์ ๋ค์ด์ฌ ๋ ์ ๋๋ฉ์ด์ ํ๋๋๋ก ๊ตฌ์ฑํ ์ ์์ด, ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์๋๋ก ์คํฌ๋กคํ ๋ ์์ฐ์ค๋ฝ๊ฒ ํผ์ณ์ง๋ ํจ๊ณผ๋ฅผ ๋ง๋ญ๋๋ค. ์ด๋ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ๋ ๊ต์ก ์ฝํ ์ธ ์์ ํํ ๋ณผ ์ ์์ต๋๋ค.
์์: ๋ชฉ๋ก์ ์์ดํ ๋ค์ด ๋ณด์ด๊ธฐ ์์ํ ๋ ํ๋์ฉ ์ ๋๋ฉ์ด์ ๋ฉ๋๋ค.
```css .list-item { opacity: 0; transform: translateY(20px); animation-timeline: scroll(block); animation-range: entry 0% entry 50%; /* ์์ดํ ์ด 50% ๋ณด์ผ ๋ ์ ๋๋ฉ์ด์ ์์ */ } .list-item:nth-child(2) { animation-delay: 0.1s; /* ๋จ์ ์ง์ฐ, ๋ ๊ณ ๊ธ ๋จ๊ณ์ ํจ๊ณผ๋ ๋ณ๋์ ๋ฒ์๋ก ๊ตฌํ ๊ฐ๋ฅ */ } @keyframes listItemIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } ```4. ์ธํฐ๋ํฐ๋ธ ์คํ ๋ฆฌํ ๋ง ๋ฐ ๋ฐ์ดํฐ ์๊ฐํ
์ด์ผ๊ธฐ๋ฅผ ์ ํ๊ฑฐ๋ ๋ฐ์ดํฐ๋ฅผ ์ํธ์์ฉ์ ์ผ๋ก ์ ์ํ๋ ํ๋ซํผ์ ๊ฒฝ์ฐ, ์คํฌ๋กค ํ์๋ผ์ธ์ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์งํ๋๋ ํ์๋ผ์ธ ๊ทธ๋ํฝ์ผ๋ก ์ญ์ฌ์ ์ฌ๊ฑด์ ๋ณด์ฌ์ฃผ๊ฑฐ๋, ๋ณด๊ณ ์๋ฅผ ์คํฌ๋กคํ ๋ ๋ค๋ฅธ ๋ฐ์ดํฐ ํฌ์ธํธ๊ฐ ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ํ๋๋ ๋ณต์กํ ์ฐจํธ๋ฅผ ์์ํด ๋ณด์ธ์.
์์: ์ ํ ํ์ด์ง์์ ์ฌ์ฉ์๊ฐ ๊ฐ ๋ถ๋ถ์ ๋ํ ์ค๋ช ์ ์คํฌ๋กคํ ๋ ์ ํ ๋ค์ด์ด๊ทธ๋จ์ ๊ตฌ์ฑ ์์๊ฐ ์ ๋๋ฉ์ด์ ๋๋ ๊ธฐ๋ฅ.
```css .product-diagram { animation-name: animateProduct; animation-timeline: scroll(block); animation-range: 0% 50%; /* ์ปจํ ์ด๋ ์คํฌ๋กค ๊ฐ๋ฅ ๋์ด์ ์ฒซ ์ ๋ฐ์ ์ฐ๊ฒฐ๋จ */ } @keyframes animateProduct { 0% { transform: rotateY(0deg); opacity: 0; } 50% { transform: rotateY(90deg); opacity: 0.5; } 100% { transform: rotateY(0deg); opacity: 1; } } ```5. ์ํ ์คํฌ๋กค๋ง ๋ด๋ฌํฐ๋ธ
์คํฌ๋กค ํ์๋ผ์ธ์ orientation: inline ์ต์
์ ์ฌ์ฉํ๋ฉด ๋งค๋ ฅ์ ์ธ ์ํ ์คํฌ๋กค๋ง ๊ฒฝํ์ ๋ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ์ฝํ
์ธ ๊ฐ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ํ๋ฅด๋ ํฌํธํด๋ฆฌ์ค, ํ์๋ผ์ธ ๋๋ ์บ๋ฌ์
์ ๋ณด์ฌ์ฃผ๋ ๋ฐ ์ด์์ ์
๋๋ค.
์์: ์ฌ์ฉ์๊ฐ ์ํ์ผ๋ก ์คํฌ๋กคํ ๋ ํ์ฌ ์ด๋ฏธ์ง๊ฐ ๋์ด๊ฐ๋ ์ด๋ฏธ์ง ์บ๋ฌ์ .
```css .horizontal-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; animation-timeline: scroll(inline); } .carousel-item { scroll-snap-align: start; animation-name: slide; animation-timeline: scroll(inline); animation-range: calc(var(--item-index) * 100% / var(--total-items)) calc((var(--item-index) + 1) * 100% / var(--total-items)); } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } ```๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ด์
CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ์ฑํ์ ์ ์ธ๊ณ์ ์ธ ์น ๊ฐ๋ฐ์ ์๋นํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ฑ๋ฅ: ์ ๋๋ฉ์ด์ ๋ก์ง์ ์๋ฐ์คํฌ๋ฆฝํธ์์ CSS๋ก ์ฎ๊น์ผ๋ก์จ ๋ธ๋ผ์ฐ์ ๋ ๋ ๋๋ง์ ๋ ํจ๊ณผ์ ์ผ๋ก ์ต์ ํํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ข ์ข ๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ๊ณผ ๋ ๋์ ์ฑ๋ฅ์ผ๋ก ์ด์ด์ง๋๋ค. ํนํ ์ฑ๋ฅ์ด ๋ฎ์ ๊ธฐ๊ธฐ๋ ๋์ญํญ์ด ์ ํ๋ ์ง์ญ์์ ์ด๋ ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๋๋ฌํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- ์ ๊ทผ์ฑ: CSS ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์
์
prefers-reduced-motion๊ณผ ๊ฐ์ ๋ธ๋ผ์ฐ์ ์ค์ ์ ํตํด ์ฌ์ฉ์๊ฐ ๋ ์ฝ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ์๋ ์ด๋ฌํ ์ ํธ๋์ ๋ง์ถฐ ์ ๋๋ฉ์ด์ ์ ๋นํ์ฑํํ๊ฑฐ๋ ๋จ์ํํ์ฌ ์์ง์์ ๋ฏผ๊ฐํ ์ฌ์ฉ์์๊ฒ ๋ ๋์ ๊ฒฝํ์ ๋ณด์ฅํ ์ ์์ต๋๋ค. - ์ ์ธ์ ์ ์ด: CSS์ ์ ์ธ์ ํน์ฑ์ ์ ๋๋ฉ์ด์ ์ ๋ ์์ธก ๊ฐ๋ฅํ๊ณ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ์ด๋ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์์ ์ ํํ๋ ๊ฐ๋ฐ์์ ํ์ต ๊ณก์ ์ ์ค์ด๊ณ ์ ์ง ๊ด๋ฆฌ๋ฅผ ๋จ์ํํฉ๋๋ค.
- ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ ์ผ๊ด์ฑ: CSS ํ์ค์ผ๋ก์ ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ์ผ๊ด๋๊ฒ ๊ตฌํ๋๋๋ก ์ค๊ณ๋์ด, ๋ธ๋ผ์ฐ์ ๋ณ ํด๊ฒฐ์ฑ ์ ํ์์ฑ์ ์ค์ด๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๊ท ์ผํ ๊ฒฝํ์ ๋ณด์ฅํฉ๋๋ค.
- ๋จ์ํ๋ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ: ๋์์ด๋์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ ๊น์ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋ฌธ ์ง์ ์์ด๋ ๋ณต์กํ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ์ ์์ด, ๋ ๋์ ํ์ ๊ณผ ๋น ๋ฅธ ๋ฐ๋ณต ์ฃผ๊ธฐ๋ฅผ ์ด์งํฉ๋๋ค. ์ด๋ ๋ค์ํ ๊ธฐ์ ์ ๊ฐ์ง ๊ธ๋ก๋ฒ ํ์๊ฒ ํนํ ์ ์ฉํฉ๋๋ค.
- ๊ตญ์ ํ: ์คํฌ๋กค์ ์ ์ํ๋ ์ ๋๋ฉ์ด์ ์ ์ธ์ด ํน์ ์ฝํ ์ธ ์ ์์กดํ์ง ์๊ณ ๋ ๋ชฐ์ ๊ฐ ์๋ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์คํฌ๋กค ๊ธฐ๋ฐ ์๊ฐ์ ๋ด๋ฌํฐ๋ธ๋ ๋ณดํธ์ ์ผ๋ก ์ดํด๋ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ํฅํ ๊ณ ๋ ค ์ฌํญ
CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ๋น๊ต์ ์๋กญ์ง๋ง ๋น ๋ฅด๊ฒ ๋ฐ์ ํ๋ ๊ธฐ๋ฅ์ ๋๋ค. ํฌ๋กฌ ๋ฐ ์ฃ์ง์ ๊ฐ์ ์ฃผ์ ๋ธ๋ผ์ฐ์ ์์ ์ง์์ด ๊ตฌํ๋๋ฉด์ ๋ธ๋ผ์ฐ์ ์ง์์ด ์ฆ๊ฐํ๊ณ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ชจ๋ ์ต์ฒจ๋จ ์น ๊ธฐ์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ค์ ์ฌํญ์ ์ ๋ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- caniuse.com ํ์ธ: ์ต์ ๋ธ๋ผ์ฐ์ ์ง์ ์ ๋ณด๋ ํญ์ ์ต์ ํธํ์ฑ ํ๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
- ํด๋ฐฑ(Fallback) ์ ๊ณต: ์คํฌ๋กค ํ์๋ผ์ธ์ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํด ์ ์ง์ ๊ธฐ๋ฅ ์ ํ๋ฅผ ๋ณด์ฅํ์ญ์์ค. ์ด๋ ํด๋ฐฑ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ๊ฑฐ๋ ๋จ์ํ ์ ์ ๋ฒ์ ์ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ํฌํจํ ์ ์์ต๋๋ค.
- ์ต์ ์ ๋ณด ์ ์ง: CSS ์ฌ์๊ณผ ๋ธ๋ผ์ฐ์ ๊ตฌํ์ ์ง์์ ์ผ๋ก ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ์ด๋ฌํ ๋ณํ๋ฅผ ๋ฐ๋ผ๊ฐ๋ ๊ฒ์ ์คํฌ๋กค ํ์๋ผ์ธ์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ํ์ฉํ๋ ๋ฐ ํต์ฌ์ ๋๋ค.
์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ฌ์์ CSS Animations and Transitions Level 1 ๋ชจ๋์ ์ผ๋ถ์ด๋ฉฐ, ์ด๋ ์ง์์ ์ธ ํ์คํ ๋ ธ๋ ฅ์ ๋ํ๋ ๋๋ค.
๊ตฌํ ๋ชจ๋ฒ ์ฌ๋ก
๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ํจ๊ณผ์ ์ด๊ณ ์ฑ๋ฅ ์ข์ ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ๋ณด์ฅํ๊ธฐ ์ํด:
- ์คํฌ๋กค ์ปจํ
์ด๋ ์ต์ ํ: ๋ง์ถคํ ์คํฌ๋กค ์ปจํ
์ด๋(์: `div`์
overflow: auto์ฌ์ฉ)๋ฅผ ๋ง๋๋ ๊ฒฝ์ฐ, ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌ๋๋๋ก ํ์ญ์์ค. ๊ฐ๋ฅํ ํ ๊ณผ๋ํ๊ฒ ์ค์ฒฉ๋ ์คํฌ๋กค ๊ฐ๋ฅ ์์๋ฅผ ํผํ์ญ์์ค. animation-composition์ฌ์ฉ: ์ด ์์ฑ์ ์ ๋๋ฉ์ด์ ์ ๊ฐ์ด ๋์ ์์ฑ์ ๊ธฐ์กด ๊ฐ๊ณผ ์ด๋ป๊ฒ ๊ฒฐํฉ๋์ด์ผ ํ๋์ง๋ฅผ ์ง์ ํ ์ ์๊ฒ ํด์ฃผ์ด, ํจ๊ณผ๋ฅผ ๊ณ์ธตํํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค.- ์ฌ๋ฌ ๊ธฐ๊ธฐ์์ ํ ์คํธ: ์คํฌ๋กค ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ฑ๋ฅ์ ๊ธฐ๊ธฐ๋ง๋ค ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ต๋๋ค. ๊ณ ์ฌ์ ๋ฐ์คํฌํฑ๋ถํฐ ์ค๊ธ ์ค๋งํธํฐ๊น์ง ๋ค์ํ ๊ธฐ๊ธฐ์์ ์ฒ ์ ํ ํ ์คํธ๊ฐ ์ค์ํฉ๋๋ค.
- ์ ๋๋ฉ์ด์
๋ฒ์ ์ ์คํ๊ฒ ๊ณ ๋ ค:
animation-range์ ์ ๋ฐํ ์ ์๋ ์ ๋๋ฉ์ด์ ์ด ๋๋ฌด ๋น ๋ฅด๊ฑฐ๋ ๋๋ฆฌ๊ฒ ๋๊ปด์ง๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๋ฐ ํต์ฌ์ ๋๋ค. ํค์๋์ ๋ฐฑ๋ถ์จ์ ์กฐํฉ์ ์ฌ์ฉํ์ฌ ๊ฒฝํ์ ๋ฏธ์ธ ์กฐ์ ํ์ญ์์ค. prefers-reduced-motionํ์ฉ: ํญ์ ์ฌ์ฉ์๊ฐ ์์ง์์ ์ค์ด๊ฑฐ๋ ๋นํ์ฑํํ ์ ์๋ ์ต์ ์ ์ ๊ณตํ์ญ์์ค. ์ด๋ ์น ์ ๊ทผ์ฑ์ ๊ธฐ๋ณธ ์ธก๋ฉด์ ๋๋ค.- ์ ๋๋ฉ์ด์ ์ ์ง์ค: ์คํฌ๋กค ํ์๋ผ์ธ์ด ๋ณต์กํ ์ฐ์ถ์ ๊ฐ๋ฅํ๊ฒ ํ์ง๋ง, ๊ณผ๋ํ ์ฌ์ฉ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํผ๋์ค๋ฝ๊ฒ ํ ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ ๋ชฉ์ ์ ๋ง๊ฒ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ๋ฐฉํดํ๊ธฐ๋ณด๋ค๋ ํฅ์์ํค์ญ์์ค.
- ๋ค๋ฅธ CSS ๊ธฐ๋ฅ๊ณผ ๊ฒฐํฉ: ๋ถ๋ชจ ์ปจํ
์ด๋ ํฌ๊ธฐ์ ๊ธฐ๋ฐํ ๋ฐ์ํ ์ ๋๋ฉ์ด์
์ ์ํด
@container์ฟผ๋ฆฌ์ ๊ฒฐํฉํ๊ฑฐ๋, ์กฐ๊ฑด๋ถ ์ ๋๋ฉ์ด์ ์ ์ํด ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ด์์scroll-driven-animation์ ์ฌ์ฉํ๋ ๊ฒ์ ํ์ํด ๋ณด์ธ์.
๊ธฐ๋ณธ์ ๋์ด: ๊ณ ๊ธ ๊ธฐ์
์คํฌ๋กค ํ์๋ผ์ธ์ ๋ ์ต์ํด์ง๋ฉด ๊ณ ๊ธ ๊ธฐ์ ์ ํ์ํ ์ ์์ต๋๋ค:
์ฌ์ฉ์ ์ ์ ๋ช ๋ช ๋ ํ์๋ผ์ธ
@scroll-timeline ๊ท์น์ ์ฌ์ฉํ์ฌ ๋ช
๋ช
๋ ํ์๋ผ์ธ์ ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ ๋ณต์กํ ๊ด๊ณ์ ์ฌ์ฌ์ฉ์ฑ์ ํ๋ณดํ ์ ์์ต๋๋ค.
์ฌ๋ฌ ์ ๋๋ฉ์ด์ ๋๊ธฐํ
์ฌ์ฉ์ ์ ์ ๋ช ๋ช ๋ ํ์๋ผ์ธ์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ์์์ ์ ๋๋ฉ์ด์ ์ ๋์ผํ ์คํฌ๋กค ์งํ ์ํฉ์ ๋๊ธฐํํ์ฌ ์ผ๊ด๋ ์ํ์ค๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
์คํฌ๋กค ํ์๋ผ์ธ๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฒฐํฉ
์คํฌ๋กค ํ์๋ผ์ธ์ ์๋ฐ์คํฌ๋ฆฝํธ ์์กด์ฑ์ ์ค์ด๋ ๊ฒ์ ๋ชฉํ๋ก ํ์ง๋ง, ํจ๊ณผ์ ์ผ๋ก ๊ฒฐํฉ๋ ์ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์คํฌ๋กค ํ์๋ผ์ธ ์์ค, ๋ฒ์ ๋๋ CSS๋ง์ผ๋ก๋ ์ฒ๋ฆฌํ ์ ์๋ ๋ ๋ณต์กํ ๋ก์ง์ ๊ธฐ๋ฐํ์ฌ ์ ๋๋ฉ์ด์ ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ํธ๋ฆฌ๊ฑฐํ๊ฑฐ๋ ๋์ ์ผ๋ก ์์ฑ ๋๋ ์์ ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
CSS ์คํฌ๋กค ํ์๋ผ์ธ์ ์น ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ ์ค์ํ ๋์ฝ์ ๋ํ๋ด๋ฉฐ, ์ฌ์ฉ์ ์คํฌ๋กค๊ณผ ์ ๋๋ฉ์ด์ ์ ๋๊ธฐํํ๋ ๊ฐ๋ ฅํ๊ณ ์ ์ธ์ ์ด๋ฉฐ ์ฑ๋ฅ ์ข์ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐ ์ปค๋ฎค๋ํฐ์๊ฒ ์ด๋ ๊ตฌ์ถ ๋ฐ ์ ์ง ๊ด๋ฆฌ๊ฐ ๋ ์ฌ์ด, ๋ ๋งค๋ ฅ์ ์ด๊ณ ์ ๊ทผ์ฑ ์์ผ๋ฉฐ ์ ๊ตํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ณ์ ์ฆ๊ฐํจ์ ๋ฐ๋ผ, ์ ์ธ๊ณ ๊ฐ๋ฐ์์ ๋์์ด๋๋ ์ง์ ์ผ๋ก ๊ธฐ์ต์ ๋จ๊ณ ์ํธ์์ฉ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ์ ์ ๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ๊ฐ๊ฒ ๋ ๊ฒ์ ๋๋ค. ์คํฌ๋กค ํ์๋ผ์ธ์ ์ฑํํ๋ ๊ฒ์ ๋จ์ํ ๋ฉ์ ๋ํ๋ ๊ฒ์ด ์๋๋ผ, ๋ณดํธ์ ์ผ๋ก ์ฐ๊ฒฐ๋ ๋์งํธ ํ๊ฒฝ์์ ์ฌ์ฉ์ฑ๊ณผ ์ ๊ทผ์ฑ์ ํฅ์์ํค๋ ๊ฒ์ ๋๋ค.
์ด๋ฌํ ๊ธฐ์ ์ ์ดํดํ๊ณ ๊ตฌํํจ์ผ๋ก์จ, ์น ํ๋ก์ ํธ๋ฅผ ํ ๋จ๊ณ ๋์ด์ฌ๋ ค ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ๋ชจ๋ ์ง์ญ๊ณผ ๊ธฐ๊ธฐ์ ์ฌ์ฉ์์๊ฒ ์ฑ๋ฅ์ด ์ข๊ณ ์ ๊ทผ์ฑ์ด ๋ฐ์ด๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.