CSS / text-transform / 대문자로 또는 소문자로 바꾸는 속성

text-transform은 원본 문자열을 수정하지 않고 화면에 표시되는 글자의 대소문자를 바꾸는 CSS 속성입니다. 영문을 대문자로 보이게 하려면 uppercase, 소문자로 보이게 하려면 lowercase를 사용합니다. 한글 자체에는 대소문자 구분이 없지만, 한글 문장에 섞인 영문에는 효과가 적용됩니다.

주요 값과 적용 범위

기본값은 none이며 자식 요소에 상속됩니다. 부모에서 uppercase를 지정했다면 자식도 그 표시 규칙을 이어받습니다. 일부 자식만 원래 대소문자로 보이게 하려면 해당 요소에 text-transform: none을 지정합니다. inherit는 부모 값을 따르게 하고, initial은 이 속성의 초기값인 none으로 되돌립니다.

.label { text-transform: uppercase; }
.label .original-case { text-transform: none; }

대소문자 변환 외의 값도 있지만, 이 글에서는 영문 대소문자를 표시하는 네 가지 값을 다룹니다. 전체 값과 언어별 규칙은 MDN의 text-transform 설명에서 확인할 수 있습니다.

전체 예제: 같은 원문에 다른 값 적용하기

다음 코드를 text-transform.html로 저장해 브라우저에서 엽니다. 첫 네 줄에는 모두 같은 원문 hello WORLD가 들어 있으며, 각 줄의 CSS 값만 다릅니다. 외부 파일이나 라이브러리는 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>text-transform 비교</title>
  <style>
    body {
      margin: 0;
      color: #243449;
      background: #eef2f6;
      font-family: "Noto Sans KR", sans-serif;
      line-height: 1.7;
    }
    main { max-width: 760px; margin: 24px auto; padding: 0 20px; }
    h1 { font-size: 26px; }
    .row { padding: 12px 16px; margin: 12px 0; background: white; }
    .label { display: block; color: #52677d; font-size: 14px; }
    .value { font-size: 26px; overflow-wrap: anywhere; }
    .none { text-transform: none; }
    .upper { text-transform: uppercase; }
    .lower { text-transform: lowercase; }
    .capital { text-transform: capitalize; }
  </style>
</head>
<body>
  <main>
    <h1>대문자와 소문자 비교</h1>
    <p class="row"><span class="label">none</span>
      <span id="none" class="value none">hello WORLD</span></p>
    <p class="row"><span class="label">uppercase</span>
      <span id="upper" class="value upper">hello WORLD</span></p>
    <p class="row"><span class="label">lowercase</span>
      <span id="lower" class="value lower">hello WORLD</span></p>
    <p class="row"><span class="label">capitalize</span>
      <span id="capital" class="value capital">hello WORLD</span></p>
    <p class="row"><span class="label">한글과 영문 혼용</span>
      <span id="korean" class="value upper">한글 css</span></p>
    <p class="row"><span class="label">터키어의 uppercase</span>
      <span id="turkish" class="value upper" lang="tr">istanbul</span></p>
    <p class="row upper"><span class="label none">상속된 변환 해제</span>
      <span id="reset" class="value none">hello WORLD</span></p>
  </main>
</body>
</html>

첫 네 줄은 표의 예상 결과와 같아야 합니다. 한글 혼용 줄은 한글 CSS, 터키어 줄은 점이 있는 대문자 İ로 시작하는 İSTANBUL로 표시됩니다. 마지막 줄은 부모의 uppercase를 자식의 none으로 해제했으므로 원문 hello WORLD가 유지됩니다.

capitalize와 언어 설정의 주의점

capitalize를 영문 제목의 문법을 자동으로 교정하는 기능으로 사용하면 안 됩니다. 단어의 첫 글자를 대문자로 바꿀 뿐 관사·전치사의 예외나 고유명사 표기를 판단하지 않습니다. 예제에서 WORLD가 World로 바뀌지 않는 이유도 나머지 글자를 소문자로 만드는 기능이 없기 때문입니다.

대소문자 대응은 언어에 따라 달라질 수 있습니다. 터키어는 점이 있는 i와 점이 없는 ı를 구분하므로, 올바른 lang="tr" 설정이 변환에 영향을 줍니다. 예제의 터키어 요소에서 lang을 en으로 바꾸면 ISTANBUL로 표시되는 차이를 비교할 수 있습니다. 확인을 마치면 tr로 되돌리세요. 언어별 동작은 사용하는 브라우저와 필요한 언어 조합에서 확인하는 것이 좋습니다.

한글에는 대문자·소문자 변환이 없으므로 한글 자체의 모양은 그대로입니다. 영문 약어가 섞인 문장 전체에 lowercase를 지정하면 약어까지 소문자로 표시될 수 있습니다. 메뉴나 짧은 레이블처럼 변환이 필요한 범위에만 적용하세요.

원본 데이터 변환과 구분하기

CSS는 표시를 바꾸며 HTML에 작성한 원문을 다시 저장하지 않습니다. 예제의 upper 요소도 HTML 소스에는 hello WORLD가 남습니다. 요소의 textContent로 원문을 읽는 것과 화면 표시를 확인하는 것을 구분해야 합니다. 이 동작은 W3C CSS Text 명세의 text-transform 규칙에 정의되어 있습니다.

예를 들어 이메일 주소 입력란에 lowercase를 주는 것만으로 서버에 저장되는 문자열이 소문자로 정규화되었다고 판단하면 안 됩니다. 실제 데이터 변환이나 검증이 필요하면 해당 값의 처리 과정에서 별도로 구현해야 합니다. 또한 긴 본문을 전부 대문자로 표시하면 읽기 어려울 수 있으므로, 내용의 가독성과 정확한 표기를 우선해 사용합니다.