CSS 텍스트

(2019-06-20)

CSS 폰트, CSS 텍스트 꾸미기

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 텍스트

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