CSS에서 주석(comment)을 활용하면 코드의 가독성을 높이고, 각 선언이 어떤 역할을 하는지 쉽게 파악할 수 있습니다. 특히 여러 사람이 함께 작업하는 프로젝트나 나중에 코드를 다시 수정할 때 주석은 매우 유용합니다.
CSS의 주석은 C 언어 스타일의 문법을 따릅니다. 즉, 슬래시와 별표(/* */)로 시작하고 끝나며, 그 사이에 주석 내용을 작성합니다. /* */ 안에 작성된 모든 선언은 브라우저에 의해 무시되며 화면에 아무런 영향을 주지 않습니다.
문법(Syntax)
CSS 주석의 기본 문법은 다음과 같습니다.
/*주석 내용*/
예제 1
다음 예제는 목록 항목 앞에 표시되는 기본 원형 마커를 제거하는 코드에 주석을 추가한 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none; /*기본 원형 마커 제거*/
}
</style>
</head>
<body>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
아래 예제에서는 주석을 활용해 코드의 의도를 설명하고, 일시적으로 사용하지 않는 스타일을 비활성화하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {/*모든 <div> 요소를 선택하여 아래 스타일 적용*/
margin: 8px;
float: left;
width: 100px;
height: 100px;
/*border: 2px solid black;*/
/*테두리 제거됨*/
background-color: lightpink;
}
div + div { /*두 번째 div를 원 모양으로 만듦*/
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>출력 결과
위 코드를 실행하면 첫 번째 div는 사각형, 두 번째 div는 원 형태로 출력됩니다.
정리
CSS 주석은 /* */ 형식으로 작성하며, 코드 설명, 임시로 스타일을 비활성화할 때 등 다양한 용도로 활용할 수 있습니다. 단, 주석 안에 또 다른 주석을 중첩해서 작성할 수 없으므로 이 점에 유의해야 합니다.