728x90
반응형
절대 길이 단위
- px: 픽셀(화소)
- mm: 밀리미터
- cm: 센치미터
- in: 인치
상대 길이 단위
- em: 해당 요소의 font-size에 비례한 크기 설정
- rem: 현재 페이지 전체(html)에 설정된 font-size에 비례한 크기 설정
- vw: viewport width에 비례한 크기 설정 (1vw는 화면 너비의 1% 크기를 의미한다.)
- vh: viewport height에 비례한 크기 설정 (1vh는 화면 높이의 1% 크기를 의미한다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_단위.html</title>
</head>
<body>
<h3># 절대 길이 단위</h3>
<ul>
<li>px: 픽셀(화소)</li>
<li>mm: 밀리미터</li>
<li>cm: 센치미터</li>
<li>in: 인치</li>
</ul>
<div style="border: solid black 3px; width: 100px; height: 100px;">
100px
</div>
<div style="border: solid black 3px; width:100mm; height: 100mm;">
100mm
</div>
<div style="border: solid black 3px; width:5cm; height: 5cm;">
5cm
</div>
<div style="border: solid black 3px; width:1in; height: 1in;">
1inch
</div>
<h3># 상대 길이 단위</h3>
<ul>
<li>em: 해당 요소의 font-size에 비례한 크기 설정</li>
<li>rem: 현재 페이지 전체(html)에 설정된 font-size에 비례한 크기 설정</li>
<li>vw: viewport width에 비례한 크기 설정 <br>
1vw는 화면 너비의 1% 크기를 의미한다.
</li>
<li>vh: viewport height에 비례한 크기 설정 <br>
1vh는 화면 높이의 1% 크기를 의미한다.
</li>
</ul>
<div style="border: solid black 3px; width:20em; height: 20em; font-size:15px">
em (font-size 비례)
</div>
<style>
html {
font-size: 20px;
}
</style>
<div style="border: solid black 3px; width:20rem; height: 20rem; font-size:30px">
rem (html의 font-size 비례)
</div>
<div style="border: solid black 3px; width:30vw; height: 30vw; font-size:15px">
30vw
</div>
<div style="border: solid black 3px; width:30vh; height: 30vh; font-size:15px">
30vh
</div>
</body>
</html>728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] 그림자(shadow) (0) | 2023.06.07 |
|---|---|
| [CSS] 텍스트(text) (0) | 2023.06.04 |
| [CSS] 여백(margin, padding) (0) | 2023.06.04 |
| [CSS] 테두리(border) (0) | 2023.06.04 |
| [CSS] 배경(background) (0) | 2023.06.04 |
