web sprit

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 개발 방식과 동일단점클래스 이름 충돌 ..

vscode 실행하여 Extensions에 들어간다. live sass를 검색 해보면 Extensions 목록에 Live Sass Compiler 가 있다. 그리고 Live Sass Compiler을 사용하기 위해선 컴파일하고 화면에서 확인하기 위해선 가상서버를 생성해주는 Live server 익스텐션도 필요하다. # 설치 (install) Live Sass Compiler Live server 설치를 했다면 따로 설정이 필요하다. 설정에 대한 내용은 아래 URL에 상세히 나와 있다. ritwickdey/vscode-live-sass-compiler Compile Sass or Scss file to CSS at realtime with live browser reload feature. - ritwic..

SCSS를 컴파일 하기위해Front 기술로 nodeJS 나 SASS 또는 Compass 로 컴파일하여 css 로 변환해 줍니다. 그 보다 좀더 간편한 작업에 있어서브라임텍스트를 이용한 SCSS 컴파일 방법에 대해 알아보려 합니다. 우선 Ruby 와 scss가 설치 되어 있어야 합니다.그에 관한 설명은 하단을 참고하시기 바랍니다.SASS 설치방법 서브라임에서 SASS관련 패키지가 존재합니다.ctrl + shift + P 를 누르시고 PCI 를 누르시어 package install을 선택!sass 와 sass Build 패키지를 설치해 줍니다. 우선 어느정도 준비는 끝났습니다.그럼 컴파일 하는 패키지를 직접 설치해 보죠~ https://github.com/alexlitel/Sass-Build-SublimeT..

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 {..