CSS 텍스트

(2019-07-11)

CSS 폰트, CSS 텍스트 꾸미기, font-family, font-size, font-style, font-weight, font-decoration

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

  ㅇ 글자체 제어 : 2.항 참조
  ㅇ 텍스트 효과 : 3.항 참조
  ㅇ 텍스트 배치 : 4.항 참조
  ㅇ 텍스트 색상CSS 색상 참조


2. CSS 서체/글꼴/폰트 (Font)      :  { font : 값 }

  ㅇ 단축형 지정 例)  { font : bold italic 24pt helvetica }

  ㅇ font-family  : 글꼴 (서체 유형)
     - sans-serif, serif, cursive, fantasy, monospace 등
        . 1 이상의 폰트 지정은 콤마(,)로 구분하며, 
        . 나열된 순서대로 적용
        . 폰트명 내 빈 칸있으면, 인용부호(" ")로 감쌈
        . 한글 서체인 경우도, 인용부호(" ")로 감쌈

     - [참고] 영문 서체 주요 유형 
        . serif 유형      : Times, Time New Roman, Georgia 등
           .. serif : 글자 끝에 삐침 선을 갖는 폰트 유형
        . sans-serif 유형 : Arial, Heltvetica, Verdana 등
           .. sans-serif : 삐침 선 없는 폰트 유형 (sans : 없음을 뜻함)
        . monospace
           .. 모양을 살린 텍스트가 아니고, 프로그램 소스 형태로 단순하게 보이려면, 
           .. font-family: monospace 가 바람직

  ㅇ font-size    : 글꼴 크기
     - 키워드 지정 방식
        . 절대 크기 지정 : xx-small, x-small, small, medium, large, x-large, xx-large
        . 상대 크기 지정 : smaller, larger
     - 수치 지정 방식
        . 상대 크기 단위 : em (부모 글꼴 크기의 배수, W3C에서 권고하는 방식임), 
                           ex (폰트 소문자 크기와의 상대 값), px (픽셀), % (백분율)
        . 절대 크기 단위 : cm, mm, in, pt, pc
     - 기본값 : 1em (= 16px) 

     * 통상, 본문 글씨 크기는,
        . PC 화면 : 12~14px 정도, 스마트폰 화면 : 16px 정도

  ㅇ font-weight  : 폰트 굵기
     - 키워드 : lighter (얇게), normal (보통), bold (강조,두껍게), bolder (더 두껍게)
     - 수치 : 100, 200, ..., 900

  ㅇ font-style   : 글자 유형 지정
     - 키워드 : normal (정상), italic (기울임꼴), oblique (italic과 조금 다른 기울임꼴)

  ㅇ font-variant : 작은 크기의 대문자로의 변환 지정
     - 키워드 : normal, small-caps

  ㅇ line-height  : 글꼴 높이

  ㅇ font : 일괄 지정 (단축형)
     - 例) 요소명 { font: italic bold 13px/30px Times, serif }
        . 13px/30px => font-weight/line-height

  ㅇ @font-face : 사용자 정의 글꼴
     - 형식) @font-face { font-family: 사용자정의폰트명; src: url(글꼴파일명); }
     - 글꼴파일명 例) *.ttf, *.otf, *.woff 등


3. CSS 텍스트 효과 (Text)

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

  ㅇ text-shadow     : 텍스트 그림자 속성 부여            ☞ MDN (Mozilla) 참조
     - (형식1) text-shadow : 수평방향 수직방향 흐림도 색상
     - (형식2) text-shadow : 색상 수평방향 수직방향 흐림도
        . 수평방향(x) : 그림자 수평위치 offset (필수)
        . 수직방향(y) : 그림자 수직위치 offset (필수)
        . 흐림도(번짐) : 번짐 효과 크기 blurriness (생략가능)
        . 그림자 색상 : 색상명 또는 색상값 color (생략가능)  ☞ CSS 색상 참조

  ㅇ box-shadow


4. CSS 텍스트 배치 (Text)

  ㅇ text-indent     : 들여씀

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

  ㅇ letter-spacing  : 글자 간격

  ㅇ word-spacing    : 단어 간격


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 6. CSS 색상 7. CSS 배경 8. CSS 위치 9. CSS 정렬 10. CSS 텍스트 11. CSS 리스트 12. CSS @ 규칙

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