[css] 클래스 선택자

22 Dec 2023

CSS 클래스 선택자는 HTML 요소에 스타일을 적용할 때 사용되는 중요한 도구입니다. 클래스 선택자는 동일한 스타일을 여러 요소에 적용하고자 할 때 유용하게 활용됩니다.

클래스 선택자의 기본 구조

.클래스명 {
  속성: 값;
}

예시

다음은 클래스 선택자를 사용하여 스타일을 정의하는 간단한 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>일반 텍스트</p>
  <p class="highlight">강조된 텍스트</p>
  <p class="highlight">또 다른 강조된 텍스트</p>
</body>
</html>

위 예시에서 .highlight 클래스 선택자는 배경색을 노란색으로 지정하고 글꼴을 굵게 설정합니다. 이 클래스를 사용하여 텍스트에 스타일을 적용할 수 있습니다.

클래스 선택자의 활용

여러 요소에 동일한 스타일을 적용해야 하는 경우 클래스 선택자를 사용하여 중복을 제거하고 코드의 유지보수성을 높일 수 있습니다. 또한 클래스 선택자는 HTML 문서의 의미를 더 잘 표현하고 일관된 디자인을 제공하는 데 도움을 줍니다.

결론

CSS 클래스 선택자는 스타일을 일관되게 적용할 수 있도록 도와주는 강력한 도구입니다. 클래스 선택자를 올바르게 활용하여 가독성이 좋고 유지보수가 편리한 스타일 시트를 작성할 수 있습니다.

더 많은 정보를 원하시면 Mozilla Developer Network를 참고하시기 바랍니다.