웹퍼블리싱에서 css의 사용은 가장 사용 빈도가 많은 작업 중 하나입니다. css를 적용하는 일은 여러 케이스(상황)에 대비하기 위해 꽤 긴 코드가 들어가게 되죠. 이런 작업 이전에 대부분의 웹페이지는 아래와 같이 css를 설정합니다.

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

물론 모든 사이트가 이런 구조를 갖는 것은 아닙니다. 다만 사용의 편의성 때문에 위와 같이 선언 후 사용합니다. 그럼, 아래에서 각 css별 쓰임과 차이점에 대하여 간단히 알아보고자합니다.

# css를 구분하여 사용하는 이유

위와 같이 css를 구분하는 이유는 각각의 목적에 따라 나누어 두는 것이 효율적이기 때문입니다. 스타일을 수정할 경우 공통적인 부분과 개별 페이지에 적용하는 css를 나누는데 이렇게 하면 반복적으로 적용해야 하는 코드를 일원화하여 더 빨리 수정할 수 있고 유지보수 역시 해당 파일만 수정하면 전체 페이지 모두 반영되므로 간단합니다. 예를들면 아래처럼 값을 0이나 none으로 설정하는 경우가 대부분입니다.

* {
  padding: 0;
  margin: 0;
}
ul, li {
  list-style: none;
}

참고로 동일한 css 이름이라고해도 각각의 css는 사이트, 퍼블리싱마다 적용되는 규칙이 다르므로 모두 동일하지 않을 수 있으며 그 의미 역시 다르게 사용될 수 있습니다. 이런 식으로 사용된다는 것을 알아두시면 됩니다.


# reset.css

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

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

이처럼 reset.css는 퍼블리싱 시점과 향후 유지보수를 위해서도 매우 중요하므로 별도로 생성하여 파일 단위로 추가, 업데이트하는 것이 효과적입니다.


# common.css

공통적으로 적용되는 스타일이 여기에 존재합니다. 예를들어 테이블 태그에 항상 적용하는 동일한 스타일이 있거나 아니면 폼 양식의 태그를 조정할 경우 등등 이런 경우에 common.css를 사용할 수 있죠. 아래를 봐주세요.

! common.css
.table {
  table-layout: fixed;
  width: 100%;
}

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

.margin-no {
  margin: 0;
}
.padding-no {
  padding: 0;
}


# base.css

base.css는 가장 많이 사용되는 css입니다. 위 두 가지 스타일처럼 공통적으로 적용되기도 하나 반드시 공통 적용되는 것은 아닙니다. 전체 페이지에 필요한 font 설정 아니면 background 등의 설정이 여기에 속할 수 있습니다.
html {
  font:: 15px 17px sans-serif;
  background : #fff;
}

base.css의 경우 공통적인 부분을 상단에 추가하여 common.css의 내용을 포함하는 경우도 많습니다. 이런 경우 웹페이지에는 common.css과 base.css 두 가지로 사용됩니다.사용 목적에 따라 구분하여 사용하면 됩니다.


# 끝으로여기서 중요한 부분은 각각의 css들이 어떤 목적을 가지고 사용되고 어떤 장점을 가졌는지입니다. 이처럼 css를 구분하여 관리하면 유지보수 측면 역시 매우 효과적입니다.