CSS 툴팁 말풍선 9종 — 한 줄 복붙으로
CSS 툴팁 말풍선은 버튼이나 아이콘에 커서를 올리거나 포커스를 두었을 때 짧은 설명을 그 옆에 띄우는 작은 말풍선으로, 이 글은 자바스크립트 없이 대부분 순수 CSS로 돌아가는 아홉 가지 방식을 모았습니다. 아홉
읽기최신 글
새 글이 위에 옵니다.
CSS 헤더 고정 스티키 9종 — AOS·GSAP 없이, JS 0줄
CSS 헤더 고정 스티키는 페이지를 스크롤해도 헤더가 화면 위에 계속 붙어 있게 만드는 방식입니다. 아홉 개 중 넷(04·05·08·09 중 04·05)은 자바스크립트 없이 CSS만으로 움직입니다. 아래 격자에서 자
CSS 패럴랙스 스크롤 9종 — AOS·GSAP 없이, JS 0줄
CSS 패럴랙스 스크롤 아홉 개를 모았습니다. 레이어마다 이동 속도를 다르게 주는 원리 하나로 배경이 내용보다 느리게 움직이는 착시를 만듭니다. 격자에서는 아홉 개가 2초 간격으로 자동 반복되니 먼저 눈으로 훑고 마
바이브코딩 마이크로 인터랙션 9종 — 한 줄 복붙으로
마이크로 인터랙션은 클릭 한 번, 저장 한 번처럼 아주 작은 동작에 화면이 곧바로 반응해 주는 짧은 피드백입니다. 아홉 개 중 하나(04)는 서버 응답을 기다리지 않고 먼저 화면부터 바꿨다가, 실패했다고 가정하면 스
CSS 드롭다운 메뉴 애니메이션 9종 — JS 없이, CSS만으로
CSS 드롭다운 메뉴 애니메이션은 트리거를 누르거나 올렸을 때 패널이 어떻게 나타나고 사라지는지를 정하는 짧은 전환입니다. 아홉 개 중 하나(08)는 자바스크립트를 한 줄도 안 씁니다. 아래 격자에서 아홉 개가 자동
인증번호 입력 UI 만들 때 겪는 9가지 상황 — 폼 검증까지 챙긴
인증번호 입력 UI는 6자리 숫자를 한 칸씩 나눠 받는 폼 부품으로, 다음 칸 이동부터 붙여넣기·오류 처리까지 한 번에 챙겨야 동작이 매끄러워집니다. 아홉 개 중 하나는 화면에 아무것도 안 보여도 실제로는 코드를 통
벤토 그리드 디자인 — 요즘 핀터레스트에서 유행하는 부품 9개
벤토 그리드 디자인은 도시락 칸처럼 크기가 다른 사각형 타일을 한 격자에 채워 화면을 구성하는 방식으로, 핀터레스트·드리블에서 포트폴리오와 SaaS 랜딩 페이지를 중심으로 유행하고 있습니다. 특징은 다섯 가지입니다.
CSS 로딩 스피너 9종 — div 하나로 끝나는
CSS 로딩 스피너는 서버 응답을 기다리는 동안 화면이 멈추지 않았다는 걸 보여주는 작은 반복 애니메이션으로, 이 글은 자바스크립트 없이 CSS만으로 돌아가는 아홉 가지 방식을 모았습니다. 아홉 개 중 세 개는 흔한
CSS 아코디언 애니메이션 9종 — JS 없이, CSS만으로
CSS 아코디언 애니메이션은 클릭한 항목만 펼쳐지고 나머지는 접힌 채로 남는 목록 UI로, 이 글은 JS 없이 CSS만으로 만드는 아홉 가지 방식을 모았습니다. 아홉 개 중 하나는 height 전환에 자바스크립트를
CSS 햄버거 메뉴 애니메이션 9종 — JS 없이, CSS만으로
CSS 햄버거 메뉴 애니메이션은 클릭 한 번으로 세 줄 아이콘이 X로 바뀌고 메뉴가 열리는 전환 효과입니다. 아홉 개를 모았고 전부 transform과 opacity만 움직이며, JS 없이 CSS만으로 돌아갑니다.