CSS 폰트, CSS 서체

(2020-06-20)

font , font-family, font-size, font-style, font-weight, font-decoration


1. CSS 서체/글꼴/폰트 (Font)

  ㅇ font 단축형 지정 형식 
     - { font : font-style font-variant font-weight font-size/line-height font-family; }
        . 例) 요소명 { font: italic bold 13px/30px Times, serif }
           .. 13px/30px => font-weight/line-height

  ㅇ 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 정도
        . 기본 크기는,
           .. h1 요소 : 32px, p 요소 : 16px 등

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

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

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

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

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


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"