오늘 배웠습니다 - CSS의 문장 케이스

Unsplash의 표지 사진Patrick Tomasso

This post was originally published on my website.

CSS는 스타일 조작을 위한 놀라운 도구 세트를 제공하지만 텍스트 조작과 관련하여 추가 지원을 위해 JavaScript에 의존해야 하는 경우가 많습니다. 그러나 CSS에는 당신이 알지 못하는 많은 트릭이 있습니다.

짜증날 수 있는 한 가지는 백엔드 API(완전히 제어할 수 없음)가 예상과 다른 대소문자로 응답할 때입니다. 백엔드의 잘못이 아닐 수도 있습니다. 사용자가 해당 메시지를 제출하기 전에 caps lock을 끄는 것을 잊었을 수도 있습니다.

CSS에는 대소문자를 변경하는 두 가지 기본 옵션이 있습니다.

텍스트 변환: 소문자

텍스트 변환: 대문자

그러나 대소문자를 문장의 대소문자(첫 글자는 대문자, 나머지는 소문자)로 변경해야 하는 경우에는 어떻게 될까요?

CSS는 첫 글자를 대상으로 할 수 있는 pseudo selectors를 제공합니다.

.sentence-case {
  text-transform: lowercase;
}
.sentence-case::first-letter {
  text-transform: uppercase;
}

다음을 렌더링합니다.

<p>THIS TEXT IS ALL CAPITAL</p>
<p>this one is all lowercase</p>
<p>aNd THiS oNE iS MIXeD</p>

이것으로:

This text is all capital
This one is all lowercase
And this one is mixed

알아야 할 한 가지 중요한 사실은 first-letter 의사 선택기는 블록 요소(p, div, li 등)에서만 작동한다는 것입니다.

인라인 요소(예: span, b)에서 사용해야 하는 경우 display: inline-block 다음을 설정해야 합니다.

span.sentence-case {
  display: inline-block;
}