CSS의 한 요소에 여러 클래스 사용

1. CSS에서 한 요소에 여러 클래스를 할당하고 두 클래스를 한 번에 스타일 지정
2. CSS에서 하나의 요소에 여러 클래스를 할당하고 두 클래스에 개별적으로 스타일 지정

이 자습서에서는 CSS의 단일 요소에서 여러 클래스를 사용하는 방법을 소개합니다.

CSS에서 한 요소에 여러 클래스를 할당하고 두 클래스를 한 번에 스타일 지정

HTML에서는 class 속성을 사용하여 요소에 클래스를 할당합니다. p, h1-h6, a, div 등과 같은 HTML의 모든 요소에 클래스를 적용할 수 있습니다. CSS에서는 클래스 선택자 .를 사용합니다. 해당 클래스 이름을 가진 요소를 선택하고 스타일을 적용할 수 있습니다. 그러나 단일 클래스에 여러 요소를 할당하고 클래스의 스타일을 지정하려는 경우가 있습니다. 이러한 경우 HTML을 사용하면 단일 요소에 여러 클래스를 할당할 수 있습니다. 모든 요소에서 공백으로 구분된 여러 클래스 이름을 작성할 수 있습니다. CSS를 사용하면 한 번에 두 클래스를 모두 선택하여 이러한 클래스의 스타일을 지정할 수도 있습니다. .를 사용할 수 있습니다. 선택기를 사용하여 첫 번째 클래스를 선택하고 공백을 남기지 않고 두 번째 클래스를 다시 선택합니다. 그런 다음 선택한 클래스의 스타일을 설정할 수 있습니다. 하나의 요소에 둘 이상의 클래스를 할당하고 모든 클래스에 한 번에 스타일을 적용할 수 있습니다.

예를 들어, HTML에 세 개의 p 태그를 만들고 클래스 이름 first, second 및 first second를 지정합니다. 세 번째 클래스의 경우 클래스 이름 사이에 공백이 남아 있습니다. p 태그 사이에 세 클래스에 대해 KTM, Honda 및 Kawasaki 텍스트를 씁니다. CSS에서 first 클래스를 선택하고 color를 orange로 설정합니다. 마찬가지로 second 클래스를 선택하고 red로 설정하고 마지막으로 두 클래스를 .first.second로 선택하고 색상을 green으로 설정합니다.

아래 예제에서는 단일 요소에 여러 클래스를 사용하고 해당 클래스에 한 번에 스타일을 지정했습니다.

예제 코드:

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

CSS에서 하나의 요소에 여러 클래스를 할당하고 두 클래스에 개별적으로 스타일 지정

하나의 HTML 요소에 여러 클래스를 할당하고 두 클래스의 스타일을 개별적으로 지정하여 CSS를 보다 효율적으로 작성할 수 있습니다. 이 접근 방식을 사용하여 적용된 스타일의 중복성을 제어할 수 있습니다. 공통 스타일을 여러 클래스에 적용하고 고유한 스타일을 특정 클래스에 적용할 수 있습니다.

예를 들어 p 태그에 title 클래스를 만들고 일부 텍스트를 작성합니다. 마찬가지로 다른 단락 태그를 만들고 여러 클래스 title text를 할당합니다. 단락 태그에 텍스트를 씁니다. CSS에서 title 클래스를 선택하고 background-color를 skyblue로 설정합니다. 그런 다음 text 클래스를 선택하고 green 색상을 지정합니다.

여기에서 두 단락의 배경색은 하늘색으로 설정됩니다. 배경색을 설정하기 위해 title 클래스에 스타일을 지정했기 때문입니다. 그리고 두 단락 모두에 title 클래스가 있습니다. 그러나 이 스타일을 text 클래스에만 적용했기 때문에 두 번째 단락의 색상은 green으로만 변경됩니다. 이 접근 방식을 사용하면 단일 요소에 대해 여러 클래스를 사용하여 공통 스타일과 개별 스타일을 요소에 적용할 수 있습니다. 이러한 방식으로 여러 클래스를 단일 요소에 할당하고 클래스를 개별적으로 스타일 지정하여 효율적인 CSS를 작성할 수 있습니다.

예제 코드:

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}