주석(Comment)

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

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

CSS 주석 사용법

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

CSS

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

CSS 주석 활용법

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

CSS

/* 메인 배경색 설정 */
body {
  background-color: lightblue;
}

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

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

CSS

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

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

CSS

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

주의사항

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

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