class로 여러 요소를 같은 그룹으로 묶어 재사용합니다.
class 값은 CSS와 JavaScript가 여러 요소를 공통으로 선택할 때 사용합니다. 한 요소가 여러 class를 가질 수 있고 같은 class는 문서 여러 곳에서 반복할 수 있습니다.
세 문단 모두 notice라서 같은 여백과 회색 왼쪽 선을 받고, 가운데 문단만 class 값에 important를 공백으로 덧붙였습니다. .notice.important처럼 점을 이어 쓴 선택자는 두 class를 모두 가진 요소만 고르므로 그 문단의 배경과 선 색만 노랗게 바뀝니다. 선 두께와 종류는 .notice에 적힌 3px solid가 그대로 남습니다.
class 값은 공백으로 나눈 이름 목록이라 순서는 의미가 없고 대소문자는 구분합니다. 스크립트에서는 element.classList의 add, remove, toggle로 이름을 하나씩 붙이거나 뗄 수 있어서, className 문자열 전체를 다시 쓰다 기존 class를 지워 버리는 실수를 피할 수 있습니다.
class 이름을 red, big처럼 현재 모양으로 지으면 디자인이 바뀔 때 의미가 어색해집니다. notice처럼 역할을 표현하세요.
직접 바꿔보세요notice 요소를 하나 더 만들고 important class도 함께 붙여보세요.