CSS 텍스트

(2019-09-11)

text-align, text-overflow, line-height

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 : 연속 공백을 단일 공백 처리, 줄바꿈은 그대로이나, 길면 줄바꿈 일어남


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형

 
        최근수정     요약목록     참고문헌