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
글 더보기
아뿔싸! AWS 비용이 청구되었습니다(EC2 인스턴스 해지/삭제하기)
g++ 컴파일을 위한 mingw-w64 패키지 설치하기
파이썬 f-string 오류 해결하기 ‘f-string: empty expression not allowed’
파이썬 모듈 import 실패할 때 간단한 해결 방법
cron expressions (크론 표현식) 초간단 정리
git push 안되는 문제 드디어 해결!