이미지 슬라이드 만들기 9종 — CSS 캐러셀 그대로 복사
이미지 슬라이드 만들기는 쇼핑몰이나 포트폴리오 사이트에서 사진 몇 장이 옆으로 넘어가며 순서대로 보이는 화면을 만드는 일입니다. AOS·GSAP 없이, JS 0줄로 CSS만 붙여 넣어도 아홉 가지 방식으로 만들 수
읽기SCSS
기술
CSS 탭 메뉴 전환 애니메이션 9종 — JS 없이, CSS만으로
CSS 탭 메뉴 전환 애니메이션은 라디오 버튼의 :checked 상태나 role="tablist" 버튼만으로 탭 사이를 오가며 인디케이터가 미끄러지고 패널이 바뀌는 동작을 말합니다. :checked 만으로 JS 없이
CSS 사이드바 드로어 슬라이드 9종 — JS 최소로
CSS 사이드바 드로어는 화면 가장자리에 붙어 있다가 트리거를 누르면 패널이 나타나는 내비게이션 UI로, 여기서는 transform과 opacity만으로 아홉 가지 여는 방식을 만들었습니다. 왼쪽에서 미끄러져 들어오
웹 토스트 알림 CSS 애니메이션 9종 — JS 없이, CSS만으로
웹 토스트 알림은 화면 한쪽에 잠깐 떴다가 스스로 사라지는 작은 알림 카드로, 사용자가 지금 보던 화면을 벗어나지 않아도 결과를 알 수 있게 해 줍니다. 슬라이드로 들어오는 것부터 스와이프로 미는 것, 진행바가 다
CSS 프로그레스바 애니메이션 9종 — 스크롤 읽기 진행 표시
CSS 프로그레스바 애니메이션은 지금까지 얼마나 읽었는지를 스크롤 위치만으로 계산해 보여주는 장치입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지 형태를 모았습니다 — 상단 바, 원형 배지, 점 내비, 세로 바
CSS 텍스트 강조 애니메이션 9종 — 한 줄 복붙으로
CSS 텍스트 강조 애니메이션은 본문 속 한 단어나 문장에 형광펜·밑줄·취소선 같은 시각 효과를 얹어 읽는 사람의 시선을 그 자리에 멈추게 하는 기법입니다. 아홉 가지를 모았고, 전부 자바스크립트 없이 순수 CSS
Tailwind 애니메이션 유틸 9종(v4) — 한 줄 복붙으로
Tailwind 애니메이션은 tailwind.config.js가 아니라 CSS 파일 안 @theme 블록에 --animate- 변수와 @keyframes를 같이 적어서 만드는 Tailwind v4의 새 방식입니다.
CSS 배경 애니메이션 효과 모음 9종 — 한 줄 복붙으로
CSS 배경 애니메이션 효과 모음은 눈·별·비·컨페티·거품·반딧불이·꽃잎·안개처럼 작은 조각 여러 개를 화면에 흩뿌려 각자 다른 자리에서 계속 움직이게 만드는 CSS 기법입니다. span 하나를 nth-child로
CSS 3D 큐브 캐러셀 틸트 9종 — 한 줄 복붙으로
css 3d 큐브 회전, 원형으로 도는 캐러셀, 커서를 올리면 기우는 카드까지 — perspective 와 preserve-3d 로만 만든 입체 CSS 효과 아홉 개를 모았습니다. 아홉 개 전부 transform 만
CSS 아이콘 애니메이션 9종 — SVG 로고도 한 줄 복붙으로
CSS 아이콘 애니메이션은 재생·알림·새로고침처럼 화면에 흔한 인터페이스 아이콘을 인라인 SVG로 그려 움직이게 만드는 것이다. 문자 글리프 대신 좌표가 있는 path를 쓰므로 서체가 바뀌어도 모양이 깨지지 않는다.