스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기

 

환경: Eclipse Mars

 

text-transform 속성은 영어 대문자와 소문자를 서로 전환시킬 수 있는 속성입니다. 한글에는 쓰일 일이 없겠지만 영문에서는 종종 사용됩니다. 문장 전체를 소문자나 대문자로 바꾸는 방법과 단락의 첫 글자만 대문자를 바꿀 수도 있습니다. 그럼 샘플을 통해 어떻게 적용되는지 알아 보도록 하겠습니다.

 

text-transform 속성에 값은 4가지가 있습니다. 영어 단어가 의미하는 대로 소문자와 대문자로 변경하는 속성값과 단어에서 첫 글자만 변경하는 capitalize 값이 있습니다.

 

l  none : 기본값이며 원본 그대로 유지한다.

l  capitalize : 단어의 첫 번째 문자를 대문자로 변경한다.

l  uppercase : 적용한 모든 문자를 대문자로 바꾼다.

l  lowercase : 적용한 모든 문자를 소문자로 바꾼다.

 

샘플 소스는 4가지 text-transform 속성에 값을 적용한 것입니다. 결과 화면을 보시면 좀더 쉽게 이해가 가실 겁니다.

<!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 녹두장군