CSS

Module CSS Use Mixin Include SCSS

💡 Mixin, Include 사용으로 중복되는 CSS 코드를 줄이기 위해 SCSS at-rule을 Module CSS에서 어떻게 사용하는지 알고싶다.Module CSS 빌드 시간에 고유한 이름으로 변환하여 파일 간 중복 클래스가 사용 가능하며, 로컬 스코프로 제한됩니다.SCSS CSS의 불필요한 선택자 남용, 연산 기능의 한계, 구문의 부재 등의 문제점을 해결하고 at-rule을 이용해 mixin, include 등의 유용한 추가 기능을 사용할 수 있습니다.1. Sass Installnpm install sass2. Scss 파일 생성 및 작성// src/app/mixins.scss@mixin flex-center{ display: flex; align-items: center; justify-..

React Light/Dark Theme switch

테마 변경 - 데이터 속성 data-* 속성은 다른 조작을 하지 않고도, HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다. 해당 속성은 아래와 같이 접근할 수 있습니다. //Javascript 접근 document.documentElement.setAttribute('data-theme', 'light'); document.documentElement.getAttribute('data-theme'); const body = document.querySelector("body"); body.dataset.theme; //만약 data-theme-switch "-"는 자동으로 camel-case 변환 body.dataset.themeSwitch; 스위치 변경 시 마다 document data-them..

Input Radio Custom Css React Component

Accent-Color Demo 폼 컨트롤의 색상을 사용자 정의하고 서로 간의 시각적 구분을 향상시키는 데 도움이 될 수 있습니다. 내부의 배경색은 설정한 색의 대비로 결정되며 세세한 수정을 위해서는 새로 만들어야 합니다. /** 전체 색상 변경 :root { accent-color: rgba(250, 15, 117); } */ .radio { width: 40px; height: 40px; accent-color: dodgerblue; } .radio1 { width: 40px; height: 40px; accent-color: #ffc045; } .range { width: 200px; accent-color: lawngreen; } .progress { width: 200px; accent-colo..