[CSS] #04 CSS 기초이해, CSS 주석 작성법 완벽 가이드! 협업과 유지보수를 위한 필수 스킬

 

 

안녕하세요, 토스트데브입니다!
오늘은 CSS를 작성할 때 빠질 수 없는 “주석(Comment)”에 대해 알아보겠습니다.

"CSS에서 주석이 왜 필요할까?" 라고 생각할 수 있지만, 규모가 커지거나 팀으로 개발할 때 주석은 필수적인 의사소통 도구입니다.

코드 한 줄 한 줄에 의미를 담고, 미래의 나와 동료들을 위한 설명서를 작성하는 것!
바로 CSS 주석의 힘입니다.

 

 

1️⃣ CSS 주석이란?

CSS 주석은 브라우저가 실행하지 않는 코드 설명 텍스트입니다.
코드의 의미나 작성자의 의도를 남기거나, 특정 코드 블록을 임시로 비활성화할 때 사용합니다.

 

 

2️⃣ CSS 주석 작성 방법

CSS에서는 /* */ 형식을 사용해 주석을 작성합니다.

✅ 기본 형식:

/* 이 부분은 제목에 대한 스타일입니다 */
h1 {
  color: navy;
  font-size: 32px;
}

❌ 잘못된 방식 (주석 아님!)

// 이렇게 작성하면 오류 발생! (JavaScript 문법)
#box {
  background: red;
}

⚠️ 참고: CSS는 // 형식의 주석을 지원하지 않으므로 항상 /* */를 사용해야 합니다.

 

 

3️⃣ CSS 주석의 활용 예시

📌 코드 설명을 위해

/* 메인 섹션 배경 설정 */
.main-section {
  background-color: #f9f9f9;
  padding: 40px;
}

 

📌 코드 블록 구분

/* -------------------- 헤더 영역 -------------------- */
header {
  background-color: black;
  color: white;
}

/* -------------------- 콘텐츠 영역 -------------------- */
.content {
  padding: 20px;
}

 

📌 테스트 코드 비활성화

/*
.button {
  background: red;
  color: white;
}
*/

👉 이처럼 주석 처리하면 해당 코드는 적용되지 않음 (비활성화됨)

 

 

4️⃣ CSS 주석 사용 시 주의할 점

항목	설명
✅ 간결하게 작성	너무 긴 주석은 오히려 가독성을 해칠 수 있어요
✅ 의미 있게 작성	코드의 목적을 분명히 설명해 주세요
✅ 중첩 불가	CSS 주석은 중첩해서 사용할 수 없습니다
❌ // 사용 금지	CSS에서는 //로 주석 작성 시 오류 발생

❌ 중첩 주석 예시 (사용 금지)

/* 
  전체 설정
  /* 내부 주석 - 오류 발생! */
*/

 

 

5️⃣ 협업 시 CSS 주석의 역할

• 코드 수정 시, 이전 작성자 의도를 파악하기 쉬움
• 유지보수할 때 어디를 수정해야 할지 빠르게 이해 가능
• CSS 파일을 구조화해, 필요한 영역만 빠르게 찾을 수 있음

 

 

6️⃣ 정리하며…

CSS 주석은 단순한 '설명문'을 넘어서 코드의 가독성, 유지보수, 협업 효율성까지 높여주는 필수 기술입니다.
지금부터라도 의미 있는 주석을 습관처럼 작성해보세요. 
미래의 나와 동료들이 분명히 고마워할 겁니다 😊

 

#CSS주석 #웹개발기초 #CSS기초 #프론트엔드팁 #웹디자인기초 #코드가독성 #웹개발협업 #CSS작성법 #CSS코드관리 #유지보수팁