Syntax/Comments

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

156/190

안녕하세요! 프론트엔드 강사입니다.

오늘은 코딩의 가장 기본이자 협업의 핵심! 바로 CSS에서 '주석(Comments)'을 작성하는 방법에 대해 MDN 문서를 통해 알아보겠습니다.

주석은 브라우저에게 "이 부분은 없는 셈 치고 넘어가!"라고 알려주는 기능입니다. 코드가 너무 복잡할 때 미래의 나(또는 동료)를 위해 메모를 남기거나, 에러를 찾기 위해 코드를 잠깐 비활성화할 때 정말 유용하게 쓰이죠. 아주 간단하지만 꼭 알아야 할 문법이니 가볍게 살펴볼까요?

주석 (Comments)

CSS 주석(comment)은 코드에 설명이나 메모를 추가하거나, 브라우저가 스타일 시트의 특정 부분을 해석(적용)하지 못하도록 막기 위해 사용됩니다. 주석은 애초에 브라우저가 무시하도록 설계되었기 때문에, 문서의 레이아웃이나 시각적인 렌더링에 아무런 영향을 미치지 않습니다.

구문 (Syntax)

주석은 스타일 시트 내에서 '공백(white space)'이 허용되는 곳이라면 어디든 자유롭게 배치할 수 있습니다. 한 줄로 짧게 쓸 수도 있고, 여러 줄에 걸쳐서 길게 작성할 수도 있습니다.

/* 이것이 주석입니다 (Comment) */

예제 (Examples)

실제로 주석을 어떻게 쓰는지 몇 가지 예시를 볼까요?

/* 한 줄짜리 주석입니다 (A one-line comment) */

/*
이것은
여러 줄에
걸쳐서
작성된 주석입니다.
*/

/* 아래 주석은 특정 스타일이 적용되지 않도록 
   코드를 비활성화(disable)하는 데 사용되었습니다 */
/*
span {
  color: blue;
  font-size: 1.5em;
}
*/

👨‍🏫 강사님의 꿀팁:
실무에서 마지막 예제처럼 코드를 임시로 꺼두는 것을 '주석 처리한다(commenting out)'라고 부릅니다. 버그를 잡을 때 의심되는 코드를 지우지 않고 일단 주석 처리해 두면, 나중에 다시 복구하기가 아주 편하겠죠? 단축키(Ctrl + / 또는 Cmd + /)를 꼭 외워두세요!

참고 사항 (Notes)

/* */ 구문은 한 줄 주석과 여러 줄 주석 모두에 똑같이 사용됩니다. .css 확장자를 가진 외부 스타일 시트 파일에서 주석을 작성하는 방법은 오직 이 방법 하나뿐입니다!
하지만 HTML 파일 안에서 <style> 태그를 사용할 때는, 아주 오래된 구형 브라우저가 CSS 코드를 화면에 텍스트로 그대로 출력해 버리는 것을 막기 위해 HTML 주석 문법인 ``을 CSS 코드 주변에 사용할 수도 있습니다. (다만 요즘은 굳이 이렇게 할 필요가 없으므로 권장하지 않습니다).
/* */ 주석 문법을 사용하는 대부분의 프로그래밍 언어가 그렇듯, CSS 주석은 중첩(nested)해서 쓸 수 없습니다. 다시 말해, /* 기호로 주석이 시작된 후 처음 만나는 */ 기호에서 무조건 주석이 닫혀버립니다.

👨‍🏫 강사님의 꿀팁:
주석 중첩 금지! 이게 무슨 말이냐면 아래와 같은 실수를 조심하라는 뜻입니다.
/* >   여기에 메모를 씁니다.
  /* 이전에 꺼둔 코드 */
  .box { color: red; }
*/ 
위 코드는 에러를 냅니다! 바깥쪽 /* 가 열렸는데, 안쪽 /*는 무시되고 안쪽 */를 만나는 순간 브라우저는 "아, 주석 끝났구나!"라고 착각해 버립니다. 그 결과 뒤에 남은 .box { color: red; } */ 부분은 주석 처리가 안 돼서 CSS 문법 에러가 발생하게 됩니다.