상세 컨텐츠

본문 제목

[HTML5&CSS3] CSS3 크기입력

Web/HTML5 & CSS3

by 클리엘 클리엘 2019.10.21 15:56

본문

크기와 관련하여 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>

 

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 테두리  (0) 2019.10.28
[HTML5&CSS3] 크기와 여백  (0) 2019.10.24
[HTML5&CSS3] CSS3 크기입력  (0) 2019.10.21
[HTML5&CSS3] 표시 속성  (0) 2019.10.18
[HTML5&CSS3] CSS3 색상입력  (0) 2019.10.17
[HTML5&CSS3] CSS선택자 -3  (0) 2019.10.11

태그

관련글 더보기

댓글 영역