SCSS

기술

전환2026-09-099종

CSS 아코디언 애니메이션 9종 — JS 없이, CSS만으로

CSS 아코디언 애니메이션은 클릭한 항목만 펼쳐지고 나머지는 접힌 채로 남는 목록 UI로, 이 글은 JS 없이 CSS만으로 만드는 아홉 가지 방식을 모았습니다. 아홉 개 중 하나는 height 전환에 자바스크립트를

읽기

전환2026-09-09

CSS 햄버거 메뉴 애니메이션은 클릭 한 번으로 세 줄 아이콘이 X로 바뀌고 메뉴가 열리는 전환 효과입니다. 아홉 개를 모았고 전부 transform과 opacity만 움직이며, JS 없이 CSS만으로 돌아갑니다.

피드백2026-09-09

CSS 다크모드 토글 애니메이션 아홉 개를 한 번에 모았습니다. 아이콘이 바뀌는 가장 흔한 표현부터, 원 하나로 화면을 덮는 화려한 전환, 라이트·다크·자동까지 다루는 3단 스위치까지 담았고 전부 transform과

전환2026-09-09

CSS 페이지 전환 애니메이션은 한 화면이 사라지고 다음 화면이 나타나는 순간을 매끄럽게 잇는 CSS 동작이다. 아홉 개 중 세 개는 흔한 라이브러리 템플릿에서 잘 안 보이는 조합이다.

로딩2026-09-09

스켈레톤 UI CSS는 실제 글자·이미지가 도착하기 전에 그 자리를 회색 막대나 동그라미로 미리 그려 두는 로딩 방식입니다. 빈 화면이나 뱅글뱅글 도는 스피너보다 "곧 뭔가 나온다"는 확신을 먼저 줍니다. 아래 아홉

전환2026-09-099종

CSS 모달 팝업 애니메이션 아홉 개를 한 번에 모았습니다. 확인창부터 바텀 시트, 팝오버, 겹쳐 열리는 모달까지 실무에서 자주 쓰는 장면을 아홉 가지로 나눠 담았고, 전부 transform과 opacity만(배경

스크롤2026-09-099종

CSS 스크롤 애니메이션 아홉 개를 모았습니다. AOS·GSAP 없이 브라우저 내장 animation-timeline 하나로 스크롤 위치 자체를 애니메이션 시계로 씁니다. JS는 0줄이고, 격자에서는 아홉 개 효과가

버튼2026-09-099종

CSS 버튼 애니메이션 아홉 개를 한 번에 모았습니다. 호버, 클릭, 로딩, 실패, 확인까지 버튼 하나가 겪는 상황을 아홉 장면으로 나눠 하나씩 담았고, 전부 transform과 opacity만 움직입니다. 격자에서