Reset.css vs Normalize.css

Prefix

  • Normalize.css, Reset.css는 비슷한 기능을 하지만 조금 다르다.
  • Reset CSS는 문자 그대로 무조건 초기화를 시켜버리는 것에 중점을 둔다.
  • Normalize CSS는 초기화는 시키나 스타일이 어느정도 적용이 되어있다고 생각하면 된다.

Reset.css

Reset.CSS

  • 브라우저간의 차이를 없애서, 스타일이 0인 상태에서 디자인을 하기 위해 생겨났다.
  • 브라우저마다 버그를 발생시킬 수 있다.
  • Eric Mayer가 만든 Reset.CSS가 가장 많이 쓰인다.
    Eric Meyer's "Reset CSS"

Reset.CSS 사용하기 전엔...

  • 밑과 같은 방법으로 전역으로 초기화 시키는 방법을 사용하였다.
  • 그러나, 전역으로 사용함으로써 렌더링의 불필요성으로 요새는 거의 사용되지 않는다.
    *{  
    margin : 0;
    padding : 0;
    border:none;
    }

Normalize.css

h1 {
font-size:2em;
margin:0.67em 0;
}
  • Reset.CSS보다 디자인적인 요소가 포함되어 있기에, 미리 프로젝트에 미치는 범위를 파악하는게 좋다.
  • 브라우저내 버그가 발생할 일이 적다.
  • Reset.CSS보다 더 많이 사용되고 있다.
    Normalize.css

참고 자료

좋은 웹페이지 즐겨찾기