TIL_리액트 # 2 | 스타일링 종류, CSS / SCSS / styled-components

1. CSS를 대체할 수 있는 SCSS

node-sass를 설치해주어야 한다.

yarn add node-sass@4.14.1 open-color sass-loader classnames

 

sassmeister.com : scss -> css 문법 번역

css를 어느정도 정복했다면 scss도 사용해보기!

---

2. styled-components

📍 공식 doc : styled-components.com/docs/faqs

-> 날잡고 styled-components 도장깨기 해봐야 겠다.

 

- classname 안지어도 사용 가능! (const ~~는 필요하다.)

- 직접 스타일을 컴포넌트 안에서 만드는 것이라 직관적!

- `(빽틱) 안에다 넣어서 css와 동일하게 사용하고, div대신에 html 모든 태그를 사용가능

const MyStyled = styled.div `
width:50vw;
&:hover {
	background-color:#ddd;
    }
background-color:red;
`

 

- 대문자 필수? : line했을때가 아닌 Line했을때 활성화 됨

- 태그로 감싸기 vs. 단독 사용

<Line> <hr> </Line>

<Line/>

Q 컴포넌츠를 넣어주면 자동으로 줄 바꿈 되는데?

컴포넌츠의 차이가 아니라 html에서 div와 span태그의 차이이다.

(const HashTag = styled.div ``에서 div => span)

 

nesting => 정리 필요

상위 요소 이어쓰기 할 때 &로 지칭할 수 있음.

$변수이름: 값;

class 단위 안에 #{$변수이름} 으로 불러올 수 있다!

---

📌 공부 할 것!

1. 기존/어떤 기준의 폰트사이즈의 몇 배로 표현하는 방법?

: em과 관련된 것 같은데 관계를 명확히 할 필요가 있다.

 

2. 난수를 만들고 싶은데 한번 로딩된 페이지에서 난수는 모두 같다...

각 요소별로 다르게 설정하고 싶은데 돔을 알아야 할것같다.

 

3. const A와 const B와 같이 각각 지정한 styled-components의 hover 등을 동시에 작동하려면?

: components안에 div {} 또는 h1 {]과 같이 지정하는 방법, className을 지정하는 방법이 있는데, 

좀더 직관적이고 간단하게 컴포넌츠를 가져오는 방법이 있을까?