728x90 300x250 SMALL 분류 전체보기1208 다양한 의사 클래스(: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. transform으로 요소를 움직이고 회전시키기 transformCSS의 transform 속성은 요소에 회전, 크기 변경, 이동, 기울이기 등의 2D 및 3D 변현 효과를 줄 수 있다.일반적으로 hover나 active상태에서 자주 사용된다. 주요 함수translateX(px), translateY(px) : 요소를 수평 또는 수직으로 이동scale(1.1) : 요소를 확대/축소rotate(45deg) : 요소를 회전skewX(deg), skewY(deg) : 요소를 기울이기예제1 : 버튼 확대 효과 확대되는 버튼 확대되는 버튼">확대되는 버튼 예제2 : 카드 흔들기 효과 "> 2025. 5. 13. 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 3 4 ··· 302 다음 728x90 반응형 LIST