[프론트엔드][CSS3] 5. text 관련 스타일

line-height

: 줄간격 (글자크기+주고싶은 여백의 크기px)

 

단위 - px, em, % 등

 

비교를 위해 두개의 <div> 중 한 개에만 class='this'를 부여했다.

 

적용하지 않은 <div>에는 글자가 상단에 붙어있지만,

 

 <div class="this">에 line-height를 높이(height) 값만큼 부여했더니

상하로 여백이 동일하게 분배되어서 가운데에 글자가 위치해 있는 것을 확인해볼 수 있다.

 

 

 

text-indent

- 들여쓰기 (값이 양수인 경우)

 

두 개의 <p>를 놓고 비교를 해보았다.

 

200px 만큼의 들여쓰기를 적용시킨 것이다.

(px 이외에도 숫자em, 숫자% 등과 같은 형태로도 값을 적용시킬 수 있다.)

 

 

- 내어쓰기 (값이 음수일 경우) 

 

 

내어쓰기의 경우를 확인하기 위해 전체스타일에 margin을 이용해 바깥 여백을 만들어 주었다.

 

'적용하지 않음' 보다 앞으로 내어쓰기가 된 것을 확인할 수 있다.

 

 

 

text-align

: 텍스트나 이미지 수평 정렬

 

- center, left, right, justify

 

 

 

text-decoration

: 줄 긋기 (상속되지 않음)

 

 

 

태그는 기본값으로 밑줄이 적용되어서 출력되어진다.

그 밑줄을 text-decoration : none; 을 이용해 제거할 수 있다.

 

 

 

letter-spacing

: 자간 (글자와 글자 사이의 간격)

 

 

 

text-transform

: 영문자 변환

 

- capitalize : 첫글자만 대문자로

- uppercase : 모두 대문자로

- lowercase : 모두 소문자로

- none : 적용X