HTML에서 하나의 요소에 두 개 이상의 CSS 클래스를 적용하려면 class 속성을 사용하면 됩니다. 이때 여러 클래스 이름을 공백으로 구분하여 나열하기만 하면 되며, 별도의 특수한 문법은 필요하지 않습니다.
기본 문법
class 속성 값에 클래스 이름을 나열할 때는 각 클래스 사이를 반드시 공백으로 구분해야 합니다. 예를 들어 class="myClass1 myClass2"처럼 작성하면 해당 요소에 두 클래스가 모두 적용됩니다.
예제
다음 코드를 직접 실행해 보면 HTML 요소에 여러 개의 CSS 클래스를 적용하는 방법을 쉽게 이해할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2.myClass1 {
background-color: black
}
.myClass2 {
color: red;
}
</style>
</head>
<body>
<h2 class = "myClass1 myClass2">Tutorialspoint</h2>
<h3>Simply Easy Learning</h3>
</body>
</html>코드 설명
위 예제에서 h2.myClass1 선택자는 myClass1 클래스를 가진 h2 요소에 검은색 배경을 지정하고, .myClass2 선택자는 해당 클래스를 가진 모든 요소의 글자 색을 빨간색으로 지정합니다. 결과적으로 h2 요소에는 두 클래스가 동시에 적용되어 검은 배경 위에 빨간색 텍스트가 표시됩니다.
정리
하나의 요소에 여러 CSS 클래스를 조합하면 스타일을 모듈화하여 재사용성을 높일 수 있습니다. 공통 스타일과 개별 스타일을 클래스 단위로 분리해 관리하면 코드 유지보수가 훨씬 간편해집니다.