브라우저 초기화 리셋 css reset

IE, Chrome, Firefox, Safari ..

 

각 브라우저마다 html, body에 기본적으로 들어가있는 margin, padding이 다르다

 

그래서 초기화를 시켜주고 작업을 시작하는 것이 좋다

 

크롬의 경우 이런식으로 margin: 8px이 처음부터 잡혀있다

 

react를 사용하고 있다면 간단히 reset을 할 수 있다!

yarn add styled-reset
npm i styled-reset

import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */
`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
}

export default App

global style에 이런식으로 적용을 해주면 된다

 

보통 여기에다가

*{
	box-sizing : border-box;
  }
  
html,
body {
    overflow: hidden;
}

html {
    font-size: 62.5%;
}

기본적인 설정들도 같이 해준다!