이 게시물은 2016년 8월 8일 수정판입니다.

이야기에 앞서

CSS에서 주석은 /*으로 시작하여 */ 끝나며, 이 구문안에 위치한 모든 CSS 코드는 웹 브라우저에서 해석되지 않습니다. 주석의 처음과 끝만 정확하다면 그 안에서는 주석을 어떻게 사용하든 기본적으로 정해진 제약이나 규칙은 없습니다.

이 글에서는 주석의 사용을 개인의 기호로 보고, 주어진 기능을 십분 활용하는데 중점을 두고 있습니다. 협업이나 공동작업의 경우에는 주석 사용에 주의를 기울이시기 바랍니다.

주석 맛있게 굽기

기본 사용

주석 본연의 기능에 충실하고 최대한 사용을 줄이는 것을 선호하는 사람이 있습니다. 보통 소스코드를 단독으로 관리하고 다른 사람이 열람하거나 수정 할 일이 없다면 본인이 이미 코드의 전체 구조를 잘 파악하고 있기 때문에 별도로 주석을 달지 않지요.

테스트를 위해 특정 구문을 비활성화하 하거나 자주 사용하지 않는 코드를 사용했을 때 다음에도 쉽게 기능을 파악하기 위해 각주를 달아 놓는 정도입니다.

/* @import url('css/normalize.css'); */
p {
    margin: 0;
    padding: 0;
    box-size: cover /*Ie9 이상 배경 비율로 곽 채우기*/
}

대분류로 사용

개인이 쓰더라도 문서를 이루고 있는 구조를 쉽게 파악하기 위해 헤더 용도로 사용하는 케이스입니다. 클래스명을 직접 작성하지 않은 다른 사람도 어느 정도 주석을 통해 작성자의 네이밍 패턴을 이해할 수 있기 때문에 많이 선호하는 방식입니다.

사이트 구조, 글 쓰기 페이지, 글 읽기 페이지와 같이 큰 그룹의 헤더에 주석을 사용하고, 그룹 내의 영역 분할이나 버튼, 썸네일 같은 요소들은 줄 바꿈(개행)을 통해 구분하곤 합니다.

/* 목록 */
.blog-list {...}
.blog-list > figure {...}
.blog-list > figure figcaption {...}

.blog-list-header {...}
.blog-list-header > ul {...}

.blog-list-content {...}
.blog-list-content > dt + dd {...}

/* 읽기 */
.blog-read { ... }
.blog-read > figure {...}
.blog-read > figure figcaption {...}

선택자(클래스나 아이디)의 이름을 의미있고 직관적으로 짓는 것이야 기본이지만, 주석을 최소화 할 때는 더욱 네이밍에 신경을 써야 합니다. 주석보다는 선택자의 이름으로 그 역할과 의미를 파악하기 때문입니다.

소분류로 사용

스타일시트를 여러 사람과 공유하는 경우나, 선택자 이름을 압축해서 지은 경우에는 각 코드 그룹의 역할을 더 명확하고 빠르게 알기 위해 코드 그룹의 역할별로 사용하기도 합니다. 선택자 이름을 압축하는 것은, HTML 문서에서 선택자를 모듈처럼 인라인으로 끼워넣을 때 주로 사용하는데, 이름의 의미가 불명확하기 때문에 주석으로 그 역할을 알려줍니다.

• <i class=”fa fa-spinner fa-spin”></i>

/* Font Awesome 셋팅 */
.fa {...}

/* 아이콘 스타일 */
.fa-default {...}
.fa-spin {...}

/* 버튼 정렬 */
.fa-fl {...}
.fa-fr > input {...}

서식화하여 사용

주석을 대분류, 중분류, 소분류로 나누어 스타일시트 문서 자체를 서식화하여 사용하기도 합니다. 많은 페이지와 요소들을 가지는 각종 CMS의 테마나 스킨에서 사용자의 편의를 고려할 때 많이 사용됩니다. 각 분류에 쓰이는 주석의 모양은 다양합니다. 직접 모양을 만들어서 사용해도 좋습니다. 여기서는 흔히 만나게 되는 주석들을 소개해 봅니다.

• 대분류 – 고유 사이트 스타일, 외부 플러그인 스타일 등
• 중분류 – 대분류에 속한 요소들을 페이지나 메뉴, 미디어 쿼리 단위로 분류
• 소분류 – 중분류에 속한 요소들을 역할별로 분류

/* ==========================================================================
   Headline 1
   ========================================================================== */

대분류용 주석

/**
 * Headline 2
 * --------------------------------------------------------------------------
 */

중분류용 주석

/* Headline 3 */

소분류용 주석

주석으로 서식화 된 스타일시트

/* ==========================================================================
   사이트 구조
   ========================================================================== */
header {...}
aside
footer {...}
#container {...}
section.promotion {...}
section.widgets {...}

/**
 * 소개 페이지
 * --------------------------------------------------------------------------
 */
#page-about-us {...}
#page-about-us:before,
#page-about-us:after {...} /*floating*/

/* 서브메뉴 */
aside.about-us {...}
aside.about-us > ul {...}

/* 내 소개 */
figure.profile {...}
figure.profile > img {...}
figure.profile > figcaption {...}

스타일시트 인덱싱하기

서식화 된 스타일시트에 목차를 추가해 전체적인 문서 구조를 파악할 수 있도록 인덱싱 할 수도 있습니다. 하지만, 문서가 수정되는 와중에 역할에 따라 순서를 바꿔야 하는 경우가 많으므로, 최대한 작업이 완료된 후에 배포용도로 사용하는 것이 좋습니다.

/**
 * Table of Contents:
 *
 * 1.0 - 사이트 구조
 * 1.1 - 소개 페이지
 * 1.2 - 게시판
 * 2.0 - jQeury 플러그인
 * 3.0 - 미디어 쿼리
 * --------------------------------------------------------------------------
 */

/* ==========================================================================
   1.0 사이트 구조
   ========================================================================== */
#page-about-us {...}
#page-about-us:before,
#page-about-us:after {...} /*floating*/

각주 달기

단일 선택자나 속성에 각주를 달 수도 있습니다. 속성 하나하나의 역할과 의미를 정확히 알아야 하는 경우 사용되곤 하는데, 주로 웹 브라우저에 자체 정의된 User Agent 속성을 초기화하거나, 미리 제작된 CSS 코드의 역할을 분명히 알리기 위해 부연설명을 달 때 사용합니다.

/**
 * 1. 부모로부터 서체를 상속받지 못하는 브라우저를 해결.
 * 2. 부모로부터 글자 크기를 상속받지 못하는 브라우저를 해결.
 * 3. Firefox 4 이상, 사파리 5와 크롬에서 마진을 다르게 표현하는 문제 해결.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

마치며

주석을 효율적으로 잘 사용하여 스타일시트 문서를 예쁘게 관리하세요. 무엇이든 과하면 안 좋은 법, 문서 자체를 치장하기 보다는 기능적인 면을 잘 살려서 사용한다면, 보는 사람 쓰는 사람 모두에게 기분 좋은 코드가 되겠죠.

한편, Normalize나 HTML Boiler Plate와 같은 초기화 소스의 스타일시트는 원리 이해를 돕고자 주석이 본래 소스보다 더 많이 사용되기도 합니다. 만일 소스 파일의 주석이 거슬리거나 파일 다이어트를 즐기는 사람은 스크립트 압축 사이트에서 주석 및 공백을 제거한 후, Adobe Dream Weaver의 자동 소스 포맷팅 기능을 통해 다시 보기좋은 상태로 정렬할 수 있습니다.