CSS 텍스트

(2020-07-27)

text-align, text-overflow, line-height, white-space


1. CSS 속성 값  [ 텍스트 꾸미기 ] 

  ㅇ 글자체 제어 : ☞ CSS 폰트 참조  (글꼴,크기,굵기,유형 등)  
     - (font,font-family,font-size,font-weight,font-style,font-variant)

  ㅇ 텍스트 효과 : 아래 2.항 참조    (밑줄,윗줄,취소선,깜박임 등)
     - (text-decoration : overline,line-through,underline,none 등)

  ㅇ 텍스트 배치 : 아래 3.항 참조    (들여씀,수평정렬,글자간격,단어간격,글줄임 등)
     - (letter-spacing,word-spacing,text-indent,text-align,text-overflow,direction)

  ㅇ 텍스트 색상CSS 색상 참조   (color)

  ㅇ 텍스트 음영  ☞ CSS 그림자 참조 (text-shadow)

  ㅇ 기타 속성 : 아래 4.항 참조
     - 줄 간격 : (line-height)
     - 대소문자 : (text-transform : uppercase,lowercase,capitalize)
     - 글자 여백 : (white-space : normal,nowrap,pre,pre-wrap,pre-line)


2. CSS 텍스트 효과 (Text)

  ㅇ text-decoration
     - none (효과 없음)
     - underline (밑줄), overline (윗줄), line-through (가운뎃줄,취소선)
     - blink (깜박거림, 대부분의 웹브라우저에서는 이에 무 반응)


3. CSS 텍스트 배치 (Text)

  ㅇ text-indent     : 들여씀

  ㅇ text-align      : 좌우 정렬                        ☞ CSS 정렬 참조
     - left, right, center (좌, 우, 중앙)
     - justify (각 줄에 좌우 끝까지 꽉 차게)

  ㅇ letter-spacing  : 글자 간격

  ㅇ word-spacing    : 단어 간격

  ㅇ text-overflow   : 글 줄임
     - { width : 200px; white-space : nowrap; text-overflow : ellipsis; }
        . 폭이 200px 넘는 경우에, ... 로써 글 맺음


4. CSS 텍스트 기타 속성

  ㅇ line-height  : 줄 간격
     - 절대값 단위 : px, ...
     - 상대값 단위 : 배수 (1.5 등) 

  ㅇ text-transform : 영문 대소문자
     - (uppercase,lowercase,capitalize)

  ㅇ white-space : 글자 여백 (공백,줄바꿈 처리)
     - normal : 연속 공백을 단일 공백 처리, 줄바꿈 무시, 길면 줄바꿈 일어남
     - nowrap : 연속 공백을 단일 공백 처리, 줄바꿈 무시, 길어도 줄바꿈 없이 보여줌
     - pre : 연속 공백,줄바꿈 모두를 그대로 보여줌
     - pre-wrap : 연속 공백,줄바꿈을 그대로 보여주나, 길면 줄바꿈 일어남
     - pre-line : 연속 공백을 단일 공백 처리, 줄바꿈 유효, 길면 줄바꿈 일어남

폰트,텍스트
   1. CSS 폰트   2. CSS 텍스트  


"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"