[CSS] CSS text 속성
CSS 텍스트
CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같습니다.
- color
- direction
- letter-spacing
- word-spacing
- text-indent
- text-align
- text-decoration
- text-transform
- line-height
- text-shadow
color 속성
color 속성은 텍스트의 색상을 설정합니다. 웹 페이지에서 텍스트의 기본 색상은 검정색입니다. <body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body>태그에 명시된 속성값보다 우선 적용됩니다.
<style>
body { color : red; }
p { color : maroon; }
</style>direction 속성
direction 속성은 텍스트가 써지는 방향을 설정합니다. 웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써집니다. direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써집니다. 하지만, direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써집니다.
<style>
.rightToLeft { direction : rtl; }
</style>letter-spacing 속성
letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정합니다.
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>word-spacing 속성
word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정합니다. letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정합니다.
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>text-indent 속성
text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다. 웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.
<style>
.paraIndent { text-indent: 30px; }
</style>text-align 속성
text-align 속성은 텍스트의 수평 방향 정렬을 설정합니다. text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용됩니다.
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>text-decoration 속성
text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>text-transform 속성
text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정합니다. 이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 줍니다. 또한, 단어의 첫 문자만을 대문자로 변경시킬 수도 있습니다.
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>line-height 속성
line-height 속성은 텍스트의 줄 간격을 설정합니다.
<style>
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
</style>text-shadow 속성
text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정합니다.
<style>
h2 { text-shadow: 2px 1px #3399CC; }
</style>