CSS의 한 요소에서 여러 클래스를 사용하는 방법

Cssui Han Yoso Eseo Yeoleo Keullaeseuleul Sayonghaneun Bangbeob



코드의 반복을 피하기 위해 HTML과 CSS에서 여러 클래스를 사용합니다. CSS를 사용하면 두 클래스를 함께 정의하고 스타일을 지정할 수 있으며 서로 다른 클래스 ID를 할당하여 하나의 요소에서 여러 클래스를 사용할 수 있습니다. 이 접근 방식은 공백으로 구분된 구문을 사용하여 하나의 HTML 요소에 여러 클래스를 추가할 수 있습니다.

이 기사에서는 하나의 요소에 여러 클래스를 추가하는 방법을 배웁니다.







CSS에서 여러 클래스를 사용하는 방법?

하나의 요소에서 두 개 이상의 클래스를 사용하려면 각 클래스 ID를 공백으로 구분합니다.



하나의 요소에서 여러 클래스를 사용하려면 다음 구문을 따라야 합니다.



< h1 클래스 = 'class_1 class_2 class_3' > 건네주는... 시간 >





단일 HTML 요소에서 공백으로 구분하여 둘 이상의 클래스를 포함할 수 있습니다. 귀하의 편의를 위해 여기에 예가 있습니다.

예: CSS에서 여러 클래스 사용



아래 예에서는 다음을 생성합니다.

  • 태그를 사용하는 제목과 클래스 이름 ' 표제 '.

  • 다음으로 다른 제목을 만들어 두 개의 다른 클래스에 할당합니다. 표제 ' 그리고 ' '. 이러한 클래스 ID는 공백으로 구분됩니다.
< h1 수업 = '표제' >
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 속성을 적용할 수 있습니다. 유사한 요소가 존재하는 클래스를 재사용할 수 있습니다. 이 문서에서는 단일 요소에서 여러 클래스를 사용하고 예제와 함께 스타일을 지정하는 방법을 설명했습니다.