HTML5+CSS3 - 텍스트 스타일

direction 속성

텍스트의 쓰기 방향을 지정한다.

direction:속성값;

속성값

 - ltr : 기본값. 왼쪽에서 오른쪽으로 텍스트 표시.

 - rtl : 오른쪽에서 왼쪽으로 텍스트 표시.

text-align 속성 - 텍스트 정렬하기

문단의 텍스트 정렬방법을 지정한다.

text-align:속성값;

속성값

 - left : 왼쪽

 - right : 오른쪽

 - center : 가운데

 - justify : 양쪽정렬

text-shadow 속성 - 텍스트에 그림자 효과 추가하기

텍스트에 그림자 효과를 추가한다.

값은 px을 사용한다.

콤마를 사용하여 다수 값을 지정하면, 여러개의 그림자도 사용 가능하다.

text-shadow: h-shadow값 v-shadow값 blur값 color값;

속성값

 - h-shadow : 그림자의 가로 옵셋 거리. 양수는 오른쪽, 음수는 왼쪽.

 - v-shadow : 그림자의 세로 옵셋 거리. 양수는 아래쪽, 음수는 위쪽.

 - blur : 그림자의 번짐 정도. 생략하면 선명.

 - color : 그림자 색상. 16진수, rgb, 색상이름표기로 입력.  (#RGB)

text-overflow 속성 - 넘치는 텍스트 표기하기

박스모델 요소 안에 텍스트를 표시할 때, 잘려버린 텍스트에 대한 표시 여부를 지정한다.

text-overflow:속성값;

속성값

 - clip : 넘치는 텍스트를 자른다.

 - ellipsis : 텍스트가 잘렸다는 의미로 "..."을 표시한다.

text-decoration 속성 - 텍스트에 줄 표시하기

텍스트에 밑줄이나 가로지르는 줄을 표시한다.

밑줄 없앨 때도 사용한다.

text-decoration:속성값;

속성값

 - none : 밑줄을 표시하지 않는다.

 - underline : 밑줄을 표시한다.

 - overline : 영역 위로 선을 그린다.

 - line-through : 영역을 가로지르는 선을 그린다.

text-indent 속성 - 텍스트 들여쓰기

문단의 첫 글자를 얼마나 들여쓸지 지정한다.

사용할 수 있는 값은 크기값이나 백분율이다.

text-indent:10px;

text-transform 속성 - 텍스트 대소문자 변환하기

영문자에만 적용된다.

text-transform:속성값;

속성값

 - capitalize : 시작하는 첫 번째 글자를 대문자로 변환.

 - uppercase : 모든 글자를 대문자로 변환.

 - lowercase : 모든 글자를 소문자로 변환.

 - none : 변환하지 않는다.

letter-spacing과 word-spacing 속성 - 텍스트 간격 조절하기

letter-spacing은 글자 사이의 간격, word-spacing은 단어 사이의 간격을 조절한다.

normal과 크기값으로 지정 가능.

letter-spacing:속성값;

word-spacing:속성값;

line-height 속성 - 줄간격 조절하기

숫자나 단위가 붙은 크기값, 백분율을 속성값으로 사용한다.

값을 사용할 경우 글자크기를 기준으로 계산한다.

line-height:속성값;

white-space 속성

텍스트에 함께 입력된 공백을 어떻게 처리할지 지정한다.

white-space:속성값;

속성값

 - normal : 기본값. 연속하는 공백을 하나로 처리.

 - nowrap : 연속하는 공백을 하나로 처리하고 줄바꿈을 하지 않는다.

 - pre : 원본 그대로 표시. 연속하는 공백 그대로 표시하고, 줄바꿈도 함.

 - pre-line : 연속하는 공백을 하나로 처리하고, 줄바꿈을 한다.

 - pre-wrap : 연속하는 공백을 그대로 표시하고 줄바꿈을 한다.