[CSS] CSS 초기화 (Reset.css)

CSS 초기화

작업을 하시다 보면 종종 Normalize, Reset 등의 CSS 파일을 많이 찾아 볼 수 있습니다.
이는 브라우저마다 각각 가지고 있는 자체 속성들을(user agent stylesheet로 표기되는 부분) 상쇄시키고, 모두 동일한 환경이 되도록 최대한 작업을 하기 위함입니다.
그렇기 때문에 많은 분들께서 본인만의 초기화 파일을 설정해서 사용하시고는 합니다.
저도 마찬가지입니다. 사실 새롭게 알게 되는 속성들도 많기 때문에 계속적으로 수정이나 추가가 됩니다.

Reset.css 코드

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
// IE8 이하의 브라우저를 위해 사용하는 속성입니다. semantic 요소들을 인지하지 못하기 때문에 위처럼 선언을 해줍니다.

*, body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
// 거의 대부분의 브라우저가 margin, padding 의 값이 들어가 있기 때문에 대부분의 분들이 사용하는 속성입니다.
// box-sizing의 경우는 선언을 안하시는 분들도 계시지만, 저의 경우 width, height 값만 정해지면 그 내부에서 padding, border의 값을 굳이 계산하지 않아도 되기 때문에 border-box를 모든 태그에 적용시킵니다.

html {
  font-size: 16px;
}
@media all and (max-width: 900px) {
  html {
    font-size: 15px;
  }
}
@media all and (max-width: 600px) {
  html {
    font-size: 15px;
  }
}
@media all and (max-width: 450px) {
  html {
    font-size: 14px;
  }
}
// 사이트에서 많이 쓰이는 폰트 사이즈를 설정합니다. 저의 경우 rem 을 주로 사용하기 때문에, max-width에 따라 폰트 사이즈를 조정해서 사용하고 있습니다.

a,
a:hover,
a:focus,
a:active,
a:link {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
// 대부분의 사이트 UI 작업을 하다보면 밑줄이 없는 경우가 대부분이며, 하이퍼링크를 위해 사용하기 때문에 cursor 모양도 pointer로 지정해뒀으며, 색 또한 설정하지 않았을때 파란색으로 노출되기 때문에 그 상위 속성으로부터 색을 받아오도록 설정해 사용합니다.

img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
}
// 이미지의 경우 a 태그가 상위요소면 border가 생기기 때문에 이를 없애기 위해 0으로 설정했으며, inline 요소와 정렬 되었을 때 중앙인 경우가 대부분이라 그렇게 설정했으며 width 또한 해당 영역을 벗어나지 않게 하기위해 width의 최대값을 100%으로 설정해 사용합니다.  

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
// 리스트에 사용되는 ol, ul의 경우 list-style 의 속성이 기본으로 브라우저마다 선언되어있기때문에 이를 제거하고, 들여쓰기 처럼 보이도록 margin과 padding 값이 설정되어있기에 이 또한 제거해 사용합니다. 

fieldset {
  border: 0;
}
// form 태그와 함께 사용되는 이 태그는, 범주를 묶기 위한 의도로 추측되는 border 가 들어가 있는데, 실제 디자인 요소와 간극이 크기 때문에 border를 제거해줍니다.

button {
  border: 0;
  background: none;
  cursor: pointer;
}
button:focus {
  outline: none;
}
// button의 경우 기존 브라우저의 속성들을 모두 제거하고, 클릭버튼으로 사용되기때문에 cursor를 pointer 로 세팅하고, 웹접근성 상 focus에 outline이 들어가야 좋으나 대부분의 경우 색을 조절하거나 none 처리를 해줍니다.  

strong,
b {
  color: inherit;
  font-size: inherit;
}
// 위 태그들은 보통 문맥적으로 필요할 경우 (특히 strong의 경우)나 해당 문장에서 사용되기 때문에 보통 컬러와 사이즈가 비슷하기 때문에 위처럼 적용해줍니다.

i,
em {
  font-style: normal;
}
// 어조나 무드를 바꾸는 부분에 사용하기때문에 italic은 디자인요소로 사용되는 경우가 없어, 기울임을 제거합니다. 

mark {
  color: inherit;
  background: none;
}

// mark 태그는 형광펜을 사용한 듯한 느낌으로 기본 스타일이 적용되있기 때문에 이를 제거해 사용합니다.

button {
  -webkit-appearance: none;
}

input,
input:matches([type="password"], [type="search"]),
input[type=text],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
// ios의 safari 브라우저의 경우, 위의 태그를 사용했을때 독자적인 스타일이 생기는데 이는 UI 통일성을 해치므로 위처럼 제거해줍니다.

보시면 폰트패밀리는 선언되어 있지 않은데, 이는 사이트마다 다른 폰트를 사용하기 때문이기도 하고 다른 파일에서 관리하기 때문입니다.

++ 2019.09.18 em 태그 추가