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
