CSS 코드 주석 처리 방법 완벽 가이드

CSS 주석이란 무엇인가요?

CSS 스타일시트 안에는 자신 또는 팀원들을 위해 코드를 간단히 설명(문서화)하는 주석을 작성할 수 있습니다.

CSS에서 주석을 작성하려면 다음과 같은 문법을 사용합니다:

/* 이것은 CSS 주석입니다 */

/* */ 형식은 CSS에서 주석을 작성할 수 있는 유일한 방법이기 때문에, 한 줄 주석과 여러 줄 주석 모두에 동일하게 사용됩니다.

/* 
   이것은 
   여러 줄로 
   작성된 
   CSS 주석입니다.
   블록 주석이라고도 부릅니다.
*/

코드 주석 처리 예시

다음은 주석 문법을 활용해 규칙 집합(rule-set) 내부의 CSS 코드를 주석 처리(비활성화)하는 몇 가지 예시입니다:

  .box {
    background-color: #000;
    padding: 1.5rem;
    /* border-radius: 4px; */ 
  }

  .box {
    background-color: #000;
    padding: 1.5rem; /*
    border-radius: 4px; 
    box-shadow: 5px 10px #888888;
    */
  }

실무에서는 주석을 코드 문서화 용도뿐만 아니라, 테스트 과정에서 특정 스타일 선언을 임시로 주석 처리(비활성화)하는 용도로도 활용합니다.

CSS 주석과 JavaScript 주석의 차이

CSS 주석을 JavaScript 주석과 혼동하지 않도록 주의하세요. JavaScript에서는 /* */(CSS와 같은 형식)가 여러 줄 주석에 사용되며, 한 줄 주석은 슬래시 두 개 //를 사용합니다.

한 줄 주석은 인라인(inline) 주석이라고도 부릅니다.
여러 줄 주석은 블록(block) 주석이라고도 부릅니다.

CSS 코드에서 한 줄 주석으로 //를 사용하는 프로젝트를 본 적이 있을 수 있습니다. 자세히 살펴보면 해당 프로젝트는 Sass/SCSS나 Less처럼 한 줄 주석을 허용하는 CSS 전처리기를 사용하고 있는 것입니다. 반면 순수 CSS(vanilla CSS)에서는 안타깝게도 /* */만 사용할 수 있습니다.

CSS 코드에 주석을 작성해야 할까요?

HTML 주석 작성법 튜토리얼에서 설명했듯이, 개발자들은 이 주제에 대해 의견이 분분합니다. 어떤 개발자들은 코드가 명확하고 스스로 설명될 수 있어야 한다고 믿습니다.

하지만 저에게 이 문제는 흑백논리로 나눌 수 없습니다. 모든 주석이 똑같은 가치를 지니는 것은 아니기 때문입니다. CSS 스타일시트에 소설을 쓰듯 장황하게 적어서는 안 되지만, 짧고 간결한 주석은 초보자나 팀에 새로 합류한 개발자가 코드의 의도를 파악하는 데 큰 도움이 됩니다.

저라면 언제나 암묵적인 코드보다 명시적인 코드를 선택하겠습니다.

주석이 페이지 성능에 미치는 영향

주석이 공간을 너무 많이 차지해 페이지 로딩 속도를 해칠까 걱정하지 않아도 됩니다. 성능 및 페이지 로딩 속도 개선과 관련해서 텍스트(주석 포함)는 가장 신경 쓰지 않아도 되는 부분입니다. 게다가 후처리(post-processing) 단계에서 주석을 자동으로 제거해주는 도구들도 존재합니다.