Typography

typography
   font-size
       - 글씨의 크기
       - ex) font-size : 16px;
       - 단위로는 px, em, rem
              - px : 절대 단위(어디에서도 고정된 단위)
              - em : 상대 단위 / 부모 요소의 글꼴 크기에 비례함
              - rem : 상대 단위 / 최상위 요소(html)의 글꼴 크기에 비례함
              cf>주로 px, rem 사용 권장
        
   line-height
        - 줄간격
        - 단위는 font-size와 마찬가지로, px / em / rem 사용
               - line-height는 em 주로 사용(em 사용 시 em 생략이 관례)
        cf> line-height를 아무리 늘려도, 글자는 항상 줄간격의 중간에 존재
                  - 글을 수직으로 정렬할 때, line-height를 사용하는 경우가 많으니 기억


  letter-spacing
        - 자간 (글자 사이의 간격)
        - 단위는 px, em(rem은 잘 사용 X) , 주로 em을 사용

  font-family
        - 서체
        - ex)
             1. font-family : 'font'; // font 서체 적용
             2. font-family : 'font', sans-serif // font체가 없다면, sans-serif 적용
             3. font-family : 'font1', 'font2', sans-serif // font1이 없다면 font2, 그것도 없다면 sans-serif 적용

  font-weight
        - 글씨의 굵기
        - 100 단위의 수 작성
             ex) font-weight : 100 / 200 / 300 / 400 / ....
                       400 : regular // 기본 굵기
                       700 : bold // 기본보다 두꺼운 굵기

  color
      - 글씨의 색상
      - ex)
           color : #0066ff;
               hex : #0066ff 방식으로 색상 표현
               rgb : rgb(0,102,255) 방식으로 표현
               rgba : rgb(0,102,255,0.5) 방식으로 표현 
                      : 마지막의 0.5 변수 부분은 투명도 표현

   text-align
        - 글씨 정렬
        - ex) text-align : left(왼쪽 정렬) / center(가운데 정렬) / right(오른쪽 정렬)

   text-indent 
       - 제일 앞 문장 들여쓰기 시 사용
       - ex ) text-indent : 5px; (음수도 가능, -5px)

   text-transform
     - 영어의 대소문자 관련 속성(한글은 변화 X)
     - ex ) text-transform : none / capitalize / uppercase / lowercase
                  none : 변화 X
                  capitalize : 단어의 첫 글자를 대문자로
                  uppercase : 단어를 전부 대문자로
                  lowercase : 단어를 전부 소문자로

   text-decoration
     - text-decoration : none/ underline / line-through / overline
              none : 줄 삭제
              underline : 단어에 밑줄
              line-through : 단어에 취소선 (가운데에 밑줄)
              overline : 단어의 위에 줄
      - 주로 a 태그의 밑줄을 지울 때 쓰임 (text-decoration : none)

    font-style
        - font-style : normal / italic / oblique
                normal : 기본값
                italic : 글씨를 기울이고 싶을 때
                oblique : 글씨가 기울어지나, 거의 쓰이지 않음
        - em tag 사용 시, 글씨가 기울어져서 마크업되는데
          그 기울기를 없앨 때 font-stye : normal 사용



    webfont
          - 1. Google Font
                   a. 원하는 폰트 클릭
                   b. type tester 아래의 style의 select 클릭
                   c. use on the web 부분의 html, css 부분을 
                      문서에 붙여넣기

         - 2. 저장소의 폰트 파일 이용
                  - a. 새 css 파일(fonts.css) 만들기
                  - b. @font-face{
                             font-family : 'name' // 파일에서 쓸 폰트의 이름
                             font-style : normal // 만약 폰트가 italic 폰트라면 italic 작성, 아니면 normal 작성
                             font-weight : 400; //적용시킬 폰트에 따라 달라짐, 예를 들어 적용하려는 폰트가 eb라면, 800 입력
                             src : url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
              url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
              url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
              url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
              url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

                             // src는 적용하려는 폰트의 경로를 입력하기 위해서 사용, 이 때 자신의 파일에 관련 파일 양식이 없다면 지우기
                             // src가 다양한 이유는 브라우저마다 지원하는 폰트의 확장자가 다르기 때문
                                     ex) super modern browsers는 woff2 파일을 지원
                             // 위 코드는 google에 fontface trick 검색하면 찾을 수 있음

                             
                  - c. 문서에 적용시키기
                            1. HTML 적용
                                 <link rel="stylesheet" href="fonts.css 경로"> 입력

                             2. CSS 파일에 적용
                                  파일 위에 @import url("fonts.css 경로") 입력