반응형
|
스타일 시트 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>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
|---|---|
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 (0) | 2019.03.17 |
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
