text-transform 속성은 영어 대문자와 소문자를 서로 전환시킬 수 있는 속성입니다. 한글에는 쓰일 일이 없겠지만 영문에서는 종종 사용됩니다. 문장 전체를 소문자나 대문자로 바꾸는 방법과 단락의 첫 글자만 대문자를 바꿀 수도 있습니다. 그럼 샘플을 통해 어떻게 적용되는지 알아 보도록 하겠습니다.
▼ text-transform 속성에 값은 4가지가 있습니다. 영어 단어가 의미하는 대로 소문자와 대문자로 변경하는 속성값과 단어에서 첫 글자만 변경하는 capitalize 값이 있습니다.
l none : 기본값이며 원본 그대로 유지한다.
l capitalize : 단어의 첫 번째 문자를 대문자로 변경한다.
l uppercase : 적용한 모든 문자를 대문자로 바꾼다.
l lowercase : 적용한 모든 문자를 소문자로 바꾼다.
▼ 샘플 소스는 4가지 text-transform 속성에 값을 적용한 것입니다. 결과 화면을 보시면 좀더 쉽게 이해가 가실 겁니다.
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 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE HTML><html><head><meta charset="euc-kr"><title>CSS</title><style type="text/css"> body { background-color: #e7e7e7; font-size:14pt; width: 500px; } p { background-color: #d4d4f2; border-style: solid; border-width: 1px; padding: 5px; } .texttransform1{ text-transform: none; } .texttransform2{ text-transform: capitalize; } .texttransform3{ text-transform: uppercase; } .texttransform4{ text-transform: lowercase; }</style></head><body> <code>text-transform: none</code> <p class="texttransform1"> The current push to implement labor market</p> <code>text-transform: capitalize</code> <p class="texttransform2"> The current push to implement labor market</p> <code>text-transform: uppercase</code> <p class="texttransform3"> The current push to implement labor market</p> <code>text-transform: lowercase</code> <p class="texttransform4"> The current push to implement labor market</p></body></html> |
Posted by 녹두장군