![[HTML5&CSS3] CSS3 크기입력](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fn6csr%2FbtqyRNfPvKm%2FQwBOpjCAQQsazE4H5S6Ye0%2Fimg.png)
728x90
크기와 관련하여 CSS3에서 사용 가능한 단위는 %, em, cm, mm, inch, px 등이 있습니다. 하지만 이들 중 %, em, px만 자주 사용하고 다른 것은 사용빈도가 다소 낮습니다.
%는 우선 기본적인 크기에서 상대적인 크기를 결정하는 단위입니다.
<style type="text/css">
#span1 { font-size: 150%; }
#span2 { font-size: 200%; }
</style>
</head>
<body>
<span id="span1">abcdefg</span><br />
<span id="span2">abcdefg</span>
</body>
em은 배수 단위입니다. 따라서 1em은 1배, 1.5em은 1.5배를 의미합니다. 이 역시 상대적인 크기입니다.
<style type="text/css">
#span1 { font-size: 1em; }
#span2 { font-size: 2em; }
</style>
</head>
<body>
<span id="span1">abcdefg</span><br />
<span id="span2">abcdefg</span>
</body>
px는 픽셀단위 크기이며 %와 em과는 달리 절대적인 크기를 설정하도록 합니다.
<head>
<style type="text/css">
#span1 { font-size: 20px; }
#span2 { font-size: 30px; }
</style>
</head>
<body>
<span id="span1">abcdefg</span><br />
<span id="span2">abcdefg</span>
</body>
728x90
'Web > HTML5 & CSS3' 카테고리의 다른 글
| [HTML5&CSS3] 테두리 (0) | 2019.10.28 |
|---|---|
| [HTML5&CSS3] 크기와 여백 (0) | 2019.10.24 |
| [HTML5&CSS3] 표시 속성 (0) | 2019.10.18 |
| [HTML5&CSS3] CSS3 색상입력 (0) | 2019.10.17 |
| [HTML5&CSS3] CSS선택자 -3 (0) | 2019.10.11 |