[HTML & CSS] 주석 정리

개요

웹 개발을 하다 보면 코드의 가독성을 높이거나 특정 코드를 일시적으로 비활성화하고 싶을 때가 있습니다.
이럴 때 “주석(Comment)”을 사용하면 코드 유지보수가 훨씬 쉬워집니다.
오늘은 HTML과 CSS에서 주석을 사용하는 방법을 정리해보겠습니다!

1. HTML 주석(Comment)

📌 HTML 주석 기본 문법

HTML에서 주석은  사이에 작성합니다. 주석으로 처리된 내용은 브라우저에 표시되지 않습니다.

<!-- 이것은 HTML 주석입니다. -->

📌 HTML 주석 사용 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 주석 예제</title>
</head>
<body>
    <!-- 웹페이지의 제목 -->
    <h1>안녕하세요! HTML 주석을 배워봅시다.</h1>

    <!-- 본문 내용을 설명하는 부분 -->
    <p>이것은 HTML 주석의 예제입니다.</p>

    <!-- 아래 코드는 현재 주석 처리되어 실행되지 않습니다. -->
    <!-- <a href="<https://seuheu.com>">이동하기</a> -->
</body>
</html>

📌 HTML 주석의 활용 방법

✅ 코드 설명: 개발자가 쉽게 이해할 수 있도록 설명 추가
✅ 임시 코드 비활성화: 특정 기능을 주석 처리하여 실행되지 않도록 설정
✅ 디버깅 및 유지보수: 협업 시 코드 가독성을 높이고 유지보수를 쉽게 함

2. CSS 주석(Comment)

CSS에서도 주석을 추가하여 스타일을 설명하거나 비활성화할 수 있습니다.
HTML과 다르게, CSS 주석은 /* */ 형태로 작성합니다.

📌 CSS 주석 기본 문법

/* 이것은 CSS 주석입니다. */

📌 CSS 주석 사용 예시

/* 본문 텍스트 스타일 */
p {
    font-size: 16px;
    color: #333;
}

/* 버튼 스타일 */
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

/* 아래 스타일은 현재 주석 처리되어 적용되지 않음 */
/*
button {
    background-color: red;
}
*/

📌 CSS 주석의 활용 방법

✅ 스타일 설명: 해당 스타일이 어떤 역할을 하는지 설명
✅ 디자인 테스트: 특정 스타일을 주석 처리하여 비교 테스트
✅ 비활성화: 필요 없는 스타일을 일시적으로 제거

3. HTML & CSS 주석 사용 시 주의할 점

✅ HTML 주석:  사용, CSS에서는 /* */ 사용
✅ HTML 주석은 <script> 태그 내부에서도 사용 가능하지만, JavaScript에서는 // 또는 /* */ 사용
✅ CSS 주석은 중첩이 불가능 (/* /* 중첩 불가 */ */ ❌)
✅ CSS의 @import 문법은 주석으로 처리해도 적용될 수 있음 (주의 필요)\