본문 바로가기

SCSS11

[리액트] 리액트에서 스타일 적용하는 5가지 방법 (인라인 스타일, CSS, SCSS, CSS Module, Styled-Components) 1. 인라인 스타일 App.jsx function App() { return } export default App 2. CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만들어야함 CSS 클래스가 중복되는 것을 방지하기 위해 1) 이름을 지을 때 특별한 규칙을 사용하거나 2) CSS selector를 활용한다 CSS 클래스 이름 짓는 2가지 방법 컴포넌트이름-클래스형태 i.e.) App-header BEM 네이밍: Block__Element-Modifier class="컴포넌트이름__역할—세부특징" i.e.) card__title-primary 컴포넌트 스타일로 css를 사용할시 단점 상위 컴포넌트에서 불러온 css 코드가 하위 컴포넌트에까지 영향을 미치기 때문에 컴포넌트마.. 2022. 8. 12.
[Sass/Scss] package.json에서 Scss를 CSS로 변환하는 명령어 생성하기 package.json 파일에서 scripts 안에 명령어 등록해주기 "scripts": { "명령어이름": "sass 파일이름.scss:파일이름.css" } { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "sass-to-css": "sass main.scss:main.css" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "sass": "^1.51.0" } } 터미널에 다음 명령어를 실행하면 Scss 파일이 CSS 파일로 변환되어진다 npm run 명령어이름 npm run sass-to-css 2022. 5. 13.
[Sass/Scss] parcel 번들러로 Scss 프로젝트 시작하기 1. npm init으로 프로젝트에 package.json 파일 생성하기 여기서 y 플래그는 default 값으로 설정된package.json을 바로 설치하고 싶을때 사용한다. 참고로 -y는 yes를 의미한다. npm npm init -y yarn yarn init -y 2. npm i -D parcel-bundler로 parcel 번들러 설치하기 여기서 -D 플래그는 parcel이라는 번들러를 브라우저에 올리지 않고 개발용으로만 사용하도록 설치한다는 의미다. 설치가 완료되면 package.json에 parcel-bundler가 올라가고 node_modules 폴더, package-lock.json 파일이 생성된다. parcel 번들러는 Scss파일을 CSS로 변환시켜 웹브라우저가 해석할 수 있도록 도.. 2022. 4. 20.
[Sass/Scss] Sass/Scss란? Sass란 CSS 문법을 더 쉽게 사용할 수 있게 도와주는 CSS 전처리기(CSS Preprocessor) 도구다. 웹브라우저에서는 Sass 코드를 해석할 수 없으므로 Sass를 CSS로 변환하여 웹브라우저에 전송해야한다. Sass는 CSS로 변환하기 전에 사용하기 때문에 CSS 전처리 도구라고 부른다. CSS 전처리도구는 Sass 이외에도 less, stylus도 있다. 2022. 4. 20.
[Sass/Scss] 외부에 있는 다른 Scss 파일 불러오기 @import "./sub" sub.scss라는 파일이 같은 파일 경로에 위치해 있다면 아래의 코드와 같이 해당파일을 import 해준다 이때 확장자(scss)는 명시하지 않아도 된다 파일이름, 파일이름 으로 여러개의 파일을 한번에 import 할 수 있다 2022. 4. 20.
[Sass/Scss] 주석처리하기 Scss 코드를 주석처리하는 두가지 방법 1. /* ... */ 사용하기 2. // ... 사용하기 .container { h1 { color: royalblue; /* background-color: orange; */ // font-size: 60px; } } /* ... */와 //... 의 차이점 /*...*/로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에도 해당 코드가 주석처리된채로 남아있다 //...로 주석처리를 하면 Scss 파일이 CSS로 컴파일이 된 후에 Scss파일에서 주석처리한 코드가 사라진다 2022. 4. 20.
[Sass/Scss] 사스의 데이터 타입 7가지 1. 숫자 데이터(number) 단위가 붙어 있는 숫자도 숫자 데이터로 취급을 한다 예) 100px, 1em 숫자 데이터 예시: 1, 0.5, 100px, 1em $number: 1; 2. 문자 데이터(string) 문자 데이터 예시: bold, relative, ".../img/profile.png" $string: bold; 3. 색상 데이터(color) 색상의 이름은 문자 데이터가 아닌 색상 데이터 타입이다 예) green 16진수 색상과 rgba도 색상 데이터다 예) #FFFF00, rgba(0, 0, 0, .1) 색상 데이터 예시: green, #FFFF00, rgba(0, 0, 0, .1) $color: green; 4. 불리언 데이터(boolean) 불리언 데이터 예시: true, false.. 2022. 4. 20.
[Sass/Scss] Scss 문법 정리 1. 셀렉터 중첩 (Nesting) 부모 셀렉터가 후손 셀렉터를 감싸고 있는 형식 Scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 2. 속성 중첩 아래 코드에 있는 .box 셀렉터는 속성값으로 font.. 2022. 4. 20.
[Sass/Scss] 색상 변수에 opacity값 넣기 $white: #fff; $white-50: rgba($white, 0.5); 2022. 4. 17.
[Sass/Scss] Live Sass Compiler를 사용해 컴파일된 css파일 경로 자동으로 바꾸기 1. VS code > settings로 이동하기 2. live sass compile 검색 > Edit in settings.json 클릭 3. 아래의 코드를 { } 안 가장 마지막 줄에 추가 (위에 줄에 , 잊지 말기) 컴파일된 css파일을 sass파일과 같은 폴더에 위치시키고 싶을때: savePath는 null 값 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": null } ] 컴파일된 css파일을 루트폴더에 위치시키고 싶을때: savePath는 "/" "liveSassCompile.settings.formats": [ { "format": "expanded", "exte.. 2022. 3. 16.
[Sass/Scss] Scss 프로젝트 시작하기 1. Visual Studio > Extension > Live Sass Compiler 설치 2. scss 파일안에 스타일 코드 작성 후 하단에 Watch Sass 버튼 누르기 3. Watch Sass가 진행된 후에는 css, css.map 파일이 생성 4. css, css.map 파일은 scss파일을 css파일로 만들어 웹브라우저가 읽을 수 있게 만들어준것 2022. 3. 16.

티스토리툴바