HTML&CSS3 [CSS] CheckBox Customizing 🟦 기본 환경: IDE: VS code, Language: CSS CheckBox Customizing 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .customized { width: 20px; height: 20px; border-radius: 50%; background-color: #a4a4a4; appearance: none; } .customized:checked { background: #a10820; border: none; background-image: url('icon_check.png'); background-position: center; background-size: cover; filter: invert(1); } 1. .customized .. 2023. 6. 11. [ReactJS_Complete] CSS: @media 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. CSS module 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .button { width: 100%; font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); cursor: pointer; } @media (min-width: 768px){ .button { width:.. 2023. 6. 1. [ReactJS_Complete] CSS: transition 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React transition : 스타일 변화가 발생했을 때의 전환(transition) 효과를 지정 option, timing function : ease-in 요소의 전환을 천천히 시작하고 빠르게 종료하는 방식 시작할 때는 천천히 움직이다가 점점 가속도를 높여서 종료할 때에는 빠르게 움직이는 효과 부여 : ease-out 요소의 전환을 빠르게 시작하고 천천히 종료하는 방식 시작할 때는 빠르게 움직이다가 점점 감속하여 종료할 때에는 천천히 움직이는 효과 부여 : ease-in-out 요소의 전환을 천천히 시작하.. 2023. 5. 31. 이전 1 다음
