[CSS] 다중 선택자(Multi Class), 띄어쓰기 형태로 나열된 클래스명

웹 페이지의 소스를 분석하다 보면 종종 class에 띄어쓰기 형태로 여러 개의 class명이 나열되어 있는 것을 볼 수 있을 거에요.

 

무슨 말이냐면 이런 거죠.

 

<div class=" className1 className2 className3">붕가붕가</div>

 

위 예제를 보면 class에 단 하나의 class 이름만 있는 것이 아니라 className1 뒤에 띄어쓰기 형태로 뭔가가 더 주렁주렁 붙어 있는 것이 보이실 거에요.

 

저도 CSS를 처음 공부할 때 이게 뭔가 싶어서 한참을 고민하고 헤멧던 기억이 나네요. ㅎㅎ

 

다른 초보님들도 이런 거 만나면 참 난감하실 거라 생각되네요.

 

저 역시 전문적으로 프로그래밍을 해서 밥 벌어 먹고 사는 사람이 아니다 보니 지금은 이게 뭔지 알았다고 하더라도 시간이 지나면 자꾸 까먹게 되더라고요.

 

머리가 돌이라서 그런지 자주 사용하는 게 아니다 보니 자꾸 까먹고 다시 공부하고 또 까먹기를 반복하고 있답니다. ㅠㅠ

 

각설하고... 자, 그럼 이런 것을 뭐라 하냐면 다중 선택자( Multi Class)라고 부른다고 하네요.

 

동일 엘리먼트에 여러 개의 선택자(id, class)를 동시에 적용하기 위해 사용한다고 하는데요.

 

근데 이게 정말 편리한 수단이긴 한데 IE6에서는 버그가 되어 문제가 발생한다고 하네요.

 

특징을 살펴보면 다음과 같습니다.

 

1. 3개 이상의 선택자 사용이 가능하다.

2. 클래스 내의 속성이 겹칠 경우 가장 뒤쪽에 선언된 클래스 속성이 적용된다. (덮어쓰기) 단, 속성에 !important가 포함되어 있을 경우 해당 속성이 우선시 된다.

 

또 다른 적용 예..

 

<div id=" idName" class=" className1">뿌잉뿌잉</div>

 

음.. 그런데 어디서 봤더라..

 

제가 전에 공부할 때 어디선가 id와 class를 위 예시처럼 동시에 사용하지 말라고 그랬던 것 같은데...

 

암튼... IE11에선 위 예시처럼 적용해도 정상적으로 표시되네요.