반응형
em, rem은 박스 및 텍스트 크기를 조정할 때 사용한다.
em은 부모 요소의 크기를 반영하고
em은 부모 요소의 크기를 반영하지만 내,외부의 여백을 정할 때에는 자기 자신의 글자 크기를 기준으로 한다.
rem은 루트(html) 요소 크기를 반영한다. 이 때, 루트 요소의 기본 폰트 사이즈는 16px이다.
* em, rem은 상위 요소들의 크기에 맞추어 변하는 것이지
주변 환경(기기별 화면 크기)에 따라 그 크기를 달리할 수 있는 가변성은 없음 (반응형이 아님)
<!DOCTYPE html>
<html lang="en" style="font-size: 16px;">
<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>
.outer{
font-size: 32px;
}
.inner{
font-size: 1rem;
display: inline-block;
width: 100px;
height: 100px;
background-color: tomato;
padding: 1em;
margin: 1em;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">강아지</div>
</div>
</body>
</html>
위의 예시에서 outer(부모) 클래스 안에 inner(자식) 이 들어있는 것을 볼 수 있다.
inner클래스를 보면 font-size 가 1rem 으로 되어있는데 이는 기본 html 의 16px의 크기를 가지게 된다.
padding 과 margin의 1em은 원래는 outer의 font-size인 32px의 크기를 가지는게 맞지만
내,외부의 여백을 정하는 옵션이기 때문에 자기자신인 1rem (16px) 의 크기를 가지게 된다.
반응형
'Develop > CSS' 카테고리의 다른 글
| CSS - calc() (0) | 2022.09.22 |
|---|---|
| CSS - viewport vw vh vmin vmax (0) | 2022.09.21 |
| CSS - background-image , img 태그 차이 (0) | 2022.05.02 |
| CSS - float (0) | 2022.04.23 |
| CSS - z-index (0) | 2022.04.22 |