CSS typography

font-size 폰트크기 

     단위 :

            ① px 절대 단위 
              em, rem 상대단위 (기준에 따라 크기 달라짐)

            ② em 실제로 적용된 폰트사이즈를 1em으로 본다. 

                  ex) font-size가 24px 일때 1em = 24px
            ③ rem html에 적용된 폰트사이즈를 1em으로 본다.
                 ex) html{

                              font-size : 20px;}

                      p{

                         font-size : 3rem;} 이면 p요소의 글자크기는 20px*3 = 60px;

 

line-height 줄간격 

     단위 : px, em, rem (em이 주로 쓰임)

     ex) line-height : 1.5;

             -> 줄간격이 1.5em이다. line-height에서 em을 사용할때는 단위생략

         *line-heigh가 커져도 글자는 항상 그 가운데에 있음*

 

letter-spacing 자간

     단위 : px, em  +%도 사용가능  (% 와 em 같음)

           ex) 자간을 -1px을 주고싶다 !   -1/100 = 0.01% or 0.01em

 

font-family : 

     "사용하고자 하는 폰트", "없으면이거",sans-serif;

          ex) "poppins", Roboto", sans-serif;

           

font-weight 폰트두께

100 │ 200 │ 300 │ 400(regular) │ 500 │ 600 │ 700(bold) │ 800 │ 900

                                             

 

font-weight  글자색

     방식:

            ① hex #0066ff
            ② rgb rgb(0,102,255)
            ③ rgba rgba(0,102,255,1) 투명도 0이면 완전 투명

 

 

++

 

text-align 글자정렬

     left │center │ right ;

 

text-indent 들여쓰기 or 내어쓰기

                              ex)100px;                                                                    -100px;

 

text-transform 영어변형

      none │  capitalize  │  uppercase  │  lowercase  │

   so yeong   So Yeong       SOYEONG       so yeong

 

text-decoration 텍스트 줄긋기

      none │  underline  │  line-through  │  overline  │

                     밑줄              중간줄             윗줄

주로 a태그에 자동으로 생기는 밑줄 없애줄때 a{text-decoration : none;}

 

font-style 폰트기울기

      normal │  italic │ 

주로 em 태그 안의 글 기울기 자동으로 먹여진거 바로세우기 em{font-style : none;}