[HTML5] 클래스 안에 클래스를 넣어 보자

class 속성을 사용하여 요소에 여러 클래스를 할당할 수 있습니다.

class 속성을 사용하면 HTML 요소에 여러 CSS 클래스를 적용할 수 있으므로 콘텐츠의 스타일을 지정하고 구성하는 데 도움이 됩니다. 여러 클래스를 사용하면 서로 다른 CSS 규칙의 스타일을 단일 요소로 결합할 수 있습니다.

 

<element class="class1 class2 class3">
  <!-- 내용은 여기로 갑니다 -->
</element>

element: 클래스가 적용될 HTML 요소를 나타냅니다.
class1, class2, class3, etc.: 요소에 적용하려는 CSS 클래스의 이름입니다. 각 클래스 이름은 공백으로 구분됩니다.

 

<div class="container main-content">
  <h1 class="title">Welcome to Our Website</h1>
  <p class="description">이것은 우리 서비스에 대한 단락입니다.</p>
</div>

위의 예에서 <div> 요소에는 container와 main_content라는 두 가지 클래스가 적용되어 있습니다.

<h1> 요소에는 title이라는 하나의 클래스가 있고 <p> 요소에는 description이라는 하나의 클래스가 있습니다.

CSS 파일에서 각 클래스의 스타일을 정의할 수 있습니다. 

예를 들어:

.container {
  padding: 20px;
  background-color: #f2f2f2;
}

.main-content {
  width: 80%;
  margin: 0 auto;
}

.title {
  font-size: 24px;
  color: #333;
}

.description {
  font-size: 16px;
  color: #555;
}

이 CSS 코드에서는 클래스 컨테이너, 주요 콘텐츠, 제목 및 설명에 대한 스타일을 정의합니다. 이러한 스타일은 HTML에서 해당 클래스 이름이 있는 요소에 적용됩니다.

여러 클래스를 사용하면 HTML 코드를 더 깨끗하고 체계적으로 유지할 수 있습니다. 또한 동일한 CSS 규칙을 반복하지 않고도 여러 요소에서 스타일을 재사용할 수 있습니다. 요소에 여러 클래스가 있는 경우 지정된 모든 클래스의 스타일이 요소에 적용되어 HTML 및 CSS 스타일 지정에 대한 보다 모듈적이고 유연한 접근 방식을 제공합니다.