CSS 텍스트 애니메이션 효과 9종 — 한 줄 복붙으로
CSS 텍스트 애니메이션 효과는 자바스크립트 없이 CSS만으로 제목이나 문구가 움직이며 나타나거나 강조되는 짧은 연출입니다. 아홉 개 전부 transform·opacity·filter 세 가지 속성만 움직이고, 격자
읽기CSS만
기술
CSS 타이핑 효과 9종 — 한 줄 복붙으로
CSS 타이핑 효과는 자바스크립트 라이브러리 없이 CSS만으로 문장이 한 글자씩 나타나거나 지워지는 것처럼 보이게 만드는 짧은 애니메이션입니다. 아래 아홉 개는 각각 다른 CSS 속성 하나에 기대고 있고, 필요한 건
CSS 마우스 커서 효과 9종 — 한 줄 복붙으로
CSS 마우스 커서 효과는 브라우저 기본 화살표 대신 프로젝트에 맞춘 모양·잔상·블렌드 반응을 붙이는 것을 말합니다. 아홉 개 중 셋은 자석처럼 끌리거나 배경 색을 반전시키는, 흔한 예제 모음에서는 잘 안 보이는 조
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)는 자바스크립트를 한 줄도 안 씁니다. 아래 격자에서 아홉 개가 자동
벤토 그리드 디자인 — 요즘 핀터레스트에서 유행하는 부품 9개
벤토 그리드 디자인은 도시락 칸처럼 크기가 다른 사각형 타일을 한 격자에 채워 화면을 구성하는 방식으로, 핀터레스트·드리블에서 포트폴리오와 SaaS 랜딩 페이지를 중심으로 유행하고 있습니다. 특징은 다섯 가지입니다.
CSS 로딩 스피너 9종 — div 하나로 끝나는
CSS 로딩 스피너는 서버 응답을 기다리는 동안 화면이 멈추지 않았다는 걸 보여주는 작은 반복 애니메이션으로, 이 글은 자바스크립트 없이 CSS만으로 돌아가는 아홉 가지 방식을 모았습니다. 아홉 개 중 세 개는 흔한