[CSS] 추가 클래스 - Multiple Class

https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes

Can a CSS class inherit one or more other classes?

 

https://velog.io/@sophia9901/CSS%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%83%81%EC%86%8DCascadingOverridingSelector

[CSS] 스타일 상속/Cascading/Overriding/Selector

 

추가 클래스를 사용하기 위해서는 해당 HTML 요소의 class 속성에 클래스 이름을 추가해야 합니다. 클래스 이름은 공백으로 구분된 문자열로 지정됩니다.

<div class="box">Content goes here</div>

위의 코드에서 "box" 라는 클래스가 div 태그에 추가되어 있습니다.

이제 CSS에서 .box 선택자를 사용하여 "box" 클래스를 스타일링 할 수 있습니다. 예를 들어, 다음과 같은 CSS 코드르르 작성할 수 있습니다. 

.box {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 10px;
}

위의 CSS 코드에서 ".box" 선택자는 'div' 요소의 'class' 속성 값이 "box" 인 요소를 선택합니다. 선택된 요소는 'background-color', 'border', 'padding' 등의 스타일 속성을 적용받습니다.

 

추가 클래스를 사용하면 한 요소에 여러 개의 클래스를 지정할 수 있습니다. 예를 들어, 다음과 같은 HTML 요소가 있다고 가정해 봅시다. 

 

<div class="box large">Content goes here</div>

위의 코드에서는 class 속성 값으로 "box"와 "large"라는 두 개의 클래스가 지정되어 있습니다. 이 경우 .box 선택자를 사용하여 "box" 클래스를 스타일링하고, .large 선택자를 사용하여 "large" 클래스를 스타일링할 수 있습니다. 

.box {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 10px;
}

.large {
  font-size: 24px;
}

 

위의 CSS 코드에서 '.box' 선택자는 'div' 요소의 'class' 속성 값이 'box' 인 요소를 선택하여 스타일을 적용하고, '.large' 선택자는 'class' 속성 값이 "large"인 요소를 선택하여 스타일을 적용합니다.

 

이렇게 함으로써 "box" 클래스와 "large" 클래스가 모두 적용된 'div' 요소에는 'background-color', 'border', 'padding', 'font-size', 등의 스타일 속성이 적용됩니다.