CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์์๋ณด์ธ์. ํ์ด์ง๋ ์ปจํ ์ด๋์ ์คํฌ๋กค ์์น์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์ ์ ์ ์ดํ๋ ๊ฐ๋ ฅํ ์น ์ ๋๋ฉ์ด์ ๊ธฐ์ ๋ก, ์ธํฐ๋ํฐ๋ธํ ์ ๋๋ฉ์ด์ ์ ํตํด ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ : ์ธํฐ๋ํฐ๋ธ ์ ๋๋ฉ์ด์ ์ ์ด
์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์
์ ์น ์ ๋๋ฉ์ด์
์ ํ๋ช
์ ์ผ์ผํค๋ฉฐ, ๋ ๋งค๋ ฅ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. :hover์ ๊ฐ์ ์ด๋ฒคํธ๋ก ํธ๋ฆฌ๊ฑฐ๋๋ ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ด๋จธ๋ ์ ํต์ ์ธ CSS ํคํ๋ ์์ ์์กดํ๋ ๋์ , ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์
์ ์ ๋๋ฉ์ด์
์ ์งํ ์ํ๋ฅผ ํ์ด์ง๋ ํน์ ์ปจํ
์ด๋์ ์คํฌ๋กค ์์น์ ์ง์ ์ฐ๊ฒฐํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์์ ์คํฌ๋กค์ ๋์ ์ผ๋ก ๋ฐ์ํ๋ ์ง๊ด์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ์ ๋๋ฉ์ด์
์ ๋ง๋ค ์ ์์ต๋๋ค.
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ด๋?
๊ธฐ๋ณธ์ ์ผ๋ก, ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ CSS ์ ๋๋ฉ์ด์ ์ ์งํ ์ํ๋ฅผ ์คํฌ๋กค ์์น์ ์ฐ๊ฒฐํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ, ์ ๋๋ฉ์ด์ ์ ์คํฌ๋กค ํ๋๊ณผ ์ง์ ์ ์ธ ๊ด๊ณ๋ฅผ ๋งบ์ผ๋ฉฐ ์งํ, ์ผ์ ์ ์ง, ๋๊ฐ๊ธฐ ๋๋ ๋นจ๋ฆฌ ๊ฐ๊ธฐ๋ฉ๋๋ค. ์ด๋ ํจ๋ด๋์ค ์คํฌ๋กค๋ง, ์งํ๋ฅ ํ์๊ธฐ, ์ฝํ ์ธ ์ ์ง์ ํ์ ๋ฑ๊ณผ ๊ฐ์ ๋งคํน์ ์ธ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์๋ ๋ฌดํํ ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ณ ์ ์๊ฐ ์ ๋๋ฉ์ด์ ์ผ๋ก ์ ์๋ ๋ถ์ฐ์์ ์ธ ๋จ๊ณ ๋์ , ์ด์ ์ฐ๋ฆฌ๋ ์คํฌ๋กค ์ปจํ ์ด๋๋ฅผ ์ผ์ข ์ ๋ง์คํฐ ํ์๋ผ์ธ์ผ๋ก ์ฌ์ฉํฉ๋๋ค. ์ด๋ ์ ๋๋ฉ์ด์ ์ด ์ฌ์ฉ์์ ํ์ด์ง ๋ด ํ๋์ ์ง์ ์ ์ผ๋ก ์ฐ๊ฒฐ๋๊ธฐ ๋๋ฌธ์ ํจ์ฌ ๋ ์์ฐ์ค๋ฌ์ด ๋๋์ ์ค๋๋ค.
์ฃผ์ ๊ฐ๋ ๋ฐ ์ฉ์ด
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๋ ค๋ฉด ํต์ฌ ๊ฐ๋ ๊ณผ ์ฉ์ด๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์คํฌ๋กค ํ์๋ผ์ธ(Scroll Timeline): ์ ๋๋ฉ์ด์ ์ ๊ตฌ๋ํ๋ ์คํฌ๋กค ๊ฐ๋ฅํ ์์ญ์ ๋๋ค. ์ด๋ ์ ์ฒด ๋ฌธ์(๋ทฐํฌํธ)์ด๊ฑฐ๋ ํน์ ์ปจํ ์ด๋ ์์์ผ ์ ์์ต๋๋ค.
- ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ(Animation Timeline): ์๊ฐ์ ๋ฐ๋ฅธ ์ ๋๋ฉ์ด์ ์ ์งํ์ ์ ์ํ๋ CSS์ ๊ธฐ๋ฅ์ ๋๋ค. ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์์๋ ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ์ด ์คํฌ๋กค ํ์๋ผ์ธ๊ณผ ๋๊ธฐํ๋ฉ๋๋ค.
animation-timeline: ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ์ ์ง์ ํ๋ CSS ์์ฑ์ ๋๋ค.@scroll-timeline์ ์ฌ์ฉํ์ฌ ์ด๋ฆ์ด ์๋ ํ์๋ผ์ธ์ ๋ง๋ค๊ฑฐ๋scroll()๋๋view()์ ๊ฐ์ ์์์ ํ์๋ผ์ธ์ ํ์ฉํ ์ ์์ต๋๋ค.animation-range: ๋ทฐ ํ์๋ผ์ธ๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ CSS ์์ฑ์ผ๋ก, ์์์ ๊ฐ์์ฑ ์ค ์ด๋ ๋ถ๋ถ์ด ์ ๋๋ฉ์ด์ ์ ๊ตฌ๋ํ ์ง ์ง์ ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ๊ฐ์ผ๋ก๋ `entry`, `cover`, `exit`๊ฐ ์์ต๋๋ค.- ์คํฌ๋กค ์คํ์ (Scroll Offsets): ํน์ ์ ๋๋ฉ์ด์ ์ํ๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ์คํฌ๋กค ํ์๋ผ์ธ ๋ด์ ์ง์ ์ ๋๋ค.
- ๋ทฐ ํ์๋ผ์ธ(View Timeline): ์ปจํ ์ด๋ ๋ด ์์์ ๊ฐ์์ฑ๊ณผ ์ฐ๊ฒฐ๋ ํน์ ์ ํ์ ์คํฌ๋กค ํ์๋ผ์ธ์ ๋๋ค. ์์๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ฑฐ๋, ๋ทฐํฌํธ๋ฅผ ๋ฎ๊ฑฐ๋, ๋ทฐํฌํธ์์ ๋๊ฐ ๋ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
- ๋ทฐํฌํธ(Viewport): ๋ธ๋ผ์ฐ์ ์ฐฝ์์ ์น ํ์ด์ง์ ๋ณด์ด๋ ์์ญ์ ๋๋ค.
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ฌ์ฉ์ ์ด์
์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ์ด์ ์ด ์์ต๋๋ค:
- ์ฌ์ฉ์ ๊ฒฝํ ํฅ์: ๋ ๋งค๋ ฅ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ๊ฒฝํ์ ๋ง๋ค์ด ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๋์ ๋๋ค.
- ์คํ ๋ฆฌํ ๋ง ๊ฐํ: ์ฌ์ฉ์ ์ํธ์์ฉ์ ๊ธฐ๋ฐํ ๋์ ์ธ ์ฝํ ์ธ ํ์์ ์์ฌ์ ์งํ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์คํฌ๋กคํ๋ฉด์ ์ฃผ์ ์ฌ๊ฑด์ด ํด๋น ์ ๋๋ฉ์ด์ ๊ณผ ํจ๊ป ๋๋ฌ๋๋ ์ญ์ฌ ํ์๋ผ์ธ์ ์์ํด๋ณด์ธ์.
- ์ฑ๋ฅ ์ต์ ํ: ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฅ์ ํ์ฉํ์ฌ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ์๋ฃจ์ ์ ๋นํด ์ข ์ข ๋ ๋ถ๋๋ฌ์ด ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- ์ ๊ทผ์ฑ: ์ผ๋ถ ๋ณต์กํ ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์ ๋ณด๋ค ๋ ์ ๊ทผ์ฑ ์๊ฒ ์ค๊ณ๋ ์ ์์ผ๋ฉฐ, ํนํ ์๋งจํฑ HTML๊ณผ ํจ๊ป ์ฌ์ฉ๋ ๋ ๊ทธ๋ ์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ด ๋ฐ์์ ์ ๋ฐํ ์ ์๋ ๋ฒ์ฉ์์ด๋ ๊น๋นก์ ํจ๊ณผ๋ฅผ ์ผ์ผํค์ง ์๋๋ก ํด์ผ ํฉ๋๋ค.
- ์ ์ธ์ ์ ๊ทผ ๋ฐฉ์: CSS์์ ์ง์ ์ ๋๋ฉ์ด์ ์ ์ ์ํ์ฌ ๋ ๊น๋ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ์ด์งํฉ๋๋ค.
๊ธฐ๋ณธ ๊ตฌํ: @scroll-timeline ์ฌ์ฉํ๊ธฐ
@scroll-timeline์ ์ฌ์ฉํ์ฌ ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์
์ ๋ง๋๋ ๊ธฐ๋ณธ ์์ ๋ถํฐ ์์ํ๊ฒ ์ต๋๋ค.
HTML:
<div class="container">
<div class="animated-element">Scroll me!</div>
</div>
CSS:
.container {
height: 500px;
overflow-y: scroll;
}
.animated-element {
width: 100px;
height: 100px;
background-color: #007bff;
color: white;
text-align: center;
line-height: 100px;
animation: rotate 5s linear forwards;
animation-timeline: scroll-container;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@scroll-timeline scroll-container {
source: auto; /* Or specify the container: element(selector) */
orientation: block; /* Or 'inline' for horizontal scrolling */
}
์ค๋ช :
.container๋ ๊ณ ์ ๋ ๋์ด์overflow-y: scroll์ ๊ฐ์ง๊ณ ์์ด ์คํฌ๋กค ๊ฐ๋ฅํ ์ปจํ ์ด๋๊ฐ ๋ฉ๋๋ค..animated-element๋ ์ฐ๋ฆฌ๊ฐ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๋ ค๋ ์์์ ๋๋ค.- ์์๋ฅผ ํ์ ์ํค๋ ๊ฐ๋จํ
@keyframes rotate์ ๋๋ฉ์ด์ ์ ์ ์ํฉ๋๋ค. animation-timeline: scroll-container๋ ์ ๋๋ฉ์ด์ ์scroll-containerํ์๋ผ์ธ์ ์ฐ๊ฒฐํฉ๋๋ค.@scroll-timeline๋ธ๋ก์ "scroll-container"๋ผ๋ ์ด๋ฆ์ ์คํฌ๋กค ํ์๋ผ์ธ์ ์ ์ํฉ๋๋ค.source: auto๋ ๋ธ๋ผ์ฐ์ ์๊ฒ ์์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์คํฌ๋กค ๊ฐ๋ฅํ ์กฐ์์ ์๋์ผ๋ก ์ฐพ๋๋ก ์ง์ํฉ๋๋ค. ํน์ ์์๋ฅผ ํ๊ฒํ ํ๊ธฐ ์ํดsource: element(#container)๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.orientation: block์ ์ ๋๋ฉ์ด์ ์ด ์์ง ์คํฌ๋กค(์ํ)์ ์ํด ๊ตฌ๋๋จ์ ์ง์ ํฉ๋๋ค. ์ํ ์คํฌ๋กค(์ข์ฐ)์๋orientation: inline์ ์ฌ์ฉํฉ๋๋ค.
๊ณ ๊ธ ๊ธฐ์ : ๋ทฐ ํ์๋ผ์ธ ์ฌ์ฉํ๊ธฐ
๋ทฐ ํ์๋ผ์ธ์ ์ ๋๋ฉ์ด์ ์ ๋ทฐํฌํธ๋ ํน์ ์ปจํ ์ด๋ ๋ด ์์์ ๊ฐ์์ฑ๊ณผ ์ฐ๊ฒฐํ์ฌ ๋ ์ธ๋ฐํ ์ ์ด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ํตํด ์์๊ฐ ๋ณด์ด๋ ์์ญ์ ๋ค์ด์ค๊ฑฐ๋, ๋ฎ๊ฑฐ๋, ๋๊ฐ ๋ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
HTML:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
CSS:
.container {
height: 300vh; /* Makes the container scrollable */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.item {
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin-bottom: 20px;
opacity: 0;
animation: fadeIn 1s linear forwards;
animation-timeline: view(); /* Implicit view timeline */
animation-range: entry 20% cover 80%;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
์ค๋ช :
.container๋ ์คํฌ๋กคํ ์ ์๋ ์ถฉ๋ถํ ์ฝํ ์ธ ๋ฅผ ํ๋ณดํ๊ธฐ ์ํดheight: 300vh๋ก ์ค์ ๋ฉ๋๋ค..item์์๋ ์ด๊ธฐ์opacity: 0์ ๊ฐ์ง๋๋ค.animation-timeline: view()์์ฑ์ ๊ฐ ์์ดํ ์ ๋ํ ์์์ ๋ทฐ ํ์๋ผ์ธ์ ์์ฑํฉ๋๋ค. ์ด๋ ์ ๋๋ฉ์ด์ ์ด ๋ทฐํฌํธ ๋ด์์ ์์ดํ ์ ๊ฐ์์ฑ๊ณผ ์ฐ๊ฒฐ๋ ๊ฒ์์ ์๋ฏธํฉ๋๋ค.animation-range: entry 20% cover 80%์์ฑ์ ์ ๋๋ฉ์ด์ ์ ๊ตฌ๋ํ ์์์ ๊ฐ์์ฑ ๋ฒ์๋ฅผ ์ ์ํฉ๋๋ค. ์๋ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:entry 20%: ์์ดํ ์ ์๋จ ๊ฐ์ฅ์๋ฆฌ๊ฐ ๋ทฐํฌํธ ํ๋จ์์ 20% ์ง์ ์ ๋๋ฌํ์ ๋ ์ ๋๋ฉ์ด์ ์ด ์์๋ฉ๋๋ค.cover 80%: ์์ดํ ์ ํ๋จ ๊ฐ์ฅ์๋ฆฌ๊ฐ ๋ทฐํฌํธ ์๋จ์์ 80% ์ง์ ์ ์ง๋ฌ์ ๋ ์ ๋๋ฉ์ด์ ์ด ์๋ฃ๋ฉ๋๋ค.@keyframes fadeIn์ ๋๋ฉ์ด์ ์ ์์์ ๋ถํฌ๋ช ๋๋ฅผ ์ ์ง์ ์ผ๋ก ์ฆ๊ฐ์ํต๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์๋ง์ ์ฐฝ์์ ์ธ ๋ฐฉ์์ผ๋ก ์ ์ฉ๋ ์ ์์ต๋๋ค. ๋ช ๊ฐ์ง ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํจ๋ด๋์ค ์คํฌ๋กค๋ง: ๋ฐฐ๊ฒฝ ์์๋ฅผ ์ ๊ฒฝ ์ฝํ ์ธ ์ ๋นํด ๋ค๋ฅธ ์๋๋ก ์์ง์ฌ ๊น์ด๊ฐ๊ณผ ์๊ฐ์ ํฅ๋ฏธ๋ฅผ ๋ง๋ญ๋๋ค. ๋ฐ๋ฆฌ์ ๋ฆฌ์กฐํธ๋ ๋ก๋ง์ ์ ์ ์ง ๊ฐ์ ๊ด๊ด์ง ์น์ฌ์ดํธ์์ ๋ชฐ์ ๊ฐ ์๋ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด ํจ๋ด๋์ค ์คํฌ๋กค๋ง์ ๋ง์ด ์ฌ์ฉํฉ๋๋ค.
- ์งํ๋ฅ ํ์๊ธฐ: ์ฌ์ฉ์๊ฐ ๊ธฐ์ฌ๋ ํํ ๋ฆฌ์ผ์ ์คํฌ๋กคํ ๋ ์ฑ์์ง๋ ์งํ๋ฅ ๋ง๋๋ฅผ ํ์ํฉ๋๋ค. Coursera๋ edX์ ๊ฐ์ ๊ต์ก ํ๋ซํผ์์ ํ์ต์๊ฐ ๊ณผ์ ์์ ์ผ๋ง๋ ์งํํ๋์ง ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ฝํ ์ธ ํ์: ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ์ฝํ ์ธ ๋ฅผ ์ ์ง์ ์ผ๋ก ํ์ํ์ฌ ๋ฐ๊ฒฌ์ ์ฆ๊ฑฐ์์ ์ฃผ๊ณ ๋ ํ์ํ๋๋ก ์ ๋ํฉ๋๋ค. ๋ด์ ํ์์ฆ๋ BBC ๊ฐ์ ๋ด์ค ์น์ฌ์ดํธ์์ ์ฅ๋ฌธ์ ๊ธฐ์ฌ์ ์ด ๊ธฐ์ ์ ์์ฃผ ์ฌ์ฉํฉ๋๋ค.
- ์ธํฐ๋ํฐ๋ธ ์ฐจํธ ๋ฐ ๋ฐ์ดํฐ ์๊ฐํ: ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ ๋ ์ฐจํธ์ ๊ทธ๋ํ๋ฅผ ์ ๋๋ฉ์ด์ ํํ์ฌ ์ฃผ์ ๋ฐ์ดํฐ ํฌ์ธํธ์ ์ถ์ธ๋ฅผ ๊ฐ์กฐํฉ๋๋ค. ๋ธ๋ฃธ๋ฒ๊ทธ๋ ๋ก์ดํฐ์ ๊ฐ์ ๊ธ์ต ๋ด์ค ์น์ฌ์ดํธ์์ ๊ฒฝ์ ๋ฐ์ดํฐ๋ฅผ ๋งค๋ ฅ์ ์ธ ๋ฐฉ์์ผ๋ก ์ ์ํ๊ธฐ ์ํด ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ: ์ด๋ฏธ์ง๊ฐ ์์ผ์ ๋ค์ด์ฌ ๋ ์ ํ๋๊ฑฐ๋ ํ๋๋๋ ์ธํฐ๋ํฐ๋ธ ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ๋ฅผ ๋ง๋ญ๋๋ค. ํจ์ ๋ธ๋๋๋ ๋ฏธ์ ๊ด์์ ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ์ฌ ์ปฌ๋ ์ ์ ์ ๋ณด์ผ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ผ๋ณธ ํจ์ ํ์ฐ์ค๋ ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํจ์ ๋ฐ๋ผ ๋ฐ์จ์ด ์ผ ์ฌ์ง์ ์๋๊ฐ์ ๋ถ์ด๋ฃ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋ฐ ํด๋ฆฌํ
์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ๋น๊ต์ ์๋ก์ด ๊ธฐ๋ฅ์ด๋ฏ๋ก ๋ธ๋ผ์ฐ์ ์ง์์ด ๋ค๋ฅผ ์ ์์ต๋๋ค. 2023๋ ํ๋ฐ ๊ธฐ์ค์ผ๋ก ์ต์ ๋ฒ์ ์ Chrome๊ณผ Edge๋ ์ ์ง์ํฉ๋๋ค. Firefox๋ ์คํ์ ํ๋๊ทธ ๋ค์ ์ด ๊ธฐ๋ฅ๋ค์ ๊ตฌํํ์ผ๋ฉฐ Safari๋ ์ง์์ ์ํด ์ง์ ์ ๋ณด์ด๊ณ ์์ต๋๋ค. ์ด ๊ธฐ์ ์ ํ๋ก๋์ ํ๊ฒฝ์ ๊ตฌํํ๊ธฐ ์ ์ "Can I use..."์ ๊ฐ์ ์ฌ์ดํธ์์ ์ต์ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ ๋ณด๋ฅผ ํ์ธํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ค๋๋ ๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ ํด๋ฆฌํ์ ํตํด ์ ํ์ ์ธ ์ง์์ ์ ๊ณตํ ์ ์์ต๋๋ค. ํ์ง๋ง, ์ฒ ์ ํ ํ ์คํธํ๊ณ ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์ ์ฌ์ฉ์๋ฅผ ์ํด ๋์ฒด ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ฑ๋ฅ ๊ณ ๋ ค์ฌํญ
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ด ์ข์ง๋ง, ๋ค์ ์ฌํญ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ๊ฐ๋จํ ์ ๋๋ฉ์ด์ ์ ์ง: ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ๋ฐ ๋น๋์ค ์ต์ ํ: ํฐ ์์ ์ ํ์ด์ง ๋ก๋ ์๊ฐ์ ๋ฆ์ถ๊ณ ์ ๋๋ฉ์ด์ ์ ๋ถ๋๋ฌ์์ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
- ํ๋์จ์ด ๊ฐ์ ์ฌ์ฉ:
transform์ด๋opacity๊ฐ์ CSS ์์ฑ์ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ด ํ๋์จ์ด ๊ฐ์์ ํ์ฉํ๋๋ก ํ์ญ์์ค. - ์คํฌ๋กค ์ด๋ฒคํธ ์กฐ์ : ๋ชจ๋ ์คํฌ๋กค ์ด๋ฒคํธ์ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํ์ง ๋ง์ญ์์ค. ๋๋ฐ์ด์ฑ์ด๋ ์ค๋กํ๋ง๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ ๋ฐ์ดํธ ๋น๋๋ฅผ ์ ํํ์ญ์์ค. (์ฐธ๊ณ : ์๋ก์ด CSS scroll-timeline ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฅผ ์๋์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค).
- ๋ค์ํ ๊ธฐ๊ธฐ์์ ํ ์คํธ: ์ผ๊ด๋ ์ฑ๋ฅ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๋๋ฉ์ด์ ์ ํ ์คํธํ์ญ์์ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ
๋ชจ๋ ์น ์ ๋๋ฉ์ด์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก, ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ๋ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์ ๋๋ฉ์ด์ ์ ๋นํ์ฑํํ ์ฌ์ฉ์๋ฅผ ์ํ ๋์ ์ ๊ณต: ์ฌ์ฉ์๊ฐ ํ๊ฒฝ ์ค์ ์ด๋ ๋ธ๋ผ์ฐ์ ์ค์ ์ ํตํด ์ ๋๋ฉ์ด์ ์ ๋นํ์ฑํํ ์ ์๋๋ก ํ์ฉํ์ญ์์ค.
- ๋ฒ์ฉ์ด๊ฑฐ๋ ๊น๋นก์ด๋ ํจ๊ณผ ํผํ๊ธฐ: ์ด๋ฌํ ํจ๊ณผ๋ ์ผ๋ถ ์ฌ์ฉ์์๊ฒ ๋ฐ์์ ์ ๋ฐํ ์ ์์ต๋๋ค.
- ์ถฉ๋ถํ ๋๋น ๋ณด์ฅ: ํ ์คํธ ๋ฐ ๊ธฐํ ์์๊ฐ ๋ฐฐ๊ฒฝ๊ณผ ์ถฉ๋ถํ ๋๋น๋ฅผ ๊ฐ๋๋ก ํ์ญ์์ค.
- ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ ์ค๋ช ์ ๊ณต: ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ฅผ ์ํด ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ ๋ํ ์ค๋ช ์ ์ ๊ณตํ์ญ์์ค.
- ์ค์ ์ ๋ณด๋ฅผ ์ ๋๋ฉ์ด์ ๋ง์ผ๋ก ์ ๋ฌํ์ง ์๊ธฐ: ๋ชจ๋ ์ค์ํ ์ ๋ณด๋ ์ ๋๋ฉ์ด์ ์ด ์๋ ํ์์ผ๋ก๋ ์ ๊ณต๋์ด์ผ ํฉ๋๋ค.
๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ฑ๊ณต์ ์ธ ๊ตฌํ์ ์ํด ๋ค์๊ณผ ๊ฐ์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ญ์์ค:
- ๋ช ํํ ๋ชฉํ๋ก ์์ํ๊ธฐ: ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ฌด์์ ๋ฌ์ฑํ๊ณ ์ถ์์ง, ๊ทธ๊ฒ์ด ์ด๋ป๊ฒ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ๊ฒ์ธ์ง ์ ์ํ์ญ์์ค.
- ์ ๋๋ฉ์ด์ ์ ์คํ๊ฒ ๊ณํํ๊ธฐ: ์ ๋๋ฉ์ด์ ๋จ๊ณ์ ์คํฌ๋กค์ ์ด๋ป๊ฒ ๋ฐ์ํ ์ง ๊ตฌ์ํ์ญ์์ค.
- ์๋งจํฑ HTML ์ฌ์ฉํ๊ธฐ: ์๋งจํฑ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ์ ๋ช ํํ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํ์ญ์์ค.
- ๊นจ๋ํ๊ณ ์ ์ ๋ฆฌ๋ CSS ์์ฑํ๊ธฐ: ์ฃผ์๊ณผ ์ค๋ช ์ ์ธ ํด๋์ค ์ด๋ฆ์ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ์ดํดํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฝ๊ฒ ๋ง๋์ญ์์ค.
- ์ฒ ์ ํ ํ ์คํธํ๊ธฐ: ์ผ๊ด๋ ๋์์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ์ ๋๋ฉ์ด์ ์ ํ ์คํธํ์ญ์์ค.
- ๋ฐ๋ณต ๋ฐ ๊ฐ์ ํ๊ธฐ: ์ฌ์ฉ์ ํผ๋๋ฐฑ๊ณผ ํ ์คํธ๋ฅผ ๋ฐํ์ผ๋ก ์ ๋๋ฉ์ด์ ์ ์คํํ๊ณ ๊ฐ์ ํ๋ ๊ฒ์ ๋๋ ค์ํ์ง ๋ง์ญ์์ค.
์น ์ ๋๋ฉ์ด์ ์ ๋ฏธ๋
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์น ์ ๋๋ฉ์ด์ ์ ์ค์ํ ์ง์ ์ ๋ํ๋ ๋๋ค. ์ด๋ ๋งค๋ ฅ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋๋ ๊ฐ๋ ฅํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ์ง์์ด ๊ณ์ ๊ฐ์ ๋จ์ ๋ฐ๋ผ, ์ด ๊ธฐ์ ์ ๋์ฑ ์ฐฝ์์ ์ด๊ณ ํ์ ์ ์ธ ์ฌ์ฉ์ ๊ธฐ๋ํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ์ ์ธ ์คํฌ๋กค ํจ๊ณผ๋ฅผ ๋์ด, ๋ฏธ๋์ ๋ฐ์ ์๋ ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ์ ๋ํ ๋ ์ ๊ตํ ์ ์ด, ๋ค๋ฅธ ์น ๊ธฐ์ ๊ณผ์ ํตํฉ, ๊ทธ๋ฆฌ๊ณ ํฅ์๋ ์ ๊ทผ์ฑ ๊ธฐ๋ฅ์ด ํฌํจ๋ ์ ์์ต๋๋ค. ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ WebGL๊ณผ ๊ฒฐํฉํ์ฌ ํจ์ฌ ๋ ๋ชฐ์ ๊ฐ ์๊ณ ์๊ฐ์ ์ผ๋ก ๋๋ผ์ด ๊ฒฝํ์ ๋ง๋๋ ๊ฒ์ ์์ํด๋ณด์ญ์์ค. ๊ฐ๋ฅ์ฑ์ ๋ฌดํํฉ๋๋ค!
๊ฒฐ๋ก
CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ์ธํฐ๋ํฐ๋ธํ๊ณ ๋งค๋ ฅ์ ์ธ ์น ๊ฒฝํ์ ๋ง๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ์คํฌ๋กค ์์น์ ์ฐ๊ฒฐํจ์ผ๋ก์จ, ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ง์ ๋ฐ์ํ๋ ๋์ ์ธ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ํต์ฌ ๊ฐ๋ ์ ์ดํดํ๊ณ , ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ตฌํํ๋ฉฐ, ์ ๊ทผ์ฑ์ ์ผ๋์ ๋๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ฌ๋ก์ก๊ณ ์ฆ๊ฒ๊ฒ ํ๋ ์ง์ ์ผ๋ก ๋ฐ์ด๋ ์น ๊ฒฝํ์ ๋ง๋ค ์ ์์ ๊ฒ์ ๋๋ค.
์ ๊ณต๋ ์์ ๋ฅผ ์คํํ๊ณ , ์ต์ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ ํ์ํ๋ฉฐ, ์ฐฝ์๋ ฅ์ ๋ฐํํ์ฌ CSS ์คํฌ๋กค ์ฐ๋ ์ ๋๋ฉ์ด์ ์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ๋์ด๋ด์ญ์์ค. ์น์ ๋น์ ์ ์บ๋ฒ์ค์ ๋๋ค; ๋งค๋ ฅ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ๊ฒฝํ์ผ๋ก ๊ทธ๊ฒ์ ์ฑ์ํ์ญ์์ค!