class 속성

class 속성은 요소(태그를 의미함)에 하나 이상의 클래스를 지정합니다.

이는 동일한 클래스가 지정된 요소 그룹에 CSS를 통해 접근하여 특정 속성을 적용하기 위함입니다(예: 텍스트 색상, 글꼴 크기 변경 등).

class 속성과 유사하게 HTML 페이지의 요소를 선택할 수 있는 id 속성도 있습니다.

class 속성과 id 속성의 차이점은 class는 요소 그룹을 선택하는 반면 (단일 요소에 주어진 경우에도 나중에 다른 요소에 줄 수 있음), id는 고유한 요소를 선택한다는 점입니다(웹사이트 페이지에 동일한 id를 가진 요소가 더 이상 있으면 안 되며, 그렇지 않으면 충돌이 발생합니다).

요소에 class와 id 중 무엇을 주어야 할지 어떻게 알 수 있을까요? 클래스는 웹사이트 페이지에서 반복되는 요소에 주어집니다(동일한 CSS 코드를 여러 번 작성하지 않도록). 현재 해당 요소가 하나뿐이더라도 유사한 요소가 나중에 나타날 수 있다고 느낀다면 해당 요소에 클래스를 주세요. 해당 요소가 고유하다고 확신한다면 id를 주세요. 비록 현재는 모든 요소에 클래스를 주고 id는 JavaScript용으로 남겨두는 경향이 있지만, 이는 보편적으로 받아들여지지는 않습니다.

요소에 여러 클래스를 지정할 수 있으며, 이 경우 클래스는 공백으로 구분하여 나열해야 합니다.

클래스 이름은 영문자, 숫자로 이루어져야 하며 공백이 없어야 합니다(공백은 클래스를 서로 구분하며, 대신 밑줄이나 하이픈을 사용할 수 있습니다). 클래스는 숫자로 시작해서는 안 됩니다 (HTML5에서는 이미 가능하지만 오래된 브라우저에서는 작동하지 않을 것입니다).

클래스 이름은 영어로 지정해야 합니다(러시아어가 아니라 단순히 영문자로 쓰는 것이 아닙니다!). 이름은 의미가 있어야 하며 클래스의 본질을 반영해야 합니다.

예제

test 클래스를 가진 모든 단락에 빨간색 텍스트 색상을 지정해 봅시다:

<p class="test">클래스 test가 있는 단락.</p>
<p>클래스 없는 대조 단락.</p>

.test {
	color: red;
}

예제 . 요소에 여러 클래스 지정

여기서는 첫 번째 단락에 여러 클래스 - test1와 test2(공백으로 구분하여 작성)를 지정해 봅시다. test1 클래스는 빨간색 텍스트 색상을 지정하고, test2 클래스는 20px의 글꼴 크기를 지정합니다. 두 번째 단락에는 test1 클래스만 주어집니다(이 단락은 빨간색이 됩니다). 세 번째 단락에는 test2 클래스가 주어집니다(이 단락은 글꼴 크기가 20px가 됩니다). 두 클래스를 가진 첫 번째 단락은 동시에 빨간색과 20px 글꼴 크기를 모두 갖게 됩니다:

<p class="test1 test2">test1과 test2 두 클래스가 있는 단락.</p>
<p class="test1">test1 클래스가 있는 단락.</p>
<p class="test2">test2 클래스가 있는 단락.</p>
<p>클래스 없는 대조 단락.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

참고 항목

요소에 고유 식별자를 지정하는
id 속성