[html/css] text-transform 속성 (대문자 전환)

 

 

[html/css] text-transform 속성 (대문자 전환)

 

 

text-transform 속성은, 문자를 대문자로 전환하는 속성입니다.

 

 

none 기본값으로,  텍스트를 html 코드에 있는  그대로 읽음

 

capitalize 각 단어의 첫번째 문자를 대문자로 만듦(예: Seoul National Univ.)

 

uppercase 모든 문자를 대문자로 바꿈 (예: SEOUL NATIONAL UNIV.)

 

lowercase 모든 문자를 소문자로 바꿈 (예: seoul national univ.)

 

 

상속 여부: yes

 

 

 

▶ html/css 작성 예

 

html

<h4>text-transform : none</h4> <p id="no">Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p> <h4>text-transform : capitalize</h4> <p id="cap">Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>   <h4>text-transform : uppercase</h4> <p id="upper">Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>   <h4>text-transform : lowercase</h4> <p id="lower">Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>

 

 

 

css

#no{text-transform : none;} #cap{text-transform : capitalize;} #upper{text-transform : uppercase;} #lower{text-transform : lowercase;}

 

 

▶ 실행 화면입니다.

 

 

 

한글도 이 속성값을 적용시켜보았는데, 변화가 없네요. ^^

 

오늘은 대문자 변환하는  text-transform 속성을 알아 보았습니다.

 

 

 

  

text-indent 속성(들여쓰기)

 

글자 간격 지정 속성 letter-spacing

 

text-decoration 속성(none, underline, overline, line-through)

 

vertical-align 속성 자세히 알기(수직 정렬)

 

[html/css] line-height 속성 배우기