CSS 초기 세팅, reset.css VS. normalize.css

프로젝트를 진행하기 전에는, 보통 CSS를 초기설정을 해놓고 시작한다. 보통 normalize.css 혹은 reset.css를 이용해서 css 정상화(초기화)를 설정해놓는다. 이는 왜냐하면 브라우저는 아무런 설정이 없을 때, 미리 소정의 css를 자동적으로 제공하고 있는데, 이러한 초기의 브라우저의 제공은 오히려 육안으로 봤을 때 형편이 없게 느껴지기 마련이기 때문이다. 따라서 이에 따라 Eric A. Meyer 교수는 2007년 reset.css를 내놓았고, 그 후에는 Nicolas 또한 normalize.css를 내놓았다. 

 

normalize.css와 reset.css 둘은 css를 초기 설정하기 위한 코드뭉치들이다. 둘의 큰 차이는 없다만.. Eric A. Meyer의 reset.css는 정말 필요한 초기 셋팅을 넘어서서 아예 모든 css를 통제하는 수준에 이르러, 공격적인(혹은 쓸데없을 수 있는) 코드뭉치인 느낌이라면, normalize.css는 reset.css보다는 좀 더 효율적인 코드의 양으로 css를 초기설정을 도와준다. 

 

따라서 우리는 초기 css 설정에 있어서, normalize.css를 설정할 것인데, 사실 reset.css를 사용해도 무방하다.

빠르고 간결하게 css 설정을 하고싶다면 reset.css를 쓰는 것도 좋은 방안이며, 좀 더 규모가 있거나 기업의 일원으로써 코드를 작성하게 될 때 혹은 개인 프로젝트를 좀 더 세부적으로 css를 초기 셋팅을 하고 싶다면 normalize.css를 이용한 css 초기 설정을 하는 것이 좀 더 바람직하다.

 

reset.css를 이용한 초기 설정은 reset.css에 들어가서, 홈페이지 중앙에 나와있는 css 코드를 복사하여 자신이 설정한 디렉토리 안에 있는 css 파일에 붙여놓기 하면 된다.

 

다음으로는 normalize.css를 설정하는 방법을 알아보자. 

간단한 css 초기 설정을 위해선 reset.css를 설정한 것처럼 normalize.css 에 들어가서 Download를 클릭하면 나오는 코드뭉치를 복사하고 css파일에 붙여넣기 하면 된다. 

---

 

 

자 이제는 sass를 이용하여 좀 더 세부적인 css 초기 셋팅을 해보자.

sass를 설치, settiing, 사용하는 법에 대해서는 추후에 포스트를 작성하겠다.

 

자신이 프로젝트를 진행할 디렉토리에 main.scss를 만들고, 또한 따로 scss 파일들을 모아놓을 목적의 디렉토리를 하나 만들고, 그 안에 _normalize.scss 와 _reset.scss 파일을 만든다.

필자는 main.scss를 디렉토리에 만들고, 또한 base라는 scss파일들을 모아놓은 폴더안에 _ normalize.scss 와 _reset.scss 파일을 만들었다.

그 후 main.scss를 들어가서

@import './base/normalize';
@import './base/reset';

를 입력해준다.

 

_normalize.scss에는 normalize 홈페이지에 나와있는 코드를 그대로 복사 붙여넣기한다.

_reset.scss에는 다음과 같이 코드를 작성해주고 저장해 준다.

* {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box;
}

html {
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
}

h1 {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  background-color: transparent;
  border: 0;

  &:focus {
    outline: none;
    box-shadow: none;
  }
}

a,
button {
  cursor: pointer;
}

ul,
ol {
  padding-left: 0;
  list-style: none;
}

_reset.scss 파일은 _normalize.scss 에서 기본적으로 해준 css 초기 설정을 보태줄 수 있는 좀 더 편리한 사용을 위한 css 초기 설정 추가 코드이다. 

 

이렇게 sass를 이용한 css 초기 설정은 끝났다. 하지만 위에서 scss를 이용한 css 초기 설정은 따로 sass를 사용하는 방법을 알아야 위 방법을 100% 이해하고 활용할 수 있기 때문에, 다음 포스트에서 sass와 scss에 대해서 포스팅 하겠다.