728x90 300x250 SMALL css 애니메이션6 버튼에 다양한 인터랙션 효과 적용하기 앞서 배운 hover, transtion, transform, animation을 조합하여 실전 UI 효과를 구현해 봅시다.예제 목록호버 시 색상과 크기가 동시에 바뀌는 버튼클릭 시 눌리는 느낌의 버튼(:active)포커스 시 강조되고 깜빡이는 애니메이션 추가disabled 상태일 때 스타일 변경 버튼 효과 보기 버튼 효과 보기">버튼 효과 보기 2025. 5. 20. 다양한 의사 클래스(:focus, :active, :checked) css 의사 클래스css 의사 클래스는 사용자의 인터랙션 상태에 따라 스타일을 다르게 지정할 수 있다. 주요 의사 클래스 설명:focus : 키보드 또는 마우스 포커스를 받은 상태(주로 인풋 요소에 적용):active : 사용자가 클릭한 순간(마우스 버튼을 누르고 있는 상태):checked : 체크박스나 라디오 버튼이 선택된 상태 예제1 : 인풋 포커스 시 테두리 강조 "> 예제 2 : 버튼 클릭 시 색상 변화 (:active) 눌러보세요 눌러보세요">눌러보세요 예제3 : 체크박스 선택 시 배경 변화(:checked) 선택해보세요 선택해보세요"> 선택해보세요 2025. 5. 18. animation @keyframes 으로 반복되는 움직임 만들기 animation효과css @keyframes와 animation 속성을 사용하면 반복되거나 시간 기반으로 동작하는 애니메이션을 만들 수 있다.transition은 상태 변화에 반응하지만, animation은 자동 반복도 가능하다.주요 속성@keyframes : 애니메이션의 단계 정의animation-name : 사용할 키프레임 이름animation-duration : 애니메이션 시간animation-iteration-count : 반복 횟수animation-delay : 시작 지연animation-fill-mode : 종료 후 상태 유지 주요 문법@keyframes animationName { 0% { 속성: 값; } 50% { 속성: 값; } 100% { 속성: 값; }}.element {.. 2025. 5. 15. transition으로 부드러운 애니메이션 만들기 개념설명css transition 속성은 스타일이 변화할 때 그 변화를 부드럽게 애니메이션 효과로 보여주기 위해 사용된다. 예를 들어 마우스를 올렸을 때 색상이 바뀌거나 요소가 확대되는 경우, transtion을 통해 자연스럽게 변화하게 만들 수 있다. 주요 속성 설명transtion-property : 어떤 속성에 전환 효과를 줄 것인지 지정(예 : background-color, transform 등)transition-duration: 전환이 완료되기까지 걸리는 시간(예: 0.3s)transtion-timing-function:전환 속도의 곡선을 지정(예:ease, linear, ease-in-out 등)transition-delay: 전환이 시작되기까지 대기 시간예제 1 : 버튼 색상이 부드럽게 .. 2025. 5. 12. 이전 1 2 다음 728x90 반응형 LIST