CSS text-transform 속성

text-transform 속성은 텍스트에서 대문자와 소문자를 지정하는 데 사용된다.

모든 항목을 대문자 또는 소문자로 변환하거나 각 단어의 첫 번째 문자를 대문자로 표시하는 데 사용할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<h1>text-transform 속성</h1>

<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

</body>
</html>

p.uppercase 요소에 text-transform 속성에 uppercase 값을 설정하면 모든 p 요소의 글자는 대문자로 변환하여 표시된다.

p.lowercase 요소에 text-transform 속성에 lowercase 값을 설정하면 모든 p 요소의 글자는 소문자로 변환하여 표시된다.

p.capitalize 요소에 text-transform 속성에 capitalize값을 설정하면 모든 p 요소의 글자는 글자의 첫글자를 대문자로 변환하여 표시된다.

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

지금까지 text-tranform 속성에 uppercase, lowercase, capitalize 값을 설정하는 예제와 개념을 살펴보았다.

모두 꼭 실습하기를 바랍니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS font-family (0)	2023.08.03
CSS text-shadow 속성 (0)	2023.08.02
CSS text spacing (0)	2023.07.31
CSS text-decoration 속성 (0)	2023.07.30
CSS Text alignment(글자 정렬) (0)	2023.07.29