CSS 기초강좌 5 (Text 속성 활용하기)

CSS Text 속성

Text 속성은 문자나 단락의 조절과 관련된 속성들입니다.

 ＊ color : 텍스트의 색상을 설정

 ＊ direction : 텍스트 방향설정

 ＊ letter-spacing : 텍스트의 글자 사이의 간격을 증가 또는 감소

 ＊ line-height : 텍스트의 행 높이를 설정

 ＊ text-align : 텍스트의의 수평 정렬을 지정

 ＊ text-decoration : 텍스트 장식(언더라인 등)

  *  text-indent : 텍스트 블록의 첫 번째 줄의 들여 쓰기를 지정

  *  text-shadow: 텍스트에 그림자효과 설정

 ＊ text-transform : 대소 문자를 설정

  *  vertical-align : 수직 정렬을 설정 

 ＊ white-space : 공백 설정

 ＊ word-spacing : 단어 사이의 간격을 증가 또는 감소

---

text-align속성은 텍스트의 수평정렬을 설정하는데 사용됩니다. 

가운데(center), 왼쪽(left), 오른쪽(right), 양쪽맞춤(justify)가 있습니다.

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

text-decoration 속성은 텍스트의 장식을 설정하거나 제거하는데 사용되는데 주로 제거하는데 많이 사용합니다.

a {text-decoration:none;}

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

---

Example

<style> h1 {color:red;}
p.ct {text-align:center;}
p.ud {text-decoration:underline;}
p.up {text-transform:uppercase;}
p.low {text-transform:lowercase;}
p.cap{text-transform:capitalize;}
p.right {text-align:right;}
p.main {text-align:justify;}
p.shadow {text-shadow:3px 3px #c2c2b2;}
p.space {word-spacing:30px;}
p.lt_space {letter-spacing:-3px;}
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>

<h1>This is color:red</h1>
<p class="ct">This is text-align:center</p>
<p class="ud">This is text-decoration:underline</p>
<p class="up">this is text-transform:uppercase</p>
<p class="low">this is text-transform:lowercase</p>
<p class="cap">this is text-transform:capitalize</p>
<p class="right">This is text-align:right</p>
<p class="main">
This is text-align:justify.
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify
This is text-align:justify</p>
<p class="shadow"><b>This is shadow effect</b></p>
<p class="space">This is word-spacing 30px</p>
<p class="lt_space">This is letter-spacing -3px</p>
<p class="small">
This is a smaller line-height.<br />
This is a smaller line-height.<br />
This is a smaller line-height.<br />
This is a smaller line-height.<br />
</p>
<p class="big">
This is a bigger line-height.<br />
This is a bigger line-height.<br />
This is a bigger line-height.<br />
This is a bigger line-height.<br />
</p>

결과

This is color:red

This is text-align:center

This is text-decoration:underline

this is text-transform:uppercase

this is text-transform:lowercase

this is text-transform:capitalize

This is text-align:right

This is text-align:justify.This is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justifyThis is text-align:justify

This is shadow effect

This is word-spacing 30px

This is letter-spacing -3px

This is a smaller line-height.
This is a smaller line-height.
This is a smaller line-height.
This is a smaller line-height.

This is a bigger line-height.
This is a bigger line-height.
This is a bigger line-height.
This is a bigger line-height.