실행 가능한 CSS 문서: CSS 주석

Q: CSS에서 주석은 어떻게 쓰나요?

텍스트를 /와 /로 감싸요. / This is a comment /처럼요. 한 줄이든 여러 줄이든 같은 문법이고, 스타일시트에서 공백이 허용되는 곳이면 어디든 쓸 수 있어요.

Q: CSS에서 //로 주석을 쓸 수 있나요?

없어요. CSS에는 한 줄 주석이 없어요. //는 다음 선택자나 선언의 일부로 읽혀서 잘못된 코드가 되고, 브라우저는 그 규칙이나 선언을 통째로 버려요. Sass, Less 같은 전처리기는 //를 받지만 순수 CSS는 받지 않아요.

Q: CSS 주석은 중첩할 수 있나요?

없어요. 주석은 처음 나오는 /에서 끝나기 때문에 / a / b / c /는 b 뒤에서 끝나고, 남은 c /는 뒤의 규칙을 깨뜨리는 쓰레기가 돼요.

Q: CSS 주석 단축키는 무엇인가요?

VS Code를 포함한 대부분의 코드 에디터에서 Windows와 Linux는 Ctrl + /, macOS는 Cmd + /를 누르면 선택한 줄을 / /로 감싸고, 다시 누르면 주석이 풀려요.

CSS 주석: 주석 문법과 주석 처리 방법

CSS의 주석 문법은 /* ... */ 하나뿐이고 한 줄이든 여러 줄이든 같아요. 주석을 쓸 수 있는 위치, 규칙을 주석 처리하는 방법, // 와 중첩 주석이 다음 규칙을 조용히 망가뜨리는 이유를 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

CSS 주석 쓰는 법

CSS 주석은 /*로 시작해서 */로 끝나요. 그 사이의 모든 것은 한 줄이든 스무 줄이든 브라우저가 무시해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
  <style>
    /* Single-line comment */
    .note {
      background: #e5e7eb; /* after a declaration */
      padding: 8px 12px;
    }

    /*
      Multi-line comment:
      the same syntax, spread over several lines.
    */
    .note strong {
      color: #2563eb;
    }
  </style>
</head>
<body>
  <p class="note">The comments change <strong>nothing</strong> on screen.</p>
</body>
</html>

문법은 이것 하나뿐이에요. CSS에는 별도의 한 줄 주석이 없어요.

주석을 쓸 수 있는 위치

주석은 공백이 허용되는 곳이면 어디든 올 수 있어요. 규칙 사이, 선언 사이, 값 뒤, 선택자 목록 안에도요. .css 파일, <style> 요소, style 속성에서 모두 똑같이 동작해요.

/* Buttons */
.btn,          /* default */
.btn-primary { /* variant */
  padding: 8px 14px; /* 8px top and bottom, 14px sides */
}

<p style="color: #16a34a; /* inline comments work too */">Hello</p>

HTML 주석 은 마크업용이지 CSS용이 아니에요. 두 문법은 HTML 주석 페이지에서 나란히 비교해요.

코드 주석 처리

주석을 가장 흔하게 쓰는 곳은 선언을 지우지 않고 잠시 꺼서 어떤 역할을 하는지 보는 거예요. /* */로 감싸세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .box {
      background: #2563eb;
      color: white;
      padding: 16px;
      /* border: 6px solid #f59e0b; */
      /* border-radius: 12px; */
    }
  </style>
</head>
<body>
  <div class="box">Border and radius are commented out.</div>
</body>
</html>

border 줄을 감싼 /*와 */를 지우면 주황색 테두리가 나타나요. 규칙 전체를 주석 처리할 때도 같아요. 선택자 앞에 /*를, 닫는 중괄호 뒤에 */를 두세요.

대부분의 에디터가 이걸 대신 해 줘요. 줄을 선택하고 Ctrl + /(macOS는 Cmd + /)를 누르세요.

//가 CSS를 망가뜨리는 이유

//는 JavaScript, Sass, Less에서 주석이라서 주석처럼 보여요. CSS에서는 그냥 두 글자이고, 뒤에 오는 내용의 일부가 돼요. 그러면 브라우저는 잘못된 선택자를 보고 다음 규칙 전체를 오류 메시지 없이 버려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Double slash</title>
  <style>
    p { padding: 6px 10px; }

    // this is NOT a comment
    .one { background: #16a34a; color: white; }

    .two { background: #2563eb; color: white; }
  </style>
</head>
<body>
  <p class="one">.one has no background: its rule was dropped.</p>
  <p class="two">.two is fine.</p>
</body>
</html>

브라우저는 // this is NOT a comment .one을 하나의 선택자로 읽었고, 잘못된 선택자라서 .one 규칙 전체를 버렸어요. 그 줄을 /* this is a comment */로 바꾸면 초록색 배경이 돌아와요.

주석은 중첩되지 않아요

주석은 처음 나오는 */에서 끝나요. 이미 주석이 들어 있는 코드를 감싸면 바깥 주석이 일찍 끝나요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested</title>
  <style>
    p { padding: 6px 10px; }

    /* outer start
    .old { color: red; } /* inner comment */
    outer end */

    .next { background: #f59e0b; }
    .last { background: #e5e7eb; }
  </style>
</head>
<body>
  <p class="next">.next is broken by the leftover "outer end */".</p>
  <p class="last">.last still works.</p>
</body>
</html>

주석이 들어 있는 블록을 주석 처리하려면 먼저 안쪽 주석을 지우거나 줄이세요.

주석으로 스타일시트 정리하기

긴 스타일시트는 섹션 제목이 있으면 읽기 쉬워요. 흔히 쓰는 방식은 이래요.

/* ==========================================
   Layout
   ========================================== */

.page { max-width: 960px; margin: 0 auto; }

/* ------------------------------------------
   Header
   ------------------------------------------ */

.header { padding: 16px; }

/*! License: MIT (many minifiers keep comments that start with "!") */

주석은 파일의 일부로 모든 방문자에게 전송되고 소스 보기에 나타나요. 비밀번호, 내부 URL, 공개하지 않을 메모는 절대 넣지 마세요.