목록style (2)
web sprit
[React] 스타일을 적용하는 여러가지 방법 (line 스타일, CSS 모듈, styled-components 등)
React 에서 스타일을 적용 종류인라인 스타일일반 CSSCSS Modules ( 예 : Button.module.css )styled-components (CSS-in-JS)Tailwind CSSSCSS(Sass) React 에서 스타일을 적용 방법일반 CSS 파일 사용.css 파일을 만들고 컴포넌트에서 import📁 Button.css.button { background-color: black; color: white; padding: 12px 20px; border-radius: 6px;} 📁 Button.jsximport './Button.css';function Button() { return Click;} 장점가장 단순함.기존 HTML/CSS 개발 방식과 동일단점클래스 이름 충돌 ..
scss 를 컴파일 하는 style 은 4가지 스타일이 존재합니다.1. nested2. expanded3. compact4. compressed 일반 scss 문법을 통하여 css 로 어떻게 컴파일 되는지 확인해 보겠습니다.scss1234567html{ font-size:10px; body{ color:red; font-family: serif; }}cs cssnestedsass 형식과 유사하게 nested된 css 파일이 생성됩니다. 기본값으로 옵션을 추가하지 않아도 기본 적용됩니다.12345html { font-size: 10px; } html body { color: red; font-family: serif; }cs expanded표준적인 스타일의 css 파일이 생성됩니다.1234567html {..