HTML 주석 처리 예제 및 디버깅과 단축키

HTML 주석은 컴퓨터 코드에 부가 설명을 다는 기능으로 실행에는 영향을 끼치지 않으면서, 인간에게는 가독성을 부여합니다. HTML의 주석은  형태를 사용합니다.

주석 처리

HTML 주석 처리 방법은 한 줄과 여러 줄 무관하게 하나의 형태입니다. 부등호 < >, 느낌표 !, 하이픈 ‐‐ 이 섞인 조합입니다.

<!-- 주석 -->

예제를 보면 <!‐‐주석--> 및 <!‐‐주석 기호 사이의 데이터는 웹브라우저에 출력되지 않습니다.‐‐> 의 메시지는 브라우저에 출력되지 않는 다는 것을 알 수 있습니다.

주석 처리할 앞 부분에 <!‐‐ 기호를 삽입하고 마지막 부분에 ‐‐>기호를 삽입합니다.

주석이란?

원래 주석의 의미란 본문에서 어려운 단어나 부가 설명 등을 추가로 기입하는 기능입니다.

컴퓨터 마크업 언어나 프로그래밍 언어에서 주석이란 복잡한 코드에 대해서 부가 설명을 다는 기능을 말합니다.

컴퓨터 언어는 컴퓨터와 인간 사이의 중간 정도의 언어이므로 공부를 해야할 정도로 복잡합니다. 코드가 길어졌을 때 부가 설명이 있지 않으면 프로그램을 짠 작성자도 헷갈릴 것입니다.

그래서 코드 중간 중간에 부가설명 기능인 주석을 삽입합니다. 대신 주석은 컴퓨터 프로그램 실행에는 영향을 주지 않기 때문에 효율적입니다.

HTML 여러 줄 주석

아래와 같은 HTML 코드가 있습니다. 여기서 만약 자동차부터 스마트폰 까지 코드를 지우지 않고 잠시 웹브라우저에서 숨기고 싶은 경우 어떻게 해야 할까요?

<h1>과일맛의 종류</h1>
  <ul>
    <li>자동차맛</li>
    <li>수건맛</li>
    <li>우주선맛</li>
    <li>연필맛</li>
    <li>스마트폰맛</li>
  </ul>

주석을 활용해서 해당 영역 사이를 감싸면 됩니다. 주석 처리할 앞 부분에 <!‐‐ 기호를 삽입하고 주석 처리를 마무리할 부분에 ‐‐> 기호를 삽입하면 됩니다.

<h1>과일맛의 종류</h1>
<!--
  <ul>
    <li>자동차맛</li>
    <li>수건맛</li>
    <li>우주선맛</li>
    <li>연필맛</li>
    <li>스마트폰맛</li>
 </ul>
-->

주석 처리된 코드가 현재는 불필요하지만 나중에 복구를 하고 싶은 경우 >주석 기호만 제거를 하면 다시 사용할 수 있습니다.

HTML 주석 디버깅 활용

웹브라우저의 디버깅 기능이나 HTML 편집기의 자체 디버깅 기능이나 코드 자동 완성 기능으로 HTML 코드로 실수를 할 확률이 낮은 것은 사실입니다.

그럼에도 불구하고 코드를 짜다보면 사소한 실수를 할 수 있습니다. 아주 가끔 컴퓨터가 어디에 오류가 있는지 잡아내지 못하는 경우가 있습니다.

수동으로 오류를 찾아야 하는 경우 주석 기능을 활용해볼 수 있습니다.

아래 예시를 보면 총 다섯 개의 <a> 태그로 링크를 만들었습니다. 그러나 실제로 웹브라우저에 출력된 것은 네 가지 뿐입니다.

<a href="https://www.amazon.com/">아마존</a>
<a href="https://www.apple.com">애플</a>
<a href="https://www.tesla.com">테슬라</a>
<a href="https://www.wikipedia.org/'>위키백과</a>
<a href="https://www.ibm.com">IBM</a>

그럴 경우 오류로 의심되는 부분을 주석으로 하나씩 묶어서 관찰해보면 범인을 찾을 수 있습니다. 위키백과를 제작한 <a>태그 구문을 잘 살펴보니 마지막 따옴표가 작은 따옴표 ' 로 되있습니다.

<a href="https://www.amazon.com/">아마존</a>
<a href="https://www.apple.com">애플</a>
<a href="https://www.tesla.com">테슬라</a>
<!--
<a href="https://www.wikipedia.org/'>위키백과</a>
-->
<a href="https://www.ibm.com">IBM</a>

HTML 주석 vs CSS 주석

CSS 주석 /**/ , 다른 프로그래밍에서 자주 쓰이는 한 줄 주석 // 또는 # 기호는 작동하지 않으니 유의합니다. HTML은 한 줄 주석도 모두  기호로 처리해야 합니다.

<p>HTML 주석</p> <!--작동-->
<p>CSS 주석</p> /*오류*/
<p>한 줄 주석 1</p> // 오류
<p>한 줄 주석 2</p> # 오류

HTML 주석 단축키

Atom 에디터 주석 단축키

주석 지정 Ctrl + /
주석 해제 Ctrl + /

Visual Studio 주석 단축키

주석 지정 Ctrl + K + C
주석 해제 Ctrl + K + U

Codepen 주석 단축키

주석 지정 Ctrl + /
주석 해제 Ctrl + /

HTML 주석 중첩

HTML에서 주석 중첩은 되지 않습니다. 중첩을 할 경우 마지막 ‐‐>기호가 웹브라우저에 노출됩니다.

<!-- 주석 중첩
<!-- 주석 중첩 -->
-->

왜냐하면 중첩 구문의 <!‐‐ 기호가 무시되고 중첩 구문의 ‐‐> 기호가 주석을 닫는 태그로 인식되기 때문입니다.