코드에 주석(comment)을 추가하면 나중에 자신이나 다른 개발자가 코드의 용도를 쉽게 이해할 수 있어 매우 유용합니다. 주석으로 처리된 코드나 텍스트는 브라우저가 완전히 무시하기 때문에 화면에 표시되지 않습니다.
이 글에서는 HTML, CSS, JavaScript에서 주석을 작성하는 방법을 하나씩 살펴보겠습니다.
HTML에서 주석 작성하는 방법
HTML 한 줄 주석
HTML 코드 한 줄을 주석 처리하려면 해당 텍스트나 코드를 주석 태그인 <!-- --> 사이에 넣으면 됩니다.
실제 코드에서는 아래와 같이 작성합니다:
<!-- 이 안의 텍스트는 웹사이트에 표시되지 않습니다 -->
<div class="content">
일반적인 HTML 콘텐츠입니다!
</div>웹사이트를 불러오면 HTML 주석은 페이지 자체에는 나타나지 않습니다.
하지만 브라우저의 개발자 도구로 웹사이트 소스 코드를 검사해 보면 HTML 주석 내용이 여전히 남아 있는 것을 확인할 수 있습니다.
HTML 여러 줄 주석
여러 줄 또는 블록 형태의 HTML 주석을 만들 때도 동일하게 <!-- --> 태그를 사용합니다. 다만 주석 안에 여러 줄의 내용을 포함할 수 있다는 점이 다릅니다. 주석 텍스트가 태그 사이에만 있으면 몇 줄이든 모두 주석으로 처리됩니다.
여러 줄 HTML 주석의 예시는 다음과 같습니다:
<!--
이 안의 텍스트는 웹사이트에 표시되지 않습니다!
주석의 두 번째 줄입니다.
원하는 만큼 줄 수를 늘릴 수 있습니다! 😁
-->
<div class="content">
아까 그 일반적인 HTML 콘텐츠입니다.
</div>웹사이트 화면에서는 아래와 같이 보입니다:
개발자 도구(Inspector)에서는 전체 HTML 주석을 확인할 수 있습니다:
CSS에서 주석 작성하는 방법
CSS 한 줄 주석
CSS에서 한 줄 주석을 만들려면 주석 텍스트나 코드를 /* */ 태그 사이에 넣습니다.
예시는 다음과 같습니다:
/* 이 텍스트는 브라우저가 무시합니다! */
.description {
font-size: 1rem;
line-height: 1.25rem;
color: #202020;
}CSS 여러 줄 주석
여러 줄 또는 블록 형태의 CSS 주석 역시 같은 /* */ 태그를 사용하며, 주석 내용을 여러 줄에 걸쳐 작성하면 됩니다.
여러 줄 CSS 주석은 아래와 같은 형태입니다:
/*
이 텍스트는 브라우저가 무시합니다!
이 내용도 주석에 포함됩니다!
마지막으로 한 줄 더 적어봅니다 😁
*/
.description {
font-size: 1rem;
line-height: 1.25rem;
color: #202020;
}JavaScript에서 주석 작성하는 방법
JavaScript 한 줄 주석
JavaScript에서 한 줄 주석을 만들려면 줄 앞에 슬래시 두 개(//)를 붙이면 됩니다.
예시는 다음과 같습니다:
// 이 텍스트는 주석이며 무시됩니다!또한 코드와 같은 줄에 한 줄 주석을 추가할 수도 있습니다. 단, 주석이 그 줄의 마지막 내용이어야 정상적으로 동작합니다.
아래와 같이 활용할 수 있습니다:
console.log('테스트 코드입니다!'); // 콘솔 로그 메시지입니다JavaScript 여러 줄 주석
JavaScript에서 여러 줄 또는 블록 주석을 만들려면 주석 텍스트를 /* */ 태그로 감싸면 됩니다. (CSS와 동일한 방식입니다.)
실제 작성 예시는 아래와 같습니다:
/*
함수: doSomeAwesomeThing()
멋진 기능을 수행하지만 정확히 무엇인지는 모릅니다!
*/
function doSomeAwesomeThing(){
console.log('멋진 함수 실행');
}마무리
HTML, CSS, JavaScript 코드에 주석을 추가하면 다른 사람들이 여러분의 코드를 훨씬 쉽게 이해할 수 있습니다.
또한 개발 중인 프로젝트에서 테스트할 때 특정 코드를 임시로 주석 처리해야 할 때도 유용합니다. 다만, 실제 서비스(운영 환경) 코드에는 주석을 남기지 않도록 주의하세요!