CSS - CSS 폰트속성 알아보기

    웹언어/CSS 2018. 11. 8. 09:00

    CSS - CSS 폰트속성 알아보기



    이번 포스팅에서는 폰트에 대해서 알아보겠습니다


    HTML에서 문자를 작성하다보면 문자의 크기, 두깨, 간격, 글시체 등등을 설정하는 경우가 생기게 됩니다 그 부분을 하나씩 알아보도록 하겠습니다






     CSS - CSS 폰트 사이즈


    CSS에서는 글꼴의 크기를 지정시 font-size 속성을 사용하게 됩니다

    속성값은 가장 대중적인 부분만 알아보도록 하겠습니다


    rem - html 태그에 적용된 font-size의 영향을 받습니다 html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다

    px - 모니터상의 화소 하나의 크기에 대응하는 단위입니다 고정된 값이기 때문에 이해하기 쉽지만 사용자가 글꼴의 크기를 조정할수 없다는 단점이 있습니다

    em - 부모태그의 영향을 받는 상대적인 크기입니다 부모의 크기에 영향을 받기 때문에 파악하기 어려우며 사용하지 않는것이 좋다고 합니다

    사용법 : font-size: [속성 값]


    File : my.html

    <!DOCTYPE html>
<html>
    
 <head>
<link rel="stylesheet" href="my.css" type="text/css">
 </head>
  <body>
<div id="rem">REM</div>
<div id="px">PX</div>
<div id="em">EM</div>
  </body>
</html>



    File : my.css


    @charset "utf-8";
#rem {font-size:4rem;}
#px {font-size:4px;}
#em {font-size:4em;}



    출력결과 :



    REM

    PX
    EM





     CSS - CSS 폰트두께


    CSS에서는 두께를 지정시 font-weight 속성을 사용하며 속성값은 bold만 아시면 될것으로 보입니다


    사용법 : font-weight: [속성값]



    File : my.html


    <!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="my.css" type="text/css">
 </head>
  <body>
<div id="rem">REM</div>
<div id="px">PX</div>
<div id="em">EM</div>
<div id="bold">
폰트의 두께
</div>
  </body>
</html>




    File : my.css


    @charset "utf-8";
#rem {font-size:4rem;}
#px {font-size:4px;}
#em {font-size:4em;}
#bold {font-weight:bold;}



    출력결과 :



    REM
    PX
    EM
    폰트의 두께




     CSS - CSS 줄간격



    CSS에서는 줄간격을 지정시 line-height 속성을 사용합니다



    사용법 : line-height: [속성값]



    File : my.html



    <!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="my.css" type="text/css">
 </head>
  <body>
<div id="rem">REM</div>
<div id="px">PX</div>
<div id="em">EM</div>
<div id="bold">
폰트의 두께
</div>
  </body>
</html>




    File : my.css


    @charset "utf-8";
#rem {font-size:4rem;}
#px {font-size:4px;}
#em {font-size:4em;}
#bold {font-weight:bold;}
div {line-height:4;}



    출력결과 :


    REM
    PX
    EM

    폰트의 두께





     CSS - CSS font 속성



    위의 내용처럼 전부 적게되면 기억하여야 될것도 많으며 코드가 많이 길어지게 되며, 이러한 경우에 간결하게 표현하는 속성입니다


    사용시 순서를 잘확인하셔서 사용하셔야 됩니다



    순서 - font: font-style font-variant font-weight font-size/line-height font-family



    사용법 : font : [폰트두께] [폰트사이즈] [줄간격] [서체]



    File : my.html


    <!DOCTYPE html>
<html>
 <head>
<link rel="stylesheet" href="test.css" type="text/css">
 </head>
  <body>
<div id="font_ss">
폰트 속성을 간결하게 표현하는 속성입니다
</div>

      </body>
    </html>




    File : my.css


    @charset "utf-8";
#font {font:bold 5rem/2;}



    출력결과 : 


    REM
    PX
    EM
    폰트의 두께



    저작자표시
    '웹언어/CSS' 관련 글 more
    Posted by 서버이야기

티스토리툴바