728x90 300x250 SMALL CSS14 다양한 의사 클래스(: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. css애니메이션 한방에 정리하기!(transition, transform, animation) 1. css애니메이션이란?CSS애니메이션은 html 요소를 움직이게 만드는 방법이다.JavaScript없이도 가능하다.주요 방식 :transition - 요소 상태 변화 애니메이션@keyframes + animation - 복잡한 애니메이션 구현2. CSS 애니메이션 기본 사용법1) transition - 간단한 애니메이션.box { width: 100px; height: 100px; background: red; transition: background-color 0.5s ease-in-out;}.box:hover { background-color: blue;}transition 속성:속성명 지속시간 타이밍함수 지연시간ease-in-out(타이밍 함수)은 처음과 끝에서는 천천.. 2025. 4. 4. 까딱거리는 아이콘 css 애니메이션 @keyframes tilt { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); }}.icon { width: 100px; height: 100px; display: block; margin: 50px auto; animation: tilt 1s ease-in-out infinite;} 아이콘이 좌우로 자연스럽게 흔들린다.(transform:rotate(-10deg) -> rotate(10deg)애니메이션은 infinite로 반복된다.ease-in-out을 적용해 부드러운 움직임을 준다. "> 2025. 3. 23. 이전 1 2 3 4 다음 728x90 반응형 LIST