[CSS] CSS 텍스트 속성

CSS 텍스트 속성

letter-spacing, word-spacing 속성

문자(letter)나 단어(word) 사이의 간격 지정.
letter-spacing : normal | <길이> ;
word-spacing : normal | <길이> ;

• normal => 기본 간격을 사용(글자 사이 추가 간격 없음, 단어 간격 : 0.25em)
• <길이> => 숫자로 간격 지정. 음수값을 갖는 경우에는 간격이 좁아져 글자나 단어가 겹쳐서 표시 될 수 있다.(EX. 음수값을 갖는)

line-height 속성

문장의 줄 간격 지정.
line-height : normal | <숫자> | <길이> | % ;

• normal => 기본 간격을 사용
• <숫자> => 현재 글꼴 크기에 대한 상수 배로 지정
• <길이> => px, pt, cm 등으로 간격 지정
• % => 현재 글꼴 크기에 대한 백분율로 지정

tab-size 속성

탭 문자의 크기를 지정(속성의 결과는 textarea나 pre 태그에서만 확인 가능)
tab-size : <숫자> | <길이> ;

• <숫자> => 탭 문자에 의해 표시 될 공백 문자의 개수를 지정(기본값 8)
• <길이> => 탭 문자의 길이를 지정(지원하는 브라우저가 아직 없음)

text-ident 속성

텍스트 블록에서 첫 번째 줄의 들여쓰기 지정. 음수의 값을 사용하면 왼쪽으로 밀어서 내어쓰는 형태가 됨
text-ident : <길이> | % ;

• <길이> => px, pt, cm 등으로 크기를 지정(기본값 0)
• % => 부모 요소의 폭에 대한 백분율로 지정

text-align, text-align-last 속성

텍스트를 수평 정렬 할 때 사용.
last를 붙이면 텍스트의 마지막 줄의 정렬 방식을 지정(text-align 속성값이 justify(양쪽정렬)로 지정 된 경우만 동작)
text-align : left | right | center | justify ;

• left, right, center => 왼쪽정렬, 오른쪽정렬, 가운데정렬
• justify => 양쪽정렬(문서의 양쪽 여백 사이에 텍스트를 균일하게 배분)

text-align-last : auto | left | right | center | justify | start | end ;

• auto => 기본값. 마지막 줄을 왼쪽 정렬(left)
• start => 마지막 줄을 라인의 시작 부분에 정렬
• end => 마지막 줄을 라인의 끝 부분에 정렬

text-transform 속성

텍스트를 대문자 또는 소문자로 변환하거나, 각 단어의 첫 글자를 대문자로 변환
text-transform : none | capitalize | uppercase | lowercase ;

• none => 기본값(변환 없음)
• capitalize => 각 단어의 첫 글자를 대문자로 변환
• uppercase => 모든 글자를 대문자로 변환
• lowercase => 모든 글자를 소문자로 변환

text-decoration 속성

밑줄(<u>)이나 취소선(<s>)등 텍스트 장식
text-decoration : none | underline | overline | line-through ;

• none => 기본값(장식 없음)
• underline => 텍스트에 밑줄
• overline => 텍스트에 윗줄
• line-through => 취소선(텍스트 가운데 줄)
• text-decoration-(line | color | style) 속성 지정 기능도 확장(지원하는 주요 브라우저가 아직 없음)

text-shadow 속성

텍스트에 그림자 효과 지정. 여러 효과 지정하는 경우엔 콤마로 구분.
text-shadow : <수평위치> | <수직위치> | <흐림정도> | <그림자색상> | none ;

• <수평위치> => 그림자의 수평위치 지정(필수, 음수값 가능)
• <수직위치> => 그림자의 수직위치 지정(필수, 음수값 가능)
• <흐림정도> => 그림자의 번지는 정도를 반지름의 길이로 지정(기본값 0)
• <그림자색상> => 그림자의 색상을 지정(기본값 : 검정)

word-wrap 속성

단어의 길이가 요소의 폭을 넘을 경우 단어를 분리해서 줄바꿈을 수행
word-wrap : normal | break-word ;

• normal => 단어가 요소의 크기를 넘어도 줄바꿈을 수행하지 않음(기본값)
• break-word => 단어가 요소의 크기를 넘는 경우 자동으로 단어를 잘라서 줄바꿈