CSS text 속성

text속성 - 글자, 공간, 단어, 문단들이 보여지는 속성

• text-align - text정렬 방식 지정

  • Element{text-align : left | right | center | justify }

  • justify는 각 라인의 너비가 모두 동일 하도록 간격을 늘린다.

  • HTML5부터는 center대신 text-align속성 사용

• text-decoration - text 장식 지정

  • Element{text-decoration : none | underline | overline | line-through | blink}

  • line-through는 text 사이로 라인 생성

  • blink는 text깜빡이는 효과 (IE는 지원 하지 않음)

 

• text-indent - Text-block안 첫 라인의 들여쓰기 지정

  • Element{text-indent : 절대 값(px,pt,em,em stc) | 배율(%)}

  • 절대 값의 기본 값은 0

  • 배율 값은 부모 element의 너비 비율로 들여쓰기

  • 속성 값 - 음수 허용 - 왼쪽으로 들여쓰기 함

• text-transform - text 대문자화

  • Element{text-transform  :  capitalize | uppercase | lowercase | none}

  • capitalize는 첫글자 대문자, uppercase는 글자 전체 대문자, lowercase는 글자 전체를 소문자로 변경

• white-space - element안의 공백 지정

  • Element{white-space :  normal | pre | nowrap | pre-line | pre-wrap}

  • normal - 정해진 영역에 따라 줄이 바뀌며, 하나의 whitespace만 허용

  • pre는 <pre>처럼 입력한 그대로 공백 출력

  • nowrap은 하나의 whitespace만 허용, 줄 바꿈 금지, <br>을 만나기 전까지 같은 줄 출력

• letter-spacing - 문자간의 space간격을 줄이거나 늘림

  • Element{letter-spacing  :  normal | 길이 값(length)}

  • 글자 간의 간격을 조절( 자간 늘릴 땐 양수, 줄일 땐 음수 사용)

• word-spacing - 단어 간의 간격 지정

  • Element{word-spacing  :  capitalize | uppercase | lowercase | none}
  • 단어 간격 조절

• line-height - 줄(행) 간격 지정

  • Element{line-height :  상대값 | 절대값 | 비율}

  • 기본값 normal

  • 비율값을 사용하며 현재 글자 크기를 기본으로 50%, 200%와 같은 비율로 행 간격을 설정

  • 절대값을 사용하면 행 간격을 px,cm등으로 직접 설정

  • 상대값을 사용하면 현재 글자 크기에 상대 값을 곱한 수 만큼 행 간격을 설정