[CSS3] px단위를 rem단위로 계산하는 법

알고 보면 엄청 단순하지만 

막상 이론적으로 머리가 안굴러가는 현상....

정말 단순하지만 정리해 봅니다.

우리가 반응형 사이트를 만들때 em또는 rem 단위로 font size를 

작업합니다.

em이나 rem 같은 경우는 유동적이라 반응형이나 모바일에 사용하고 있습니다.

간단하게 em과 rem을 설명하자면

em은 부모요소에게 영향을

rem은 최상단 부모요소(html)에게 영향을 받습니다.

em은 부모요소에 12px의 폰트사이즈가 적용되어 있다면

1em은 12px 입니다. 그럼 2em은 24px 이고요. ㅎ

rem은 부모요소에 12px로 적용하여도 부모요소에 영향을 받는 것이 아니라

최상단 부모요소(html)에게 영향을 받기 떄문에

html 태그에 16px로 적용되어 있다면

1rem은 16px이고 2rem은 32xp 입니다.

어느정도 이해하셧으리라 믿습니다.

제가 하고자하는것은 상세 설명이라기 보다는 

sass를 쓰면서 이 안에서 변수및 함수사용으로 계산식을 만들어 사용하려 합니다.

정말 단순합니다....

저는 주로 rem 을 사용하니까 rem으로 계산 하겠습니다.

최상단 부모요소에 10px로 지정했다고 칩니다.

그럼 1rem은 10입니다. 2rem은 20 이겠죠.

여기서 계산이라함은 10단위로 떨어지면 필요 없겠죠.

난 11px을 하고 싶습니다.

그럼 1.1rem이 됩니다.

계산은 다음과 같습니다.

사용하려는 값 / 최상단 부모값 = rem 값

## 참고사이트

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

https://www.w3schools.com/cssref/css_units.asp