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 등


[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차원 변형

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