CSS 주석(Comments)

CSS 주석은
스타일시트에 설명 메모를 추가하거나, 브라우저가 스타일시트의 특정 부분을 해석하지 못하도록 하는 데 사용됩니다.

스타일시트:
페이지나 문서의 레이아웃과 디자인을 제어하는 데 사용되는 CSS 규칙 집합입니다.
CSS 파일이나, <style> 태그 내의 콘텐츠를 모두 '스타일시트'라고 말합니다.

올바른 이해와 사용 방법에 대해 알아봅니다.

CSS 주석 작성 형식

CSS 주석(이하 '주석')은 /*로 시작하고 */로 끝납니다.

/*와 */ 사이에 설명 메모를 추가하거나, 브라우저가 무시하도록 특정 코드를 넣을 수 있습니다.
이렇게 주석을 작성한 것 을 일반적으로 '주석 처리' 라고 하며, 주석 처리된 부분은 브라우저가 무시하여 읽지 못하도록 합니다.

CSS 
/* 이 부분은 주석입니다 */
p {
    color: blue; /* 이 속성은 글자 색을 파란색으로 설정합니다 */
}

/* 아래와 같이 브라우저가 무시하여 읽지 못하도록 해서
   스타일을 숨길 수 있습니다. */
   
/*
p {
    background-color: lightgrey;
}
*/

주석 작성 시 주의할 점

주석 작성에는 형식이 있습니다.

미완성 주석

주석은 /*로 시작하면 반드시 */로 끝내야 합니다.

  • 주석은 /* 문자로 시작합니다.
  • /* 문자가 나오면, 그 이후부터 브라우저는 해당 부분을 주석으로 처리합니다.
  • */ 문자를 만나면 주석 처리가 끝납니다.

만약 /* 문자 이후에 */가 없다면, 스타일시트의 끝까지 모든 내용이 주석으로 처리됩니다.

CSS 
/* 주석을 시작했지만 끝내지 않으면, 아래 모든 내용이 주석 처리됩니다.
p {
    color: blue;
}

이 예시처럼 /*로 주석을 시작하고 */로 끝내지 않으면, 스타일시트 끝까지 주석 처리됩니다. 이 경우 마지막 */를 반드시 추가해 주석이 의도한 범위까지만 적용되도록 해야 합니다.

주석의 내용에 /* 또는 */ 문자를 사용할 수 없음

주석의 내용에 /* 또는 */ 문자를 사용할 수 없습니다. 주석 내용에 이러한 문자가 포함되면, 브라우저가 주석을 올바르게 해석하지 못하고 오류가 발생할 수 있습니다.

CSS 
/* 이 주석은 잘 작성되었습니다. */
/* 하지만 이 주석에는 잘못된 내용이 포함되어 있습니다: /* 잘못된 주석 */ */

주석 작성 방법

주석은 한 줄에 사용하거나 여러 줄에 걸쳐 사용할 수 있습니다.

한 줄 주석

CSS 
/* 이곳에서부터 주석이 시작됩니다. */

한 줄로 간단한 설명이나 메모를 남길 때 사용합니다.

여러 줄 주석

CSS 
/* 
    이 CSS는 페이지의 기본 스타일을 정의합니다.
    p 태그의 텍스트 색상을 파란색으로 설정하고,
    배경색은 회색으로 설정합니다.
*/
p {
    color: blue;
    background-color: lightgrey;
}

코드에 대한 설명을 추가하거나 특정 스타일 그룹에 대한 정보를 표시할 때 유용합니다.

주석 작성 위치

CSS 주석은 모든 스타일시트에서 공백이 위치할 수 있는 곳 어디에나 넣을 수 있습니다.

CSS 
/* 전역 스타일 설정 */
body {
    font-family: Arial, sans-serif; /* 기본 글꼴 설정 */
}

/* 헤더 스타일 설정 */
header {
    background-color: #333; /* 어두운 배경 */
    color: white;
}

/* 반응형 설정 */
@media (max-width: 768px) {
    /* 작은 화면에서의 스타일 */
    header {
        background-color: #555; /* 밝은 배경으로 변경 */
    }
}

하지만, 문자 값을 나타내는 따옴표("" 또는 '')내에 주석을 사용할 경우에는 주석을 단순 텍스트로 해석합니다.

CSS 
p::before {
    content: "😃 /*  주석을 단순 텍스트로 해석 */";
}

코드 부연설명
::before 가상 요소 선택자는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다.

코드 부연설명
content 속성은 해당하는 가상 요소 선택자의 내부 콘텐츠를 지정합니다.

HTML 
<p>문단입니다.</p>
실제 적용된 모습

위 예시의 실제 적용된 모습을 보면 문자 값을 나타내는 따옴표 내부의 주석은 단순 텍스트로 해석되는 것을 알 수 있습니다.

명세서

CSS 주석의 명세서 사양
명세서 사양
Comments CSS 2.1 Syntax and basic data types
#comments

참고문헌

같이 보기