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

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

로 끝내요. 처럼요. 두 표시 사이의 모든 것은 태그까지 포함해서 브라우저가 무시하기 때문에, 같은 문법으로 코드를 주석 처리할 수도 있어요.

Q: HTML에서 여러 줄 주석은 어떻게 만드나요?

HTML의 주석 문법은 하나뿐이고, 몇 줄이든 이어서 쓸 수 있어요. 첫 줄에 를 두세요.

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

VS Code와 대부분의 코드 에디터에서 줄을 선택하고 Ctrl + /(Windows, Linux) 또는 Cmd + /(Mac)를 누르세요. 에디터가 선택한 부분을 로 감싸 주고, 같은 키를 다시 누르면 제거돼요.

Q: HTML 주석을 중첩할 수 있나요?

아니요. 처음 나오는 -->가 주석을 끝내기 때문에 c -->에서는 c -->가 페이지에 표시돼요. 주석이 들어 있는 블록을 주석 처리하려면 먼저 안쪽 주석을 지우거나 바꾸세요.

Q: HTML 주석이 CSS나 JavaScript 안에서도 동작하나요?

아니요. 요소 안에서는 / ... /를, 안에서는 //나 / ... /를 쓰세요. 스타일 블록 안의 HTML 주석은 그 안의 CSS 규칙을 숨기지 못해요.

HTML에서 주석 쓰는 법

HTML 주석은 로 끝나요. 브라우저는 두 표시 사이의 모든 것을 무시하기 때문에 그 텍스트는 페이지에 절대 나타나지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

제목과 문단만 보여요. HTML의 주석 문법은 하나뿐이고, 한 줄에도 여러 줄에도 똑같이 써요.

VS Code와 대부분의 에디터에서 쓰는 단축키: 줄을 선택하고 Ctrl + /(Mac에서는 Cmd + /)를 누르세요. 에디터가 표시를 붙여 주고, 같은 키를 누르면 다시 제거돼요.

코드 주석 처리하기

브라우저는 주석 안의 태그를 무시하기 때문에, 마크업을 로 감싸면 지우지 않고도 숨길 수 있어요. 어떤 요소가 없는 상태로 페이지를 확인하는 가장 빠른 방법이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

배너 줄에서 를 지우면 다시 나타나요. 주석 처리한 코드도 페이지와 함께 다운로드되니까, 필요 없다는 확신이 들면 지우세요.

주석은 중첩할 수 없어요

처음 나오는 -->가 항상 주석을 닫아요. 주석 처리하려는 코드에 이미 주석이 있으면 바깥 주석이 일찍 끝나고 나머지가 페이지로 흘러나와요. 이 예제는 중첩된 주석을 브라우저의 파서에 넘기고 무엇이 보이게 되는지 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden -->가 텍스트로 표시돼요. 큰 블록을 주석 처리하기 전에 안쪽 주석을 지우세요(또는 안쪽의 -->를 바꿔서 더 이상 일치하지 않게 하세요).

규칙이 몇 가지 더 있어요. 주석은 처럼 주석을 닫으니까, 둘 다 주석 텍스트에 넣지 마세요.

주석은 공개돼요

주석은 서버가 보내는 HTML의 일부라서, 모든 방문자가 페이지 소스 보기나 개발자 도구로 읽을 수 있어요. 스크립트로 목록을 뽑을 수도 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

주석에는 코드에 대한 메모만 남기세요. 비공개 정보(비밀번호, API 키, 내부 URL, 고객 데이터)는 주석이든 아니든 절대 HTML에 있으면 안 돼요. 빌드 도구와 압축 도구는 보통 프로덕션 HTML에서 주석을 없애는데, 덕분에 몇 바이트도 줄어요.

CSS와 JavaScript의 주석

HTML 주석은 HTML에서만 동작해요. <style>과 <script> 안에서는 각 언어의 주석 문법을 써요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

제목이 파란색이 돼요. CSS는  표시 자체를 무시하고, 그 사이의 규칙은 그대로 적용해요. CSS를 끄는 건 /* ... */뿐이에요. 이 문법은 CSS 주석 페이지에서 다뤄요.

조건부 주석

오래된 코드에는 가끔 가 있어요. Internet Explorer 9 이하를 위한 지시문이었어요. 현재 브라우저는 모두 이걸 일반 주석으로 취급해서 안의 내용을 무시하니까, 블록 전체를 지워도 돼요.

자주 하는 실수

주석을 중첩함. 안쪽 -->가 바깥 주석을 끝내요. 블록을 주석 처리하기 전에 안쪽 주석을 지우세요.
주석에 비밀 정보를 넣음. 주석은 모든 방문자에게 전송돼요.
-->를 빼먹음. <!-- 뒤부터 파일 끝까지 모두 사라져서, 페이지 절반이 없어진 것처럼 보여요.
CSS에서 를 씀. 규칙이 꺼지지 않아요. /* */를 쓰세요.
HTML에서 //를 씀. // note는 텍스트로 표시돼요. HTML은 만 이해해요.

자주 묻는 질문

HTML에서 주석은 어떻게 쓰나요?

로 끝내요. 처럼요. 두 표시 사이의 모든 것은 태그까지 포함해서 브라우저가 무시하기 때문에, 같은 문법으로 코드를 주석 처리할 수도 있어요.

HTML에서 여러 줄 주석은 어떻게 만드나요?

HTML의 주석 문법은 하나뿐이고, 몇 줄이든 이어서 쓸 수 있어요. 첫 줄에 를 두세요.

HTML 주석 단축키는 무엇인가요?

VS Code와 대부분의 코드 에디터에서 줄을 선택하고 Ctrl + /(Windows, Linux) 또는 Cmd + /(Mac)를 누르세요. 에디터가 선택한 부분을 로 감싸 주고, 같은 키를 다시 누르면 제거돼요.

HTML 주석을 중첩할 수 있나요?

아니요. 처음 나오는 -->가 주석을 끝내기 때문에  c -->에서는 c -->가 페이지에 표시돼요. 주석이 들어 있는 블록을 주석 처리하려면 먼저 안쪽 주석을 지우거나 바꾸세요.

사용자가 HTML 주석을 볼 수 있나요?

화면에 표시되지는 않지만 페이지와 함께 브라우저로 전송돼요. 누구나 페이지 소스 보기나 개발자 도구로 읽을 수 있으니 비밀번호, 키, 비공개 메모는 절대 넣지 마세요.

HTML 주석이 CSS나 JavaScript 안에서도 동작하나요?

아니요. <style> 요소 안에서는 /* ... */를, <script> 안에서는 //나 /* ... */를 쓰세요. 스타일 블록 안의 HTML 주석은 그 안의 CSS 규칙을 숨기지 못해요.

HTML 주석: 문법, 여러 줄 주석, 단축키