새로운 CSS 스크롤 기능이 JavaScript를 대체할 것입니다
Source: Dev.to
Modern CSS That Replaces JavaScript (Part 1) — Scroll‑Based Visibility Without JS
이 글은 일반적인 JavaScript 패턴을 대체할 수 있는 최신 CSS 기능을 다루는 시리즈의 첫 번째 파트이며, 성능, 접근성 및 유지보수성을 향상시킵니다.
수년간 스크롤 위치에 따라 UI 요소를 보여주거나 숨기려면 JavaScript를 사용해야 했습니다. 최신 CSS가 그 흐름을 바꾸고 있습니다. 스크롤‑구동 컨테이너 쿼리가 도입되면서 이제 순수 CSS만으로 스크롤 기반 UI 가시성을 관리할 수 있게 되었으며, JavaScript는 필요 없습니다.
이 글에서는 새 CSS scroll-state 기능을 이용해 페이지가 스크롤 가능할 때만 나타나는 “Back to Top” 버튼을 만들어 보겠습니다.
Why This Matters
JavaScript 스크롤 핸들러는 다음과 같은 문제를 일으킬 수 있습니다.
- 저사양 기기에서 성능 저하
- 불필요한 복잡성 추가
- 디바운싱 또는 스로틀링 필요
- 번들 크기 증가
현대 CSS는 다음을 제공합니다.
- 향상된 성능
- 선언형 UI 동작
- 더 깔끔하고 유지보수하기 쉬운 코드
The Key Concept: scroll-state Container Queries
CSS는 이제 컨테이너 쿼리를 사용해 스크롤 조건에 반응할 수 있습니다. 우리는 다음을 정의합니다.
- 스크롤 컨테이너
- 이름이 지정된 스크롤 상태
- 스크롤 위치에 기반한 조건부 스타일
Step 1: Define the Scroll Container
html {
container-type: scroll-state;
container-name: page;
scroll-behavior: smooth;
}이 코드는 html 요소를 page라는 이름의 scroll-state 컨테이너로 전환합니다.
Step 2: Base Page Styling
html,
body {
padding: 0;
margin: 0;
}
.title-header {
background-color: #4caf50;
color: white;
padding: 10px 0;
text-align: center;
font-size: 24px;
}
.content {
max-width: 480px;
margin: 0 auto;
}특별한 점은 없습니다—단순히 레이아웃과 타이포그래피를 정의한 것입니다.
Step 3: Back‑to‑Top Button (Hidden by Default)
.backtotop {
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
background: #000066;
color: #fff;
padding: 10px 16px;
border-radius: 30px;
font-size: 24px;
text-decoration: none;
/* Move the button off‑screen; animations stay smooth */
translate: 300px 0;
transition: translate 0.3s ease-in-out;
}display:none 대신 translate를 사용해 버튼을 화면 밖으로 이동시키므로 애니메이션이 부드럽게 유지됩니다.
Step 4: Reveal Button Using a Scroll‑State Query
@container page scroll-state(scrollable: top) {
.backtotop {
translate: 0 0;
}
}이 의미는
- 페이지가 스크롤 가능해지고 상단에서 스크롤이 가능해지면 버튼이 자동으로 슬라이드되어 나타납니다.
- JavaScript가 전혀 필요 없습니다. 스크롤 리스너도 없습니다.
HTML Markup
<h1>Manage Visibility on Scroll with NO JS</h1>
<h2>NEW CSS Scroll Features Will Replace JavaScript</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
<a href="#top">Move to top</a>Why This Is a Big Deal
- ✅ JavaScript 전혀 없음 – 런타임 오버헤드가 사라집니다.
- 활용 사례:
- 스티키 헤더
- 스크롤‑투‑탑 버튼
- 점진적 공개 UI
- 접근성 친화적 인터랙션
Browser Support Notes
이 기능들은 최신 Chromium 기반 브라우저에서 현재 지원되고 있는 최첨단 기술입니다. 프로덕션에 적용할 때는 점진적 향상을 적용하세요.
Final Thoughts
CSS는 이제 단순히 스타일링을 넘어 행동 레이어가 되고 있습니다. 다음에 관심이 있다면:
- 성능
- 유지보수성
- 접근성
- 현대적인 프론트엔드 아키텍처
scroll-state 컨테이너 쿼리는 반드시 배워야 할 가치가 있습니다.
행복한 스타일링 되세요, 그리고 읽어 주셔서 감사합니다! 🚀