주석(Comment)

HTML에서 주석(코멘트)은 웹 페이지에 표시되지 않는 메모나 설명을 작성합니다.

주로 코드에 대한 설명이나 수정 내용, 작성자 정보 등을 코드에 기록할 때 사용합니다.

코드프렌즈 웹 코딩 실습 환경은 HTML 코드의 주요 부분에 주석을 활용해 학습자 분들이 코드를 더 쉽게 이해할 수 있도록 돕습니다.

주석은 어떻게 사용하나요?

HTML 주석은 <!--로 시작하고 -->로 끝납니다.

주석으로 감싸진 모든 내용은 웹 페이지에서 보이지 않습니다.

HTML 주석 기본 구조

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

주석은 언제 사용할까요?

주석은 주로 다음과 같은 상황에 사용합니다.

코드 설명

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

코드 비활성화

특정 코드 부분을 잠시 비활성화하고 싶을 때 주석로 감쌀 수 있습니다. 주석으로 처리된 코드는 웹 페이지에 표시되지 않습니다.

주석로 코드 비활성화하기

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

섹션 분리

웹 페이지의 다른 섹션을 구분하기 위해 주석을 사용할 수도 있습니다.

예를 들어 주석으로 웹사이트의 다음과 같은 섹션을 구분할 수 있습니다.

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

• 본문(main) : 웹사이트의 핵심 콘텐츠 포함

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

주석으로 섹션 구분하기

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

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

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

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

실습

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