Full_Stack developer

css 폰트 속성 알아보자 본문

FE/CSS

css 폰트 속성 알아보자

develkbh 2024. 1. 25. 12:52
0
 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;}

 

 

출력결과 :

 

 

 

 

 

 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;}

 

 

출력결과 :

 

 

 

 

 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;}

 

 

출력결과 :

 

 

 

 

 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;}

 

 

출력결과 : 

 

 

 

'FE > CSS' 카테고리의 다른 글

CSS 텍스트 정렬 text-align  (0) 2024.01.25
css 선택자란 무엇인가?  (0) 2024.01.25
CSS 란 ??  (0) 2024.01.25
'FE/CSS' Related Articles more