CSS

[CSS] Text

katia 2023. 3. 9. 16:31

Text-align

  • 텍스트의 정렬을 지정하기위해 사용한다.
  • 속성값
    • left 혹은 start : 왼쪽정렬
    • right 혹은 end : 오른쪽 정렬
    • center : 가운데 정렬
    • justify : 양쪽 정렬

Text-decoration

  • 텍스트의 꾸밈을 지정하기위해 사용한다.
  • 기본값 : none
  • 속성구조 : [line 속성값] [color 속성값]? [style 속성값]?
  • 속성값
    • none : 없음
    • underline : 밑줄
    • overline : 윗줄
    • line-through : 취소선

Text-decoration-color

  • 텍스트의 꾸밍에서 색상을 지정하기위해 사용한다.
  • 기본값 : black
  • 속성값 : [색상]

Text-decoration-line

  • 택스트의 꾸밈에서 선을 지정하기위해 사용한다.
  • 속성구조 : [속성 값_....]
  • 속성값
    • none : 없음
    • underline : 밑줄
    • overline : 윗줄
    • line-through : 취소선

Text-decoration-style

  • 텍스트의 꾸밈에서 선의 스타일을 지정하기위해 사용한다.
  • 기본값 : solid
  • 속성값
    • dashed : 긴 점선
    • dotted : 점선
    • double : 이중 실선
    • solid : 실선

White-space

  • 텍스트 공백 및 개행에 대한 처리를 위해 사용한다.
  • 기본값 : normal
  • 속성값
    • normal
      • 연속 공백 : 합침(collapse)
      • 개행 문자 : 공백 처리
      • 자동 개행 : 함
    • nowrap
      • 연속 공백 : 합침
      • 개행 문자 : 공백 처리
      • 자동 개행 : 안함
    • pre
      • 연속 공백 : 보존
      • 개행 문자 : 유지
      • 자동 개행 : 안함
    • pre-wrap
      • 연속 공백 : 보존
      • 개행 문자 : 유지
      • 자동 개행 : 함
    • pre-line
      • 연속 공백 : 합침
      • 개행 문자 : 유지
      • 자동 개행 : 함

Text-overflow

  • 텍스트가 넘친 상황에 대해 처리하기 위해 사용한다.
  • 해당 속성은 overflow 속성값이 hidden 일 때 유호하다. 또한, 텍스트가 부모요소를 반드시 벗어나는 상황에서만 유효하다.
  • 기본값 : clip
  • 속성값
    • clip : 넘치는 텍스트 잘라낸다.
    • ellipsis : 넘치는 텍스트에 대해 특정(....)처리를 한다.

Letter-spacing

  • 자간(글자 사이 간격)을 지정하기위해 사용한다.
  • 기본값 : normal
  • 속성값
    • normal : 0 과 같다.
    • [크기]

Line-height

  • 줄간 여백을 지정하기위해 사용한다.
  • 기본값 : normal
  • 속성값
    • normal : 브라우저마다 다름(약 1.2)
    • [실수] : 현재 폰트 크기에 해당 값을 곱한 만큼을 줄의 높이로 사용한다.(상대적, 추천)
    • [크기] : 현재 폰트와 무관하게 해당값을 줄의 높이로 사용한다.(절대적, 비추천)

User-select

  • 텍스트에 대해 사용자의 상호 작용을 설정하기 위해 사용한다.
  • 기본값 : auto
  • 속성값
    • auto : 다른 속성 값 중 브라우저가 알아서 판단하게 한다.
    • none : 아무것도 선택하지 못한다.
    • text : 선택할 수 있다.
    • all : 자동적으로 전체 선택이 발생한다.

Visibility

  • 요소의 가시성을 설정하기위해 사용한다.
  • 기본값 : visible
  • 속성값
    • visible : 보임
    • hidden : 안보임(보이지만 않을 뿐 공간 차지는 함으로 유의한다.)

'CSS' 카테고리의 다른 글

[CSS] Transform  (0) 2023.03.09
[CSS] Transition(상태변화)  (0) 2023.03.09
[CSS] Font  (1) 2023.03.09
[CSS] Padding(내부여백)  (0) 2023.03.08
[CSS] Margin(외부 여백)  (0) 2023.03.08