벤토 그리드 레이아웃 호버 애니메이션 9종
포트폴리오나 제품 소개 페이지에서 크고 작은 네모 칸이 사진 콜라주처럼 이어 붙은 레이아웃을 본 적 있으신가요? 이런 벤토 그리드 레이아웃에 마우스를 올렸을 때 칸마다 살짝 반응하게 만드는 CSS 코드를 아홉 가지로
읽기대시보드
용도
CSS 탭 메뉴 전환 애니메이션 9종 — JS 없이, CSS만으로
CSS 탭 메뉴 전환 애니메이션은 라디오 버튼의 :checked 상태나 role="tablist" 버튼만으로 탭 사이를 오가며 인디케이터가 미끄러지고 패널이 바뀌는 동작을 말합니다. :checked 만으로 JS 없이
웹 토스트 알림 CSS 애니메이션 9종 — JS 없이, CSS만으로
웹 토스트 알림은 화면 한쪽에 잠깐 떴다가 스스로 사라지는 작은 알림 카드로, 사용자가 지금 보던 화면을 벗어나지 않아도 결과를 알 수 있게 해 줍니다. 슬라이드로 들어오는 것부터 스와이프로 미는 것, 진행바가 다
원형 프로그레스바 CSS 9종 — 값만 바꾸면 되는
원형 프로그레스바 CSS는 값 하나만 바꾸면 전체가 다시 그려지는 채움·게이지 애니메이션을 말합니다. 업로드 바부터 반원 속도계, 배터리 아이콘까지 실제로 돌아가는 아홉 개를 모았고, 하나같이 width가 아니라 t
채팅 말풍선 CSS 애니메이션 9종 — 한 줄 복붙으로
채팅 말풍선 CSS 애니메이션 아홉 개를 한 번에 모았습니다. 팝 등장부터 입력 중 점, 읽음 표시, 이미지 로딩, 답장 인용, 이모지 반응, 날짜 구분선, 새 메시지 하단 고정까지 메시지 한 통이 화면에서 겪는 순
CSS 숫자 증가 애니메이션 9종 — 한 줄 복붙으로
CSS 숫자 증가 애니메이션은 0이나 시작값에서 목표 숫자까지 오르는 텍스트를 CSS 속성 하나로 세는 방식입니다. 아홉 개 중 하나는 거꾸로 세고, 또 하나는 스크롤해서 보이기 전엔 0에서 멈춰 있습니다. 숫자 아
CSS 로딩 스피너 9종 — div 하나로 끝나는
CSS 로딩 스피너는 서버 응답을 기다리는 동안 화면이 멈추지 않았다는 걸 보여주는 작은 반복 애니메이션으로, 이 글은 자바스크립트 없이 CSS만으로 돌아가는 아홉 가지 방식을 모았습니다. 아홉 개 중 세 개는 흔한
스켈레톤 UI CSS 9종 — 복붙하면 되는 로딩 화면
스켈레톤 UI CSS는 실제 글자·이미지가 도착하기 전에 그 자리를 회색 막대나 동그라미로 미리 그려 두는 로딩 방식입니다. 빈 화면이나 뱅글뱅글 도는 스피너보다 "곧 뭔가 나온다"는 확신을 먼저 줍니다. 아래 아홉