카테고리 보관물: HTML 텍스트 요소

HTML 텍스트 요소

HTML 주석(Comment) 처리 방법

댓글 남기기

주석(Comment)
주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다. 이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않는다.

HTML 주석(Comment) 태그

다음 구문을 사용하여 html 소스코드에 주석을 추가할 수 있다.

<!-- 설명을 남기기 위해선 이와 같은 방식으로 한다. -->

HTML 주석의 시작 태그()에는 느낌표가 없다. 이러한 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있다. 또한, 여러 줄에 걸쳐 주석을 작성해도 정확히 인식할 수 있다.

예제 1

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML Comments</title>
</head>
<body>

	<h1>HTML 주석</h1>
	<!-- 작성자 : IT -->
	<p>html 주석에 대해서 한 번 알아봅시다.</p>
	<!-- 
		이 다음부터의 내용은 어려운 코드가 나타날 수 있기 때문에 미리 설명해놓는다.
	-->

</body>
</html>

위의 예제처럼 HTML 주석은 절대 웹 페이지에 나타나지 않는다. HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해서 확인할 수 있다.

주석을 사용하면 더욱 다양한 방식으로 표현할 수 있다.

예제 2

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML Comments</title>
</head>
<body>

	<h1>HTML 코드 에러 발생!!</h1>

	<!-- 아래쪽 코드는 잘못된 부분이기 때문에 임시적으로 화면에 노출되지 못하게 한다
	<img border="0" src="itopening.jpg" alt="Trulli">
	-->

</body>
</html>

위와 같이 소스코드를 주석으로 포함시키게 되면 소스코드 또한 주석화 되어서 html 소스코드 작업시 유용하게 사용할 수 있다.

※HTML 소스 코드를 확인하는 방법은 인터넷 익스플로러(IE)는 마우스 오른쪽을 누른 후 소스 보기를 크롬과 파이어폭스에서는 F12 버튼을 눌러주면 된다.

중첩 주석

HTML 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있는게 장점이다. 하지만 HTML 주석 안에 또 다른 주석을 작성할 수는 없다. 이것을 중첩 주석이라고 하는데, 어떻게 되는지 한 번 보자.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML 중첩주석</title>
</head>
<body>

	<h1>HTML 중첩주석</h1>

	<!--
		<!-- 주석안에 또 다른 주석을 넣어봤다. 결과는?? -->
	-->

</body>
</html>

예제를 확인해보면 분명히 오류가 발생한 것을 확인할 수 있다. 주석안에 주석을 또 삽입하게 되면, 종료태그(–>)를 첫 번째 주석으로 착각해서 종료 태그로 인식해버리게 된다. 따라서 2번째 주석의 종료태그는 무용지불이 되어버리고 그대로 웹페이지에 노출되게 되는것이다.

html 주석을 중첩으로 사용하면 절대 안된다.