티스토리 뷰

[개발]프로그래밍/css3

[css3] text-transform - 텍스트 대·소문자 변환

좋은 블로그 2021. 3. 30. 09:03
1. 개념
text-transform - 텍스트 대·소문자 변환
text-transform는 영문자를 표기할 때 텍스트의 대·소문자를 원하는대로 바꿔주는 속성

속성

설명

none

변환하지 않음

capitalize

시작하는 첫 글자를 대문자로 변환

uppercase

모든 글자를 대문자로 변환

lowercase

모든 글자를 소문자로 변환

full-width

가능한 모든 문자를 전각 문자로 변환
2. 태그
text-transform
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' text-transform : capitalize ;' >
keyboard
</div>
2
<div style =' text-transform : uppercase ;' >
keyboard
</div>
3
<div style =' text-transform : lowercase ;' >
KeyBoarD
</div>
</body>
</html>
결과 화면
코드 설명
1
text-transform : capitalize ;
capitalize은 영문자로 시작하는 텍스트의 맨 앞에 있는 첫번째 글자를 대문자로 변환해 줍니다.
위에서 보시는 것처럼 앞에 K만 대문자로 변환된 것을 확인하실 수 있습니다.
2
text-transform : uppercase ;
uppercase는 모든 글자를 대문자로 변환해 줍니다.
위에서 보시면 소문자로 입력한 keyboard가 모두 KEYBOARD로 변환된 것을 확인하실 수 있습니다.
3
text-transform : lowercase ;
lowercase는 모든 글자를 소문자로 변환해 줍니다.
위에서 보시면 입력한 글자 중 K,B,D를 대문자로 입력하였는데 모두 소문자로 변환된 것을 확인하실 수 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] white-space - 공백 처리  (0) 2021.04.01
[css3] text-shadow - 텍스트에 그림자 효과  (0) 2021.03.31
[css3] text-decoration - 텍스트에 줄 표시  (0) 2021.03.29
[css3] color - 글자 색 지정  (0) 2021.03.26
[css3] font - 글꼴 속성 한꺼번에 표현  (0) 2021.03.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday