Reset.css와 Common.css

css를 구분할 때는 reset.css, common.css, base.css로 나눌 수 있다.
이렇게 구분하는 이유와 그 사용법을 알아보자.

📌 각 css의 의미

• reset.css

말그대로 초기화해주어 처음 웹페이지를 불러올때 동일한 조건으로 만들어 주는 역할을 한다.

다른 css가 적용될때 동일한 효과가 적용되기 위함
브라우저에 따라 다른 스타일을 동일하게 맞추기 위함

여기서 가장 큰 이유는 '같은 스타일 속성도 각각 환경 및 브라우저(ex:크롬,사파리,IE)에 따라 전혀 다른 스타일로 다르게 적용될 수 있다'라는 것이다.

참고로 IE는 점점 안쓰는 추세로 바뀌면서, 점점 CSS를 나누지 않는 다고는 하지만 후술할 이유때문에 구분해주는 것 이 좋다.

위의 내용은 Eric Meyer’s “Reset CSS” 2.0이다. 매우 기본적인 내용을 담고 있는 양식이며, 필요시 검색을 통해 사용할 수 있다.

내용을 보면 각종 기본적인 태그들의 박스모델, 폰트 디스플레이등을 기본값으로 지정해 두었다.

• common.css
  공통적으로 적용되는 스타일이 여기에 위치한다. 내가 만든 모든페이지에서 겹치는 스타일들을 이곳에서 관리 할 수 있다. 예를 들면 공통되는 nav,icon이라든지...

• base.css

위의 css들을 제외한 나머지 css내용들이 들어간다. 페이지마다 개별적인 페이지라고 보면 된다.
만약 common과 reset이 없다면 base 내부에 하나의 파일로 관리되어 사용된다.

---

📌 사용하는 이유

일단 css를 나누는 이유는 재사용성의 목적과 업데이트가 유용하다. 필요한 내용만 빨리 가져다 쓸 수 있다.
그리고common을 업데이트하고 싶다면 common만 업데이트 하면 된다.

즉, 뚜렷히 구분 가능하다는 뜻이다. reset은 스타일의 리셋을 위해 필요한 것들을 모아두고 common은 스타일 룰에 따라 편하게 정의할 수 있다.

---

📌 실습

참고로 scss는 css라고 보면된다.
react에서 router로 두 페이지를 연동할 때 css가 뒤섞이기 때문에, 이를 해결하기 위해 사용하는 sass를 쓰기 위해 css를 scss로 바꿔준것이다.
sass를 사용하는 이유는 이보다 더 있고, 사용하기위해 네스팅을 해줘야 하지만 이 내용은 나중에 정리해보자.

일단 위 사진에서 reset과 common을 만들었다. 일단 간단하게 common에는 html과 body에 width값만 줬다.

이제 내 웹페이지에 적용하고 싶은 공통적인 기능은 언제든 common에 저장할 수 있다.

base.css는 프로젝트에 미리 만들어두었고, 이름은 꼭 base.css로 안해도 된다.
Main페이지를 제작하고 있다면, 편의를 위해 Main.scss로 제작해도 된다.

reset.css의 임포트는 꼭 entrypoint(index.html에서 '#root'에 추가해주는 컴포넌트. 즉 이번 westagram 작업에서는 index.js)에 해줘야 하고 꼭 첫번째 줄에 임포트 되어야 한다.

모든 컴포넌트마다 임포트해 줄 필요는 없고 entrypoint에만 임포트하면 된다.