css의 %, em, rem 단위는 기준에 따라서 상대적으로 값을 변경 시킬 수 있습니다. %와 em 단위는 현재 요소의 가장 가까운 부모 요소 기준으로 rem 단위는 최상단 부모 요소 기준으로 적용이 됩니다.
% 단위
<!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>Document</title>
<style>
section {
background-color: bisque;
width: 800px;
height: 600px;
}
div {
background-color: aqua;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
em 단위
<!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>Document</title>
<style>
h1 {
font-size: 3em;
}
article {
font-size: 10px;
}
</style>
</head>
<body>
<h1>hello</h1>
<article>
<h1>world</h1>
</article>
</body>
</html>
hello는 최상단 부모 요소를 기준으로 16px * 3으로 적용이 돼서 48px이고 world는 article 요소 기준으로 10px * 3으로 적용이 돼서 30px이 됩니다. 그리고 padding, margin에 em 단위를 사용하면 현재 요소의 font-size 기준으로 적용이 됩니다.
rem 단위
<!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>Document</title>
<style>
h1 {
font-size: 3rem;
}
article {
font-size: 10px;
}
</style>
</head>
<body>
<h1>hello</h1>
<article>
<h1>world</h1>
</article>
</body>
</html>
hello, world 두 요소 모두 최상단 부모 기준으로 16 * 3 이 적용되서 48px이 됩니다. 그리고 padding, margin에 rem 단위를 사용하면 최상단 부모요소 font-size 기준으로 적용이 됩니다.
'IT > css' 카테고리의 다른 글
| css flex-direction 속성 (0) | 2023.03.24 |
|---|---|
| css 투명도 조절하는 방법 - rgba, opacity (0) | 2023.03.23 |
| css display 속성 - inline, block, inline-block, none (0) | 2023.03.23 |
| css 마진(margin) 속성 (0) | 2023.03.22 |
| css 패딩(padding) 속성 (0) | 2023.03.22 |
댓글