CSS 의 text 속성값

안녕하세요~

이번에는 문서의 글자속성중 text 속성을 알아볼까요

TEXT 속성

font 속성과 같이 글자를 꾸며주는 역할을 합니다만

font가 문서내 글자 자체의 색상이나 크기변화 등 글자를

직접적으로 꾸며준다고 보면 text는 문서내 글자의 위치나 상태등

을 나타내게 됩니다.

html문서를 수평으로 정렬할때 사용하던것이 align속성이었죠

html5에서는 문서를 꾸며주는 속성을 css에서 담당합니다.

첫번째로 위치를 지정하는 속성이 text-align 입니다.

정렬방식으로 : left, right, center, justify 가 있습니다.

보여지는 결과물 입니다.

왼쪽입니다

중앙입니다

오른쪽입니다.

html

 <div class="box">

  <p id="left">왼쪽입니다</p>

  <br /><p></p>

  <p id="center">중앙입니다</p>

  <br /><p></p>

  <p id="right">오른쪽입니다</p>

  <br /><p></p>

 </div>

css

  .box{border:1px solid #BCE55C;}

  #left{color:blue; text-align:left;}

  #center{color:red; text-align:center;}

  #right{color:green; text-align:right;}

두번째로는 글자 문장을 장식하는  text-decoration 속성입니다.

기본값은 none이며,  

- underline(아래 줄), 

- overline,(위에 줄) 

- line-through (사이 줄) 등이 있습니다.

보여지는 결과물입니다.

underline입니다.

overline입니다.

line-through입니다.

underline과 overline이 둘다 들어갈수도 있습니다.

html

<div class="box">

<p id="un"> underline입니다.</p>

<p id="un"><br /></p>

<p id="ov"> overline입니다.</p>

<p id="ov"><br /></p>

<p id="lt"> line-through입니다.</p>

<br /><p></p>

<p id="unov">  underline과 overline이 둘다 들어갈수도 있습니다.

</p></div>

css

  #un{text-decoration:underline;}

  #ov{text-decoration:overline;}

  #lt{text-decoration:line-through;}

  #unov{text-decoration:underline overline;}

세번째로는 text-transform 속성으로 글자의 대소문자를 지정하는 속성입니다.

- capitalize (모든 첫글자 대문자), 

- uppercase(모든 글자 대문자), 

- lowercase(모든 글자 소문자)

capitalize가 적용된 결과물입니다.

hellow world hellow korea~!

html

<div id="cap"> hellow world hellow korea~! </div>

css

  

  #cap{text-transform:capitalize;}

네번째로는 단어와 문장의 자간 조절과 들여쓰기 속성입니다.

- text-indent:수치값 (선택된 요소의 문장 첫줄을 들여쓰기 지정)

- letter-spacing(글자 자간을 조정)

- word-apacing(단어의 간격을 조정)

속성을 적용 전과 적용후 결과물입니다.

 -- 전 --

우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세

-- 후 --

우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세 우리나라 만세

css 

  #main2{color:blue; text-indent:40px; letter-spacing:3px; word-spacing:10px;} 

   // 푸른색의글씨, 문장의첫줄은 40px 띠움, 글자가 3px 띠움, 단어간 10px 띠움  

  p#main2:first-letter{color:#000000; font-size:30px;}

  // id가 메인인 속성에 첫번재 글자 속성을 변화 

이상 text관련 속성을 알아봤습니다 ~