학습 자료

주석(Comment)

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

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

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


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

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

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

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

주석은 언제 사용할까요?

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

코드 설명

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


코드 비활성화

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

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

섹션 분리

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


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

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

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

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

주석으로 섹션 구분하기
<!-- 헤더 시작 --> <header>...</header> <!-- 헤더 끝 --> <!-- 본문 시작 --> <main>...</main> <!-- 본문 끝 --> <!-- 푸터 시작 --> <footer>...</footer> <!-- 푸터 끝 -->

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


실습

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

Mission
0 / 1

HTML 주석 만들기

아래 내용을 주석으로 바꾸기 위한 HTML 코드를 작성해 보세요.

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

 본문 내용 

학습 자료

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말