CSS styled-components Global Styling | CSS Reset

1. CSS styled-components createGlobalStyle()

 

https://github.com/styled-components

프로젝트의 규모가 커질수록 공통적인 스타일을 적용해야하는 경우 (font, line-height 등) 같은 코드를 여러번 반복하게 된다. 이를 방지하기 위해 통일된 스타일을 적용하고 싶다면 styled-components에서 제공하는 여러 컴포넌트에 걸쳐 사용할 수 있도록 만들어진 createGlobalStyle() 함수를 사용하면 된다.

 

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
    body {
        font-family: "Helvetica", "Arial", sans-serif;
        line-height: 1.5;
    }

`

export default GlobalStyle

보여지는 글꼴과 line-height을 모두 같게 하고 싶다면 body 태그에 속성을 추가해주면 된다.

 

 

2. CSS Reset

브라우저마다 적용되는 태그의 margin 등 default 속성을 없애주는 것을 말한다.

프로젝트에 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;
}

 

 

App.js 에서 reset.css 를 import 하여 적용시켜주면 된다.