CSS-in-Js

CSS 파일 import - HTML tag 마다 classname 넣고 CSS 코드 작성 방식은 비효율

 

CSS-in-JS 방식 :

자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식

const StBox = styled.div`
	// css와 동일하게 스타일 코드 작성
`

 

 

GlobalStyles (전역 스타일링)

프로젝트를 아우르는, 공통 스타일 적용 필요할 때

 

Sass (Syntactically Awesome Style Sheets)

CSS를 효율적으로 사용하기 위해 만들어진 언어.

 

css reset

default style을 초디화하고 우리가 정하는대로만 표현

// reset.css
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;
}