CSS 클래스 이름에 공백이 있을 때 이렇게 하세요

CSS작업을 할 때 클래스 이름에 공백이 있으면 어떻게 입력해야 할까요? 워드프레스 커스터마이징을 하면서 알아낸 소소한 팁을 공유합니다.
제 경우 갤러리형 이미지 아래에 여백을 추가하려고 하는 상황이었습니다. 개발자 모드로 클래스명을 가지고 왔는데요. 그 이름이…

“wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex”

…? 이게 클래스 이름이었습니다. 제가 본 것 중 제일 길고 현란한 클래스였습니다. 뿐만 아니라,

“wp-block-gallery🤍has-nested-images💛columns-default💚is-cropped💙wp-block-gallery-1💜is-layout-flex🧡wp-block-gallery-is-layout-flex”

중간에 공백이 6개나 있었습니다. (하트 표시한 부분)
이렇게 공백이 포함된 클래스를 어떻게 다뤄야 하는지 알아봅시다. 이 클래스명을 CSS로 입력하려면 어떻게 해야 할까요?

해결 방법

CSS에서 클래스명을 표현할 때 공백이 있다면, 해당 공백을 온점(.) 으로 대체하여 표기합니다.

예를 들어서 특정 클래스에 마진값을 넣기 위해서

.(클래스명){margin-top:2em;margin-bottom:2em;}

이런 코드를 넣어주자고 가정합니다. (코드 하이라이트 없어서 죄송…)

위에서 보여드린 공백 6개를 포함한 길~~다란 클래스 이름을 그대로 넣어주게 되면,

.wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex{margin-top:2em;margin-bottom:2em;}

이렇게 되는데, 이렇게 되면 클래스명이 제대로 인식되지 않습니다. 따라서 코드가 작동하지 않습니다. 공백을 온점으로 대체해줘야 합니다.

.wp-block-gallery.has-nested-images.columns-default.is-cropped.wp-block-gallery-1.is-layout-flex.wp-block-gallery-is-layout-flex{margin-top:2em;margin-bottom:2em;}

클래스명의 띄어쓰기 부분을 . 으로 대체하였습니다. 이렇게 하면 코드가 정상 작동합니다.

<클래스명>
wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex

<CSS 입력시>
.wp-block-gallery.has-nested-images.columns-default.is-cropped.wp-block-gallery-1.is-layout-flex.wp-block-gallery-is-layout-flex