Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

codingfarm

font-size 본문

web/CSS3

font-size

scarecrow1992 2020. 10. 2. 19:40

font-size 기능을 이용하여 문자의 크기를 조정가능하다.

이때 단위는 크게 px와 rem 2가지로 나뉜다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
    <head>
        <style>
            #px{font-size:16px;}
            #rem{font-size:1rem;}
        </style>        
    </head>
 
    <body>
        <div id="px">PX</div>
        <div id="rem">REM</div>
    </body>
</html>
cs

이제 웹브라우저의 설정창에서 글꼴의 크기를 줄여보겠다.

기존의 16으로 설정된 크기를 9로 줄여본다.

단위를 px로 설정한 문자PX는 그대로지만 rem으로 설정한 REM은 작아젔다.

 

즉, 사용자에게 글자 크기의 조절을 위한 권리를 주고싶다면 rem단위로 설정하는것이 유용하다.

 

 

 

 

 

 

'web > CSS3' 카테고리의 다른 글

display  (0) 2020.10.02
color  (0) 2020.10.02
pseudo class selector  (0) 2020.10.02
nth-child()과 nth-of-type()  (0) 2020.10.02
HTML과 CSS가 만나는법  (0) 2020.10.02
Comments