CSS로 텍스트의 첫 글자를 대문자로 바꾸는 방법

CSS를 사용해 단어의 첫 글자를 대문자로 바꾸려면 first-letter 선택자를 활용하면 됩니다.

예를 들어, 모든 글자가 소문자로 작성된 제목이 있다고 가정해 보겠습니다:

<h2>this is a lowercase heading</h2>

여기서 "this"의 첫 글자인 t를 대문자로 바꾸고 싶다면, CSS 스타일시트에서 h2 요소에 first-letter 선택자를 연결해 주기만 하면 됩니다:

h2:first-letter {
  text-transform: capitalize;
}

:first-letter는 블록 레벨 요소의 첫 번째 글자에만 스타일을 적용하는 가상 요소(pseudo-element)입니다. 여기에 text-transform: capitalize; 속성을 함께 사용하면 해당 글자가 자동으로 대문자로 변환됩니다.

물론 first-letter 선택자는 클래스 속성에도 동일하게 적용할 수 있습니다:

.name-of-class:first-letter {
  text-transform: capitalize;
}

참고로 모든 글자를 대문자로 바꾸고 싶다면 text-transform: uppercase;를 사용하고, 각 단어의 첫 글자만 대문자로 만들려면 text-transform: capitalize;를 사용하면 됩니다. 상황에 맞게 선택자와 속성을 조합해 활용해 보세요.