Css-in-Js

html 태그에 classname을 지정한뒤 css파일을 생성해서
내용을 작성하는 기존의 방법과 다르게 css-in-js는 자바스크립트 코드로 css를 작성하여 컴포넌트를 꾸미는 방식


이 방식을 사용하기 위해 쓰는 패키지(외부 라이브러리)가
Styled Components

Styled Components

• 기본 사용법

1. VScode 확장 프로그램 설치

2. 터미널에 yarn(npm도 가능)을 통해 설치

 yarn add styled-components

3. stlyed-components import시키기

4. 컴포넌트 상단에 변수선언 후
styled.html태그 (백틱) 내용 (백틱) 작성
내부의 내용은 css스타일로 작성한다.
(속성:값;)
해당 변수를 적용시키고 싶은 곳 태그부분에 넣어준다.

Styled Components의 특장점

1. 위 사진과 같이 props를 통해 하위 컴포넌트(App)으로 내려 각 요소마다 원하는 스타일을 지정해줄 수 있다.

2. css에 if문 switch문 삼항연산자 같은 js문법을 사용할 수 있다.

GlobalStyles

• 전역 스타일링
  컴포넌트 내에서만 활용하는 것이 아니라 프로젝트에서 공통으로 사용하는 스타일
  즉 전역적(globally)으로 스타일을 지정하는 방법

• 사용방법 ex)

1. TestPage에 적용된 중복되는 스타일을 따로 GlobalStyle이라는 이름의 jsx파일로 빼서 export해준다.
   (해당부분에선 body부분에
   font-family: 'Helvetica', 'Arial', sans-serif;
   line-height: 1.5;)

(TestPage는 App.js에 연결)

2. 적용시키고자 하는 컴포넌트에 import시켜 아래와 같이 사용

Sass

Syntactically Awesome Style Sheets의 약자
css를 기존의 방법보다 효율적으로 사용하기 위해 만들어진 언어


코드의 재사용성을 높이고, 가독성을 향상시켜줄때 사용할 수 있는 방법


사람이 실수 할 수 있는 Human Error를 줄여준다.(예를들면 오타를 막아준다)

Sass의 특장점

1. 스타일을 변수화 시키는게 가능
   $를 붙여준다

2. 중첩할 수 있다.(Nesting)
   label이라는 요소의 기본 스타일과 hover시 스타일을 한번에 적용가능
   &를 사용한다

3. 다른 style파일을 import가능
   다른css파일(common.scss)에서 지정해둔 변수를
   style.scss파일에 import시켜서 사용가능

Css Reset

브라우저는 기본적으로 default style을 제공하기 때문에 원하는대로 스타일을 적용시키기 위해서 Css를 Reset시키는게 필요하다.

• 사용방법

reset.css파일을 만들어 해당 코드를 복사한 뒤index.js 파일에 import시킨다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}