728x90 300x250 SMALL 인터랙션5 다양한 의사 클래스(: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. Lottie 애니메이션 만드는 법(After Effects + Bodymovin) Lottie 애니메이션 만드는 방법Lottie 애니메이션은 주로 After Effectsㄹ 제작된다. AE에서 애니메이션을 만든 후, Bodymovin이라는 플러그인을 통해 JSON으로 추출한다. 준비물Adobe After Effects 설치Bodymovin 플러그인 (AE에서 설치 가능)또는 LottieFiles 웹사이트(직접 다운로드 or 편집)제작 과정1. AE에서 애니메이션 제작텍스트, 도형, 패스 등을 활용한 벡터 애니메이션 제작이미지 사용 시 JSON 파일 크기 증가 주의!2. Bodymovin으로 추출윈도우 메뉴 > Extensions > Bodymovin원하는 컴포지션 선택 후 Render클릭.json 파일 생성됨3. 웹에서 미리보기(LottieFiles 추천)LottieFiles.com에.. 2025. 5. 5. 이전 1 2 다음 728x90 반응형 LIST