CSS로 텍스트를 전부 대문자로 바꾸는 방법: 단계별 완벽 가이드

CSS의 text-transform: uppercase 속성은 텍스트 요소의 내용을 모두 대문자로 표시합니다. 이 속성 하나로 텍스트를 소문자나 제목 대소문자(title case)로도 변환할 수 있으며, 문단, 제목 등 어떤 텍스트 요소에든 적용할 수 있습니다.

웹사이트를 개발하다 보면 CSS 속성을 사용해 텍스트의 대소문자를 조정해야 하는 경우가 종종 있습니다. 이 글에서는 그 방법 중 두 가지, 즉 text-transform과 font-variant를 사용하는 방법을 살펴보겠습니다.

CSS로 텍스트를 대문자로 변환하기

CSS의 text-transform 속성을 사용하면 텍스트 요소의 내용을 모두 대문자로 변경할 수 있습니다. 이 속성은 웹 페이지에서 텍스트가 어떻게 대소문자화될지 결정하며, 반대로 텍스트를 모두 소문자로 설정하는 데에도 활용할 수 있습니다.

텍스트 블록 전체를 대문자로 만들려면 CSS 선택자에 다음과 같이 작성합니다:

text-transform: uppercase;

text-transform 속성은 세 가지 값을 받을 수 있습니다:

그럼 text-transform 메서드가 실제로 동작하는 예시를 살펴보겠습니다.

"This page does not exist."라는 문장을 모두 대문자로 표시하는 웹 페이지를 만들어 보겠습니다.

물론 직접 모든 글자를 대문자로 입력하는 방법도 있습니다. 하지만 이 방식은 텍스트를 일일이 다시 작성해야 한다는 단점이 있습니다. 짧은 문장이라면 큰 문제가 없지만, 더 긴 문자열의 대소문자를 변경해야 한다면 점점 번거로워질 것입니다.

따라서 안전하게 text-transform 메서드를 사용해 보겠습니다.

먼저 텍스트와 text-transform 규칙이 포함된 HTML 문서를 정의합니다:

<html>
<head>
  <style>
    p {
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <p>this is in all caps</p>
</body>
</html>

선택된 텍스트의 모든 글자가 대문자로 표시됩니다.

먼저 <head> 태그를 정의하고, 그 안에 <style> 태그를 넣습니다. 이 스타일 태그를 통해 text-transform 규칙을 페이지에 추가합니다. 외부 CSS 스타일시트를 사용할 수도 있지만, 이 예제는 매우 짧기 때문에 굳이 필요하지 않습니다.

<body> 태그 안에서는 문단을 정의합니다. 문장을 소문자로 작성했음에도 불구하고 이 문단은 모두 대문자로 표시됩니다. text-transform 속성이 웹 페이지의 모든 <p> 태그에 적용되기 때문입니다.

제목 대소문자의 특징을 유지하면서도 소문자 형태를 함께 사용하고 싶다면 font-variant: small-caps를 활용할 수 있습니다. 제목 대소문자란 각 단어의 첫 글자가 대문자로 표시되는 문장 스타일을 말합니다.

다음은 font-variant 규칙이 실제로 적용된 예시입니다:

<head>
  <style>
    p {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p>this is in all caps</p>
</body>
</html>

text-transform 속성은 요소 안의 모든 텍스트를 대문자로 만들 수 있는 옵션을 제공합니다. font-variant 속성은 소문자 텍스트를 작은 대문자 형태(글자 높이는 소문자 크기)로 표시할 수 있는 옵션을 제공합니다.

이 두 규칙은 HTML에서 텍스트 서식을 지정할 때 활용할 수 있는 또 하나의 도구입니다.

HTML 코딩을 더 배우고 싶으신가요? HTML 학습 가이드를 참고해 보세요. 추천 강좌, 도서, 학습 자료는 물론 학습 여정을 이어가는 팁까지 확인할 수 있습니다.