주석(Comment)

HTML 코멘트는 웹 페이지에 표시되지 않는 메모나 설명을 작성하기 위해 사용됩니다.

책의 여백에 필기를 하거나 중요한 부분에 메모지를 붙이는 것처럼, 개발자나 웹 디자이너가 코드의 특정 부분에 설명을 추가할 때 유용합니다.

기본 구조

HTML 코멘트는 <!--로 시작하고 -->로 마칩니다. 이 사이에 있는 모든 내용은 웹 페이지에서 보이지 않습니다.

HTML 코멘트 기본 구조

<!-- 이 줄은 코멘트입니다. 웹 페이지에 표시되지 않습니다 -->
<p>이 문장은 웹 페이지에 표시됩니다.</p>

코멘트 활용 예

1. 코드 설명: 복잡한 코드나 나중에 수정할 수 있는 부분에 대한 설명을 추가할 수 있습니다.

2. 코드 비활성화: 특정 코드 부분을 잠시 비활성화하고 싶을 때 코멘트로 감쌀 수 있습니다. 이렇게 하면 그 부분의 코드가 웹 페이지에 표시되지 않게 됩니다.

코멘트로 코드 비활성화

<!-- 아래의 이미지는 임시로 비활성화합니다.
<img src="example.jpg" alt="예시 이미지">
-->

3. 분리: 웹 페이지의 다른 섹션을 구분하기 위해 코멘트를 사용할 수도 있습니다.

예를 들어 주석으로 웹사이트의

• 헤더(header) : 웹페이지 상단의 머리말로 로고, 주요 메뉴(내비게이션), 검색창 등을 표시

• 본문(main) : 웹사이트의 핵심 콘텐츠를 표시

• 푸터(footer) : 웹페이지 하단에 사이트 정보(소셜 미디어, 저작권 표시 등) 등을 표시

등의 큰 섹션을 나누고 표시할 수 있습니다.

주석으로 섹션 구분

<!-- 헤더 시작 -->
<header>...</header>
<!-- 헤더 끝 -->

<!-- 본문 시작 -->
<main>...</main>
<!-- 본문 끝 -->

<!-- 푸터 시작 -->
<footer>...</footer>
<!-- 푸터 끝 -->

이렇게 HTML 코멘트는 코드의 가독성을 높이고, 다른 개발자와의 협업을 용이하게 돕습니다.

또한 코드의 특정 부분이 왜 그렇게 작성되었는지, 또는 어떤 변경이 필요한지 등의 정보를 간편하게 전달할 수 있습니다.

실습

코드의 별표로 강조된 부분을 따라 입력해 보세요.