CSS text-transform 속성으로 텍스트 대문자 변환하기
웹 개발을 하다 보면 텍스트의 각 단어 첫 글자를 대문자로 표시해야 하는 경우가 자주 있습니다. 예를 들어 제목이나 이름을 표시할 때 'india'를 'India'처럼 보이게 하고 싶다면, CSS의 text-transform 속성에 capitalize 값을 사용하면 됩니다.
text-transform: capitalize는 HTML 소스 코드의 텍스트를 실제로 변경하는 것이 아니라, 화면에 렌더링될 때만 각 단어의 첫 글자를 대문자로 바꿔서 보여줍니다. 따라서 원본 데이터는 그대로 유지되므로 SEO나 데이터 처리에는 영향을 주지 않습니다.
기본 사용 예제
아래 코드는 p 태그에 인라인 스타일로 text-transform: capitalize를 적용한 예제입니다.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
india
</p>
</body>
</html>
위 코드를 실행하면 'india'라는 텍스트가 화면에는 'India'로 표시되는 것을 확인할 수 있습니다.
text-transform의 다양한 값
capitalize 외에도 text-transform 속성은 다음과 같은 값들을 지원합니다.
- uppercase – 모든 글자를 대문자로 변환합니다.
- lowercase – 모든 글자를 소문자로 변환합니다.
- none – 변환을 적용하지 않습니다.
인라인 스타일 대신 별도의 CSS 클래스를 정의해서 사용하면 코드 관리가 더욱 편리하니, 여러 요소에 반복적으로 적용할 경우 클래스 방식을 활용해 보시기 바랍니다.