텍스트 속성

들여쓰기와 수평정렬

텍스트 들여쓰기

text-indent

인라인요소에는 사용할수없으며, 블록요소에만 사용 가능하다

p { text-indent : 4em;}

h1 { text-indent :- 4em;}

음수값을 사용할때 주의할점은 첫단어들이 브라우저 창의 좌측경계에 의해 잘릴수도 있다는것이다.

이럴경우 음수 마진을 받아들이도록 마진이나 약간의 패딩을 함께 사용하면된다.

h1 { text-indent : -4em; padding-left : 4em;}

퍼센트 값을 포함해 모든 길이단위를 text-indent에 사용할 수 있다.

text-align

마찬가지로 블록 레벨 요소에만 사용 가능하다

left : 왼쪽정렬

right : 오른쪽 정렬

center : 중앙 정렬

text-align : center;가 <center>태그와 똑같다고 생각하는 사람이있는데

<center>태그는 텍스트뿐만 아니라 테이블같은 요소도 중앙정렬시키고,

text-align은 오직 텍스트만 조정가능하며 특히 인라인요소에만 적용 가능하다.

justify : 수평정렬

텍스트의 각 행의 양쪽끝이 부모요소의 경계선에 위치하게되어 단어와 문자 사이 공간이 조절되어 각 행들의 길이가 같아진다.

하지만 브라우저에 따라 문자사이에 여백을 추가하기도하고 단어사이에만 별도의 여백을 추가하는등 표현방법이 다르기 때문에 주의해야한다.

어간 (단어 사이의 간격)

word-spacing

자간 (글자 사이의 간격)

letter-spacing

text-transform

uppercase : 대문자로 변경

lowercase : 소문자로 변경

capitalize : 각 단어의 첫 번째 문자만 대문자로 변환

text-decoration

underline : 밑줄을 추가한다

overline : 윗줄을 추가한다

line-through : 중간선을 추가한다

blink : 깜빡거리는 텍스트를 표현한다

text-decoration은 상속이 되지 않는다.

텍스트 그림자 설정

text-shadow

default : 그림자 효과 없음

길이를 두개또는 세개를 삽입하는데 처음 두 개의 길이 값은 텍스트와 그림자 사이의 결정하고,

옵션 값인 세번 째 길이 값은 그림자의 블러 반지름을 정의한다.

text-shadow : blue 5px 0.5em;

길이를 음수 값으로 설정하면, 그림자는 텍스트의 좌측과 상단 방향으로 나타나게 된다.

화이트스페이스 다루기

white-space

pre : whitespace를 무시하지 않고, 줄을 바꿀수있지만 자동으로 바뀌지 않는다.

nowrap : whitespace를 무시하고, 줄을 바꿀수 없으며 자동으로 바뀌지도 않는다.

pre-wrap : whitespace를 무시하지 않고, 줄을 바꿀수있으며 자동으로 바뀌기도 한다.

pre-line : whitespace를 무시하고, 줄을 바꿀수있으며, 자동으로 바뀌기까지한다.