CSS의 단위 공부하다 적은 rem과 em의 간단한 차이

## px과 rem(root em) 그리고 em

px은 가장 기본이되는 단위라고 생각하시면 됩니다.

기본적으로 파워포인트, 엑셀, 한글 등 에서 사용되며 

처음으로 HTML, CSS를 배울때도 px단위로 가장 많이 사용합니다.

 

 

## rem

---

rem의 개념은 기준이 되는 값을 배수로 변환해 표현한 크기를 의미합니다.

여기서 기준이 되는 요소는 최상위 요소인 html태그에서 지정된 크기를 의미합니다.

html{
	font-size: 20px;
}

div{
	font-size: 1.25rem; // 20 x 1.25= 25px
    padding: 1.5rem;    // 20 x 1.5 = 30px
    margin: 2rem;       // 20 x 2 = 40px
}

이런식으로 표현이 가능합니다.

 

## em

---

em의 개념은 기준이 되는 값을 마찬가지로 배수로 변환해 표현한 크기를 의미합니다.

하지만 여기서 기준이 되는 요소는 바로 현재 요소인 태그에서 지정된 크기를 의미합니다.

div{
	font-size: 20px;
}

div{
	font-size: 1.25rem; // 20 x 1.25= 25px
    padding: 1.5rem;    // 20 x 1.5 = 30px
    margin: 2rem;       // 20 x 2 = 40px
}

 

See the Pen Untitled by Youngbin Yoo (@btsbringmehere) on CodePen.

 

여기 저기 블로그를 둘러본 결과 거의 rem을 많이 사용하는 것 같습니다.

아마 최상위 요소를 따라가는 입장이라서?? 그런 것 같기도 하지만 px단위의 배수의 기준이니간 적절하게 사용하면 될 것 같습니다.

 

See the Pen Untitled by Youngbin Yoo (@btsbringmehere) on CodePen.

 

em입니다... 최상위 속성이 아닌 어떻게보면 바로 위 속성을 가져와서 곱을 해줍니다.

이게 상위 속성을 가져오는 입장이라 필요할 때 사용하면 되기는 하지만 rem이 있는 순간 코드펜에서는 중첩이 되어서 되는 느낌이라 em은 안하는게 좋을 것 같습니다.