CSS 텍스트

(2019-05-13)

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     : 4개 요소로 그림자 표현
     - horizontal offset (수평 분리), vertical offset (수직 분리), bluerriness (번짐),
       color (그림자색)


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 텍스트
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
                  1. 웹 디자인
                  2. 스타일 시트
              1.   CSS
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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