[TIL] Day 30 CSS, SASS, SCSS

GlobalStyles]
전역 스타일링 : 프로젝트 전체를 아우르는 스타일

불러오기 : import { cerateGlobalStyle } from "styled-components"
사용 :
새로운 컴포넌트(jsx파일) 생성 ex)GlobalStyle.jsx
const GlobalStyle = cerateGlobalStyle `<CSS문법>`
사용할 컴포넌트에서 import
사용할 함수안에서 컴포넌트 적어주기

 

 

Sass(Syntactically Awesome Style Sheets)]
CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어
코드의 재사용성을 높이고, 가독성을 향상
- 변수를 사용할 수 있다.
- 중첩할 수 있다.(Nesting)
- 다른 style 파일을 import 할 수 있다.

 

 

♠
https://velog.io/@harrysci/CSS-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81

CSS, SASS, SCSS
https://penguingoon.tistory.com/275
Sass를 사용하는 이유 
Sass는 다음과 같은 특징들을 가지고 있습니다. 

- 호환성: 모든 버전의 CSS와 완벽하게 호환된다.  
- 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다. 
- 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.
- 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다. 
- 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다. 
- 확장성: Sass 기반의 프레임워크가 다수 존재한다.

'Sass는 뭐고, SCSS는 뭐야?'
이는 Sass라는 세계관(?)에 대한 이해가 부족하기 때문이기도 하지만, 
Sass와 SCSS 차이를 친절하고 알기 쉽게 설명해주는 사람이 그리 많지 않다는 사실 또한 부정할 수 없을 것 같습니다(미리 말씀드리지만, 저도 자신 없습니다).

사실 Sass라는 이름에는 두 가지 의미가 담겨 있습니다. 하나는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 또 다른 하나는 문법(구문)으로써의 의미입니다.
=Sass는 '전처리기(Pre-Processor)'와 그 '구문(Syntax)' 두가지를 모두 지칭한다.
Sass 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있습니다(이 작업을 컴파일이라고도 합니다). 
절차가 조금 복잡하게 느껴지실 수 있지만, 설명은 언제나 행동보다 어려운 법입니다.  

그렇다면 SCSS란 뭘까요? SCSS는 구문입니다. 
SCSS 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 빌드할 수 있습니다. 
간단하죠? SCSS는 기존 Sass 구문에 비해 좀 더 CSS 코드와 유사한 형태를 띄고 있습니다.

SCSS 사용법
SCSS, Sass를 사용하기 위해서는 별도의 loader가 필요하다.
그리고 앞서 말한 CSS의 단점을 보완하기 위한 확장된 기능들의 간단한 예시/가이드를 아래 공홈링크에서 참고 가능하다.
공홈 가이드 : https://sass-lang.com/guide

 

 

css reset]
브라우저의 default style 제거
▽▽▽▽▽
대표적인 방법
index.css 파일에 코드 작성됨
△△△△△

box-sizing: content;에 border나 padding을 추가하면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 더 커지게 된다.
즉, 내가 만약 이 box의 너비나 높이를 설정하려면 예를 들어, 단순히 width: 50px; 혹은 height: 50px; 를 줄 수 있지만, 거기에 border 값이나 padding 값이 더 해져야 한다면 width값은 50px이 아닌 50px + (border값 혹은 padding값) 이상이 될 것이다.

반면에, box-sizing: border-box;에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. border값이나 padding 값는 지정한  width값이나 height값에 포함이 된다는 것이다.




https://kyounghwan01.github.io/blog/React/styled-components/basic/#global-css
Mixin css props
- css props는 자주 쓰는 css 속성을 담는 변수입니다.
- css변수명 = css스타일`` 로 사용합니다.

const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

const FlexBox = div`
  ${flexCenter}
`;



css-module
https://goddaehee.tistory.com/304
css-module 사용하기
- 클래스명이 출동하는 단점을 해결
- 컴포넌트 단위로 적용 가능

문법 : {모듈명}.module.css (꼭 모듈명과 같아야 하는건 아니지만, 같게 작성하는 것이 좋다.)
import 방법 : import styles from "./모듈명.module.css";
적용 방법 : {styles.클래스명}