CSS만

기술

피드백2026-09-109종

CSS 화살표 애니메이션 9종

화살표 아이콘이 저절로 움직이는 웹사이트를 본 적 있으신가요? 마우스를 올리면 화살표가 길어지거나, 버튼을 눌러 보라는 듯 통통 튀거나 — 이런 작은 움직임 하나가 방문자의 시선을 붙잡아 줍니다. 이 글은 그런 CS

읽기

피드백2026-09-10

CSS 통통 튀는 애니메이션은 요소를 그냥 나타나게 하지 않고 뜨고, 튕기고, 떨고, 흔들리게 만들어 살아 있는 느낌을 주는 움직임입니다. 흔한 영어 이름 대신 둥실둥실·포용·푸루푸루 같은 의성어로 아홉 개를 골랐고

피드백2026-09-10

회원가입이나 결제가 끝난 순간 화면에 색종이 조각이 잠깐 터지는 컨페티 효과, 다들 한 번은 보셨을 겁니다. 버튼 클릭이나 체크 표시 하나로 이런 축하 반응을 켜는 CSS 아홉 가지를 한 줄 복붙으로 쓸 수 있게 모

피드백2026-09-10

화면 위에 반투명한 유리판을 얹어 놓은 것처럼, 뒤 배경이 흐릿하게 비치면서 내용은 또렷하게 보이는 디자인을 CSS 글래스모피즘(리퀴드 글래스)이라고 부릅니다. 카드부터 내비게이션, 버튼, 토글까지 아홉 가지 유리

로딩2026-09-10

ChatGPT나 Claude 같은 AI 채팅창에서 답이 오기를 기다릴 때 뜨는 점 세 개, 깜빡이는 커서, 서서히 나타나는 글자는 전부 CSS 로딩 애니메이션입니다. div 하나로 끝나는 아홉 가지를 코드와 함께 모

피드백2026-09-109종

사진 위에 마우스를 올리면 커튼처럼 열리거나 원이 점점 커지며 드러나는 걸 본 적 있으신가요? 이런 CSS 이미지 슬라이드 애니메이션을 한 줄 복붙으로 쓸 수 있게 아홉 가지로 모았고, 그중 하나는 자바스크립트 없이

스크롤2026-09-109종

타임라인 CSS 애니메이션은 이벤트나 결제 같은 여러 단계를 선과 원으로 이어 순서대로 보여주는 장치입니다. AOS·GSAP 없이, JS 0줄로 아홉 가지를 모았고, 그중 셋은 스크롤 위치를 CSS가 직접 읽는 sc

피드백2026-09-109종

가격표 디자인에 마우스를 올렸을 때 카드가 살짝 떠오르거나 가격 숫자가 휙 바뀌는 걸 본 적 있으신가요? 어떤 요금제를 고를지 망설이는 그 짧은 순간, 이런 작은 움직임 하나가 시선을 붙잡아 줍니다. 이 글은 그런

피드백2026-09-109종

리액트로 만든 화면에 자연스러운 움직임을 넣고 싶을 때 제일 먼저 떠오르는 게 리액트 애니메이션 라이브러리를 까는 일이지만, 사실 컴포넌트가 나타나고 사라지는 타이밍만 잡으면 CSS 만으로 되는 것도 많습니다. 이

피드백2026-09-109종

버튼을 누르거나 카드가 나타날 때, 움직임이 일정한 속도면 딱딱해 보이고 처음엔 빠르다가 점점 느려지거나 끝에서 살짝 튕기면 자연스럽다. 이 속도 변화를 CSS 에서 숫자 네 개로 적는 방법이 cubic-bezier