드림코딩 by 엘리_CSS 단위 em & rem

---

CSS 단위 em & rem

---

이렇게 많은 units 중에 언제 어떤것을 사용하면 좋을까?

 

 

1. 부모요소의 사이즈에 따라서 사이즈가 변경되어야 된다면 %와 em과 같은 unit을 사용하면 된다.

부모와는 상관없이  브라우저 사이즈에 따라서 반응해야 한다면 v*(viewport) 나 rem을 사용한다.

 

2. 요소의 너비가 높이에 따라서 사이즈가 변경되어야 한다면 %, v* 사용하면 되고

font-size에 따라서 사이즈가 변경되어야 한다면 em과 rem 사용하면 된다.

 

em vs rem

 

 

어떤 디자인 이냐에 따라서 우리가 정확히 원하는 기능이 무엇인지에 따라서 다르다.

 

if button의 component만든다면?

 

 

버튼의 글자를 rem을 써서 사이즈 만들게 되면 

rem은 root요소 root에 있는 font-size에 따라서 크기가 결정되기 때문에 

페이지의 제일 상위 요소인 body에서 component를 쓸 때랑

또는 다른 component 안에서 이 버튼을 쓸때랑 크기가 전혀 변동 사항이 없다.

이유는 이 버튼은 rem을 사용하고 있기 때문에 부모 container에 있는 font-size에는 상관없이

페이지의 어떤 박스안에서 사용해도 크기가 일정하게 고정되어 있다.

 

 

버튼의 글자를 em을 써서 사이즈를  만들게 되면 

상위에서 썻을때와 부모요소에서 사용했을 때 component의 크기가 차이가 달라진다.

즉 em이라는 것은 부모요소의 font-size에 상대적으로 변하기 때문에 

이렇게 제일 상위 요소에 썼을때와  header라는 component 안에 사용했을 때 버튼의 크기가 달라진다.

 

나의 component가 페이지 어디에서 사용되어 져도

사이즈가 그대로 고정이 되야 된다면,

rem을 사용해서 styling 하고,

반대로 나의 component가 어디에 사용되냐에 따라서

즉 부모요소에 따라서 사이즈가 유동적으로 변경이 되야 된다면 em을 사용해서 만든다.

 

if em 사용 시 (우리가 root에서 16px 이라고 가정한다.)

 

 

em을 많이 사용하게 되면 즉 이렇게 복잡한 구조안에 있다면 font-size를 즉각적으로 계산하기 어렵다.

직관적으로 font-size가 계산되지 않기 때문이다.

 

if rem 사용 시 (우리가 root에서 16px 이라고 가정한다.)

 

 

부모요소의 16px을 이용하고 있기때문에 어떤 레벨에서 사용되냐에 상관없이 무조건  2rem은 32px 이다.

**font-size를 결정할 때는 em 보다는 rem을 더 선호한다.

 

padding도 font-size에 따라서 변경이 되어야 된다면?

 

 

font-size가 변경될때 마다 padding도 그에 맞게 변경되는 것이 확인 가능하다.

그리고 이렇게하게 되면 media query를 이용해서

screen 마다 font-size가 변경이 되면 이 font-size에 맞게 padding이 1em으로 변경이 되기 때문에

조금 더 반응형으로 component를 만들 수 있다.

 

 

브라우저의 사이즈가 작아지면 font-size가 줄어든다.

component의 width는 50%로 이렇게 박스 container 자체를 size를 만들때는

em과 rem은 반응형 unit이긴 하지만 font-size에 비례해서 변하는 것들이기 때문에 

결국 이 unit들도 고정적인 값을 가진다.

그래서 content를 좀 더 물과같이 유동적으로 만들기 위해서는 %를 이용하는 것이 더 좋다.

 

font-size는 component 전체에 2rem이 적용되어져 있고

 

title은 background-color는 정해져 있고

content에는 font-size가 component에 있는 2rem 보다는 조금 더 작은 1rem으로 정해져 있다

 

그리고 브라우저 사이즈가 780px 보다 작아지면 

component의 font-size가  1.5rem 으로 작아지는 것을 볼수있다.

 

앞에서 살펴본 padding을 title과 content에 적용해보면

이렇게 padding을 줄때는 0.5em을 사용한다는 것은

기존에 content에 적용된 font-size의 0.5배가 되어서 계산이 되어진다.

즉 현재 font-size의 절반이 padding 으로 들어가는 것이다.

그래서 font-size가 변경이 되면 좀 더 반응적으로 padding이 조정이 된다.

 

 

하지만 여기서 문제점이 있다.

바로 우리가 padding을 em을 사용했기 때문에 em은 현재 font-size의 상대적으로 결정되기 때문에 

title의 font-size가 content의 font-size 보다 크기 때문에

조금 더 많은 padding이 들어가서 수직적으로 정렬이 되지 않는것이 확인 가능하다.

따라서 em을 써서 padding 쓰는 것은 좋지만,

요소마다 사이즈에 상관없이 고정적인 padding을 유지해야 된다면 rem을 사용하는 것이 좋다.

그래서 이런 경우에는 위아래에는 0.5em을 줘서 font-size에 맞게 padding이 조정되게 만들고

양쪽 왼오른쪽에는 0.5rem을 사용해서

지금 현재 font-size에 상관없이 그대로 고정이 되도록 만들면 수직적으로 정렬이 된다.

그리고 font-size가 줄어들면 위아래 padding이 조절되는 것이 확인가능하다.

 

em과 rem 둘 중 하나만 골라서 사용하기 보다는

내가 어떤 component()를 어떻게 디자인 하느냐에 따라서

적절히 필요한것을 골라서 사용하는 것이 중요하다.

 

miniproject2.html 설명

h1의 font-size를 px > rem으로 변경if px을 rem과 em 으로 변경시 값 계산이 어렵다면 : http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.

 

font-size에서 rem을 사용하는 이유는

어떤 component에 쓰이냐에 상관없이 동일한 사이즈를 유지했으면 해서 사용한다.

padding과 같은 font-size에 따라서 발생할 수 있는 사이즈는 em을 사용한다.

이유는 font-size가 변경됨에 따라서 padding도 사이즈가 변경되으면 좋을것 같기 때문이다.

 

정말 반응형으로 만들고 싶다면 

media query 에서도 고정적인 px 보다는 rem을 이용해서

즉 미디어쿼리는 브라우저 스크린에 영향이 가기 때문에

(미디어쿼리의 width도 글자크기인 16px에 맞게 계산해준다. 768px/16px = 48rem)

rem을 사용해서  48rem을 이용하면 더 좋다. 

꼭 em과 rem 한가지만 사용해야 된다는것은 없다.

내가 어떤것을 원하느냐에 따라서 적절히 골라 쓰는것이 좋다.

 

 

box 자체 사이즈를 결정할 때는 %, v* 관련된 unit 이나

또는 flex 를 이용해서 조금 더 유동적으로 만드는것이 좋다.

 

 

요소의 font-size를 결정할 때는

root를 상대로 사이즈가 변경되어야 한다면 rem을 

부모에 따라서 사이즈가 변경되어야 한다면 em을 사용하면 된다.