[CSS] reset css

reset.css 라는 용어를 모르고 있다가 내가 평소에 하고 있는게 reset.css라는 것을 알게 되었다.

 

reset.css란 특정 태그의 기본 템플릿같은 것을 본인이 코딩하는 스타일에 맞게 미리 설정해두는 것을 말한다. 예를 들어 ul,li를 쓰면 기본적으로 내용 앞에 동그라미가 하나 붙는데 나는 그 동그라미를 쓴 적이 한 번도 없기 때문에 list-style: none으로 초기에 설정해두고 사용한다. 이러한 초기값 설정을 해둔 것을 모아둔 것이 reset.css다.

 

구글에 reset.css를 검색하면 가장 상단에 나오는 링크가 하나 있는데 보통 그거를 복사해서 많이들 쓴다고 한다. 근데 나는 그렇게까지 다 필요한지는 모르겠어서 따로 자주 쓰는 것만 설정하는 편이다.

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

현재는 위의 링크가 제일 위에 뜬다. 예전에 검색했을 땐 이 페이지가 아니였던거 같은데 확실하진 않다. 업데이트 될 때도 있고 사이트가 바뀔 때도 있다고 알고 있는데 확실치는 않기 때문에 일단 필요하면 구글에 검색해서 최상단에 있는 링크를 쓰는 것이 제일 좋을 것이라고 생각이 든다.

 

나는 보통 아래와 같이 많이 쓴다.

*{

  padding: 0;

  margin: 0;

  list-style: none;

  overflow-x: hidden;

}

보통 이정도만 쓰긴 하는데 추가한다면 line-height(행간)이나 페이지의 폰트에 따라 자간이 설정되어야 한다면 letter-spacing(자간)도 쓰는 편이다. 그리고 p태그나 h1,h2태그 등등 폰트 사이즈가 정해져 있는 경우에 미리 설정해두고 사용하는 편인데 이것도 reset.css로 치는지는 확실치 않다. 그리고 table 태그를 쓰는 경우에 테이블간 선이 겹치지 않게 하나로만 설정하기 위해 border-collapse: collapse와 border-spacing: 0 을 쓰는데 나는 테이블 태그를 잘 안쓰기 때문에 거의 사용하진 않는다.

 

여러 경우를 대비해서 모든 설정을 미리 해두는 것도 좋겠지만 이것 또한 용량을 차지하기 때문에 무조건 다 설정한다고 좋다고는 생각하지 않는다. 물론 요즘 인터넷도 빠르고 컴퓨터들이 좋기 때문에 그 용량으로 크게 차이가 나진 않을거같지만 그래도 필요한거만 써서 용량을 줄일 수 있으면 좋지 않을까? 하는 생각이다.

 

매 코드마다 똑같이 font-size나 color등 반복적으로 나타나는 코드들이 있으면 최상단에 위와 같이 정리를 해두는 것도 좋은 습관일 것이다.