Web/HTML5 & CSS3
[HTML5&CSS3] CSS3 크기입력
클리엘
2019. 10. 21. 15:56
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