lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>CSS 주석 예제</title>
  </head>
  <body>
    <h1>CSS 주석 예제</h1>

    <p>
      CSS 주석은 코드 내에 설명을 추가하거나 특정 부분을 임시로 비활성화하고
      싶을 때 사용됩니다.
    </p>

    <div class="comment-example">/* 이것은 CSS 주석입니다. */</div>

    <div class="comment-example">/* 메인 배경색 설정 */</div>

    <div class="comment-example">
      /* TODO: 반응형 디자인에 맞게 폰트 크기 조절 필요 */
    </div>
  </body>
</html>

# 주석(Comment)

CSS 코드를 작성하며 특정 코드에 대한 설명을 기록하거나 특정 부분을 임시로 비활성화하려면 어떻게 해야 할까요?

이럴 때는 CSS `주석`(Comment)을 사용합니다.

<br />

## CSS 주석 사용법

CSS 주석은 `/*`로 시작하고 `*/`로 끝납니다.

```css title="CSS"
/* 이것은 CSS 주석입니다. */
body {
  background-color: lightblue;
}
```

<br />

## CSS 주석 활용법

1. `코드 설명`: CSS 코드에 주석을 추가하여 특정 CSS가 어떤 기능을 하는지, 왜 해당 스타일이 필요한지 등의 설명을 남길 수 있습니다.

```css title="CSS"
/* 메인 배경색 설정 */
body {
  background-color: lightblue;
}
```

이러한 주석은 팀원과 협업하거나 작성한 코드를 다시 볼 때 도움 됩니다.

<br />

2. `코드 비활성화`: 특정 스타일을 임시로 적용하지 않고 싶을 때 해당 부분을 주석 처리하고 비활성화할 수 있습니다.

```css title="CSS"
body {
  /* background-color: lightblue; 배경색 CSS 비활성화 */
  font-size: 16px;
}
```

<br />

3. `TODO 나 FIXME 표시`: 주석을 사용해 나중에 수정하거나 검토해야 할 부분을 표시해둘 수 있습니다. TODO는 나중에 해야 할 일, FIXME는 수정이 필요한 부분을 의미합니다.

```css title="CSS"
/* TODO: 반응형 디자인에 맞게 폰트 크기 조절 필요 */
h2 {
  font-size: 24px;
}
```

<br />

## 주의사항

- CSS 주석 내부에 `/*` 또는 `*/`를 중복으로 사용할 수 없습니다.

- 주석은 브라우저에 의해 렌더링되지 않지만, 웹 페이지의 소스 코드를 보면 주석 내용이 그대로 보이므로 민감한 정보는 주석에 포함시키지 않는 것이 좋습니다.