웹 개발을 하다 보면 스타일시트(CSS) 블록 안에 추가 설명이나 메모를 남겨야 할 때가 종종 있습니다. 다행히 CSS에서는 스타일시트의 어떤 부분이든 아주 간단하게 주석 처리할 수 있으며, /*.....여기에 주석 내용을 작성합니다.....*/ 형태로 감싸기만 하면 됩니다.
CSS 주석의 기본 문법
CSS에서는 /* */ 기호를 사용해 주석을 작성합니다. C나 C++ 프로그래밍 언어에서처럼 이 기호를 이용하면 여러 줄에 걸친 블록도 한 번에 주석 처리할 수 있습니다.
- 한 줄 주석:
/* 주석 내용 */ - 여러 줄 주석:
/*와*/사이에 여러 줄의 코드나 설명을 넣으면 전부 주석으로 처리됩니다.
주석 추가 예제
다음은 HTML 문서의 <style> 태그 안에 한 줄 주석과 여러 줄 주석을 함께 사용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* 이것은 한 줄 주석입니다 */
text-align: center;
}
/* 이것은
여러 줄 주석입니다 */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>주석 활용 팁
주석은 브라우저 화면에는 표시되지 않지만, 코드를 동료와 공유하거나 나중에 다시 수정할 때 그 의미를 빠르게 파악하는 데 큰 도움이 됩니다. 특히 스타일 규칙이 많아지면 섹션별로 주석을 달아두면 유지보수가 훨씬 쉬워집니다.
또한 특정 스타일을 잠시 비활성화하고 싶을 때 해당 코드를 주석 처리하면 삭제하지 않고도 간편하게 테스트할 수 있다는 점도 기억해 두세요.