reset.css base.css common.css 언제 어떻게 사용하는가?

웹사이트를 계속해서 만들어 놓는 경우 아래와 같이 css를 구분하여 작성하는게 일반적입니다. 가장 크게 아래와 같이 reset, common, base로 나뉠 수 있죠.

• reset.css
• common.css
• base.css
  

위 파일들을 구분한 차이와 왜 나누어 사용할까요? 아래에서 알아보세요.

# reset, common 그리고 base css 파일의 사용

이처럼 구분하는 이유는 사용 목적에 따라 뚜렷히 구분될 수 있고 재사용성을 높일 수 있기 때문입니다. 또 향후 업데이트 역시 하나의 긴 파일보다는 용이합니다.

- 재사용성의 목적
- 업데이트의 용이
- 사용 목적에 따라 뚜렷히 구분되는 css 파일 


@ 재사용성의 목적
먼저 재사용성의 목적이라면 상황에 따라 reset.css만 아니면 common.css만 필요한 경우가 있기 때문입니다. 필요한 파일만 빨리 가져다 적용할 수 있겠죠.


@ 업데이트의 용이
새로운 스타일을 정의하는 새로운 css 룰의 업데이트가 필요하다면? 다른 css 파일이 아닌 common.css만 새로 업데이트 하면 되겠죠. 또한 같은 목적의 스타일만 모아두므로 분류하기도 훨씬 수월합니다.


@ 사용 목적에 따라 뚜렷히 구분되는 css 파일
이처럼 구분하여 사용할 수 있는 이유가 바로 뚜렷히 구분 가능하다는 점입니다. 한 마디로 얘기하면 reset은 스타일의 리셋을 위해 필요한 것들을 모아두고 common은 스타일 룰에 따라 편하게 정의할 수 있는 스타일의 셋(set)입니다. 마지막으로 base.css는 현재 웹페이지에 정의되는 기본적인 스타일을 사용하게 됩니다.

하지만 모두 이와 같은 방식으로 사용되는 것은 아닙니다. 더 편리한 방법, 또는 다른 목적으로 관리 및 분리되어 사용될 것입니다. 이런 방식 역시 하나의 예라고 알아두시기 바랍니다.

! reset.css

reset은 말뜻처럼 리셋, 초기화로 처음 웹페이지를 불러올때 동일한 조건으로 만들어 주는 역할을 합니다. 이 css가 가장 필요한 이유는 아래와 같이 구분할 수 있습니다.

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

여기서 가장 큰 이유는 '같은 스타일 속성도 각각 환경 및 브라우저에 따라 전혀 다른 스타일로 다르게 적용될 수 있다'입니다. 이를 통일화하기 위해서 지우개로 지우고 같은 하얀 백지의 캔버스를 준비한다고 생각할 수 있겠죠.

! common.css

공통적으로 적용되는 스타일이 여기에 위치합니다. 예를들어 테이블 태그에 항상 적용하는 동일한 스타일이 있거나 아니면 비슷한 폼 양식의 태그를 조정할 경우 common.css에 정의해서 항상 똑같은 스타일을 적용할 수 있겠죠.
@ common.css

위 코드는 하나의 예입니다. 그 외에도 스타일의 일부를 조정할 경우에도 사용할 수 있습니다. 예를들어 margin값 또는 padding값을 0으로 조정한다면 아래처럼 사용합니다.

common.css의 스타일 구분은 대부분 UI 컴포넌트에 따라 구분되어 정의되고 작성되는게 일반적입니다. navigation bar, sidebar, pagination, modal 그리고 button, icon 등등 여러가지 UI 컴포넌트의 스타일을 미리 common.css에 정의해서 사용하면 좋겠죠?

! base.css

base.css는 우리가 흔히 사용하는 그리고 가장 많이 사용되는 css입니다. 웹페이지에 필요한 설정들을 이 곳에 사용할 수 있습니다. 개별 페이지로 구분할 수도 있습니다. 만약 common과 reset이 없다면 base 내부에 하나의 파일로 관리되어 사용되기도 하죠.

# 마지막으로

여기까지 reset.css, common.css, base.css의 사용과 목적에 대하여 간략하게 알아보았습니다. 요즘은 css를 어떻게 효과적으로 사용하느냐에 따라 생산성의 차이가 매우 큽니다. css도 매우 복잡해지고 있으며 수 많은 스타일 들을 보다 쉽게 관리하고 사용하는 방법은 계속 연구되고 있습니다.