HTML DOM Style textTransform 속성 – 문법과 사용 예제 총정리

개요

DOM의 style.textTransform 속성은 HTML 문서에서 특정 요소의 텍스트에 적용된 문자 변형 값을 반환하거나, 새로운 변형을 설정하는 데 사용됩니다. JavaScript만으로도 텍스트를 전체 대문자, 전체 소문자 또는 단어별 첫 글자 대문자 형태로 손쉽게 바꿀 수 있어 UI 개발 시 매우 유용하게 활용됩니다.

문법(Syntax)

textTransform 속성의 기본 문법은 다음과 같습니다.

1. 값 가져오기(Return)

object.style.textTransform

2. 값 설정하기(Set)

object.style.textTransform = "value"

속성 값(Value)

textTransform 속성에 지정할 수 있는 값은 다음 표와 같습니다.

값	설명
inherit	부모 요소로부터 해당 속성값을 상속받습니다.
initial	해당 속성을 기본값으로 초기화합니다.
none	텍스트에 어떠한 변형도 적용하지 않습니다.
uppercase	모든 문자를 대문자로 변환합니다.
lowercase	모든 문자를 소문자로 변환합니다.
capitalize	각 단어의 첫 글자만 대문자로 변환합니다.

예제(Example)

다음 예제를 통해 style textTransform 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다. 버튼을 클릭하면 문단(p) 요소의 텍스트가 대문자로 변환됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
       color: #000;
       background: lightblue;
       height: 100vh;
    }
    p {
       margin: 1.5rem auto;
    }
    .btn {
       background: #db133a;
       border: none;
       height: 2rem;
       border-radius: 2px;
       width: 40%;
       display: block;
       color: #fff;
       outline: none;
       cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style textTransform Property Example</h1>
<p>Hi! I'm a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Change textTransform</button>
<script>
    function add() {
       document.querySelector('p').style.textTransform = "uppercase";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Style textTransform 속성 – 문법과 사용 예제 총정리

"Change textTransform" 버튼을 클릭하면 문단 텍스트에 대문자(uppercase) 변환이 즉시 적용되는 것을 확인할 수 있습니다.

HTML DOM Style textTransform 속성 – 문법과 사용 예제 총정리

참고로 textTransform 속성은 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 폭넓게 지원되므로 호환성 걱정 없이 안심하고 사용할 수 있습니다.