안녕하세요.
이번 포스팅에서는 HTML의 주석에 대해 알아보겠습니다.
Comment라고도 부르는 주석은 개발자들이 확인하기 위해 작성하는 문서로, 화면 상에는 보여지지 않습니다.
HTML에서 주석 역시 태그처럼 시작과 끝이 존재합니다.
시작은 <!--, 끝은 -->로 표현합니다.
주석의 시작과 끝 사이에 존재하는 내용은 화면에 표시되지 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
이것은 눈에 보이는 내용입니다.
</p>
<!--
<p>
이것은 눈에 보이지 않는 내용입니다.
</p>
-->
</body>
</html>
이렇게 하면 <p></p> 태그 자체가 숨겨져서 보이지 않습니다.
한 줄만 가리기 위해서 다음과 같이 쓸 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
이것은 눈에 보이는 내용입니다.
</p>
<p>
<!-- 이것은 눈에 보이지 않는 내용입니다. -->
</p>
</body>
</html>
단, 이 경우는 앞선 경우와 달리 <p></p> 태그는 정상적으로 출력 됩니다.
<p></p> 태그가 정상적으로 출력 되었는지 확인하는 방법은 개발자 도구를 이용하는 방법입니다.
개발자 도구는 일반적으로 브라우저에서 F12를 누르면 열립니다.
크롬의 경우 개발자 도구를 열고 요소 탭으로 가면 HTML 파일을 확인할 수 있습니다.
그리고 보시다시피 <p></p> 태그는 정상적으로 화면에 출력되어 있습니다.
개발자 도구는 프론트엔드 개발을 하면 자주 접하게 되고 유용하기 때문에 친숙해지는게 좋습니다.
'Frontend 기본' 카테고리의 다른 글
| HTML 태그 - <video> (0) | 2022.08.09 |
|---|---|
| HTML 태그 - <img> (0) | 2022.08.08 |
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |
| HTML 태그 - <b>, <strong>, <i>, <em> (0) | 2022.08.02 |