CSS에서 주석을 추가하는 방법

CSS에 주석을 추가하는 이유는 무엇입니까? 코드 설명은 주석을 통해 제공되며 향후 소스 코드를 변경하기로 결정한 경우 유용할 수 있습니다. 브라우저는 주석을 읽지 않는다는 것을 아는 것이 중요합니다.
/* */ 주석 구문은 한 줄 및 여러 줄 주석 모두에 사용됩니다.

한 줄 주석

두 가지 방법으로 스타일시트에 주석을 추가할 수 있습니다. 가장 일반적인 형식은 아래와 같이 한 줄 주석입니다.

/* This is a comment in CSS */
body {
  line-height: 1.5;
  text-align: left;
}

한 줄 주석은 자체 줄을 가질 수 있거나 다음과 같이 활성 코드가 있는 줄에 배치할 수 있습니다.

.card h3 {
  font-size: 1.2rem;
  color: #333; /* set the text color to dark charcoal */
  margin: 15px 0;
}

여러 줄 주석

여러 줄 주석으로 서식을 지정할 수도 있습니다.

/*
A comment
which stretches
over several
lines
*/

주석은 또한 실행되지 않도록 CSS 스타일시트에서 특정 스타일을 비활성화하는 데 사용할 수 있습니다.

/* The comment below is used to
   disable specific styling */
/*
h1 {
  font-size: 3rem;
  font-weight: 700;
}
*/

주석이 있는 웹 페이지 섹션에 대한 스타일의 시작과 끝을 지정할 수 있습니다.

/* Contact section starts */
.contact-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: #0b2535;
  border-radius: 5px;
  padding: 40px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* Contact section ends */

주석을 사용하여 CSS에 메모를 추가할 수도 있습니다.

/* Don’t override this style. This makes images easier to work with */

결론

CSS를 작성할 때 무엇을 하고 있었는지 기억할 때 주석을 추가하는 것이 도움이 될 수 있습니다.

또한 주석을 올바르게 추가하면 오랫동안 코드를 보지 않은 경우 프로젝트 작업을 더 쉽게 시작할 수 있습니다.

CSS에 대해 더 알고 싶으세요? 다음 기사를 확인해 보십시오.

How do you use Cascading Style Sheets (CSS)?
What are CSS Rules and Selectors?
What are the 4 properties in a CSS Box Model?