CSS Unit(단위)

rem - 루트 요소에 있는 폰트 사이즈에 따라서 크기가 결정

em - 부모 요소에 있는 폰트 사이즈에 따라서 크기가 결정

 

<div class="level1">
	<h1>level 1</h1>
	<div class="level2">
		<h1>level 2</h2>
		<div class="level3">
			<h1>level 3</h1>
			<div class="level4">
				<h1>level 4</h1>
 			</div>
		</div>
	</div>
</div>

 

.level1 {
	font-size: 2em;
}

.level2 {
	font-size: 2em;
}

.level3 {
	font-size:2em;
}

.level4 {
	font-size:2em;
}

level1의 font가 16px이면 2배씩 증가

em을 많이 사용하게 되면, 복잡한 구조 안에서 폰트 사이즈를 즉각적으로 개산하기 어렵다.

 

 

.level1 {
	font-size: 2rem;
}

.level2 {
	font-size: 2rem;
}

.level3 {
	font-size: 2rem;
}

.level4 {
	font-size: 2rem;
}

부모 요소 16px을 사용하고 있기 때문에 어떤 레벨에서 사용하던간에 무조건 32px을 사용하게 된다.

 

패딩의 경우도 폰트에 맞춰서 변경이 되야된다면 픽셀보다는 em으로 표시하는 것이 좋다.

 

<h1>hello, iron code!</h1>

h1 {
	display: inline-block;
    font-size: 5em;
    background-color: white;
    padding: 1em;
}

.component {
	width: 50%;
    border: 1px solid burlywood;
    font-size: 2rem;
}

.title {
	padding: 0.5em;
	background-color: burlywood;
}

.contents {
	padding: 0.5em;
	font-size: 1rem;
}

@media screen and (max-width: 780px) {
	h1 {
    	font-size: 3em;
    }
}

@media screen and (max-width: 680px) {
	h1 {
    	font-size: 1.5em;
    }
}

 

padding에 0.5em을 준다는 것은 현재 font-size에 0.5배 즉, 절반이 적용된다는 것.

 

문제는 padding이 현재 font-size에 영향을 받기 때문에 title과 contents의 padding이 다르게 적용이 될 수도 있다는 것.

 

따라서 font-size에 상관없이 고정적인 padding을 유지하기 위해서는 rem을 사용하는 것이 좋다

 

h1 {
	display: inline-block;
    font-size: 5em;
    background-color: white;
    padding: 1em;
}

.component {
	width: 50%;
    border: 1px solid burlywood;
    font-size: 2rem;
}

.title {
	padding: 0.5em 0.5rem;
	background-color: burlywood;
}

.contents {
	padding: 0.5em 0.5rem;
	font-size: 1rem;
}

@media screen and (max-width: 780px) {
	h1 {
    	font-size: 3em;
    }
}

@media screen and (max-width: 680px) {
	h1 {
    	font-size: 1.5em;
    }
}

위 코드처럼 위,아래 padding은 font-size에 따라 유동적으로 변하지만, 양 옆 padding은 고정값으로 적용될 수 있게

em, rem 중 꼭 한 가지만 골라서 사용하는 것이 아닌, 컴포넌트를 구성하는 방식에 따라 어떤 것을 쓸지 결정한다.