css

**일반 CSS방식

css를 작성할 때 가장 중요한 것은 css 클래스를 중복되지 않게 만드는것.

 

중복을 방지하는방법

1. 이름을 짓는 규칙

(1) 컴포넌트이름-클래스 형태 

(2) BEM 네이밍방식

해당클래스가 어디에서 어떤용도로 사용되는지 명확하게 작성하는방식

 

2.CSS Selector

css클래스가 특정 클래스 내부에 있는경우에만 스타일을 적용한다.

최상위 html요소에는 컴포넌트이름으로 생성하고 내부에는 소문자나 클래스 이름이 불필요한 경우 생략가능하다.

 

등등 여러 중복방지 방식이있다.

 

**Sass

sass는 css전처리기로 복잡한 작업을 쉽게할수있고,

재활용성이 높으며,

코드의 가독성을 높여준다.

 

Sass에는 두가지 확장자를 지원한다.

1. sass 가있고

개발자들의 요청에 의해

2. scss 가 후에 만들어졌다.

 

차이는

sass확장자는 {}와 ;을 사용하지 않는다.

scss는 기존 css작성하는 방식과 비교해 크게 다르지않다.

 

**Utils 함수 분리

여러 파일에서 사용될수 있는 sass 변수 및 믹스인은 다른파일로 분리하여 작성한후 필요한곳에서 불러와 사용가능하다.다른 scss파일을 불러올 때에는

@import 구문을 사용한다.

 

**sass-loader 설정 커스터마이징

프로젝트에 디렉토리를 많이 만들어 구조가 깊어졌다면 찾기어렵다는 단점이있으나

sass-loader의 설정을 커스터마이징하여 해결할수 있다.

 

**node_modules에서 라이브러리 불러오기

sass장점중 하나는 라이브러리를 쉽게 불러와 사용할 수 있다.

~(물결문자)를 사용하는것.

물결문자를 사용하면 자동으로 node_modules에서 라이브러리 디렉터리를 탐지하여 스타일을 불러올수 있다.

 

**CSS Module

css를 불러와서 사용할때 클래스의 이름을 고유한 값, 즉

[파일이름]_[클래스이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일클래스 이름이 중첩되는 현상을 방지해준다. 컴포넌트 내부에서만 작동한다.

만약특정클래스가 웹페이지 전역적으로 사용되는 경우라면

:global

을 앞에 입력하여 글로벌css임을 명시해준다.

 

사용시 적용하고 싶은 JSX 엘리먼트에 className={style.[클래스이름]} 형태로 전달해주면 된다.

전역적으로 선언한 클래스의 경우는 그냥 문자열로 넣어준다.

 

일반.css/.scss에서도 사용해야할때는

:local을 사용하면된다.

 

**ClassNames

css클래스를 조건부로 설정할때 매우 유용한 라이브러리이다.

여러가지 종류의 파라미터를 조합해 css클래스를 설정할수있고 때문에 컴포넌트에서 조건부로 클래스를 설정할때 매우편리하다.

예를들면 props값에 따라 다른 스타일을 주기 쉬워진다.

 

**styled-components

자바스크립트 파일안에 스타일을 선언하는 방식(CSS-in-JS 방식)

라이브러리 설치 후에 styled-components를 사용하면 자바스크립트 파일 하나에 스타일까지 작성가능하다.

 

**Tagged 템플릿 리터럴

`

(스타일작성)

`

스타일을 작성할때 `을 사용하여 만든 문자열에 스타일 정보를 넣어주는 문법이다.

자바스크립트 객체나 함수의 원본 값을 온전히 추출할수 있다는 장점이 있다.

 

**props에 따른 조건부 스타일링

일반 css ---> className 사용

styled-component ---> 간단하게 props사용 가능

props를 참조한다면 반드시 css로 감싸주어 Taggle 템플릿 리터럴을 사용해줘야한다 ` `

 

**반응형

@media 사용한다.