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
    폰트의 두께



    Posted by Server-talk 서버이야기