코드의 반복을 피하기 위해 HTML과 CSS에서 여러 클래스를 사용합니다. CSS를 사용하면 두 클래스를 함께 정의하고 스타일을 지정할 수 있으며 서로 다른 클래스 ID를 할당하여 하나의 요소에서 여러 클래스를 사용할 수 있습니다. 이 접근 방식은 공백으로 구분된 구문을 사용하여 하나의 HTML 요소에 여러 클래스를 추가할 수 있습니다.
이 기사에서는 하나의 요소에 여러 클래스를 추가하는 방법을 배웁니다.
CSS에서 여러 클래스를 사용하는 방법?
하나의 요소에서 두 개 이상의 클래스를 사용하려면 각 클래스 ID를 공백으로 구분합니다.
하나의 요소에서 여러 클래스를 사용하려면 다음 구문을 따라야 합니다.
< h1 클래스 = 'class_1 class_2 class_3' > 건네주는... 시간 >
단일 HTML 요소에서 공백으로 구분하여 둘 이상의 클래스를 포함할 수 있습니다. 귀하의 편의를 위해 여기에 예가 있습니다.
예: CSS에서 여러 클래스 사용
아래 예에서는 다음을 생성합니다.
-
태그를 사용하는 제목과 클래스 이름 ' 표제 '.
- 다음으로 다른 제목을 만들어 두 개의 다른 클래스에 할당합니다. 표제 ' 그리고 ' 선 '. 이러한 클래스 ID는 공백으로 구분됩니다.
HTML
h1 >
< h1 수업 = '헤딩 라인' >
여러 클래스 안에 하나의 요소
h1 >
이제 CSS 파일로 이동하여 아래 나열된 CSS 속성을 적용해 보겠습니다.
- rgb() 함수를 ' (69, 51, 151) '.
- 글꼴 스타일 설정 ' 이탤릭체 '라는 제목으로.
HTML 클래스에서 첫 번째 제목은 ' 표제 '. 따라서 지정된 클래스에 지정된 스타일은 첫 번째 제목에 구현됩니다.
.표제 {
배경색: rgb ( 69 , 51 , 151 ) ;
글꼴 스타일:기울임꼴
}
'를 위해 선 ” 클래스에는 다음이 있습니다.
- rgb() 함수를 사용하여 제목의 색상을 ' (255, 0, 0) '.
- text-decoration-line을 다음과 같이 적용합니다. 밑줄 '.
두 번째 제목은 두 클래스의 스타일을 모두 활용합니다. 표제 ' 그리고 ' 선 ' 수업:
.선 {색상: RGB ( 255 , 0 , 0 ) ;
텍스트 장식 라인:밑줄;
}
구현 후 결과를 확인하십시오.
출력에서 두 번째 제목이 두 CSS 클래스를 모두 사용하는 것을 볼 수 있습니다.
결론
단일 요소에서 여러 클래스를 사용하려면 공백으로 구분된 다른 클래스 ID를 사용하십시오. 이를 사용하여 한 번에 다른 CSS 속성을 적용할 수 있습니다. 유사한 요소가 존재하는 클래스를 재사용할 수 있습니다. 이 문서에서는 단일 요소에서 여러 클래스를 사용하고 예제와 함께 스타일을 지정하는 방법을 설명했습니다.