기준을 정해보자

기준 1

부모 요소의 사이즈에 따라서 상대적으로 변해야한다면 % 나 em 을 사용하자

부모 요소와 상관없이 브라우저의 사이즈에 따라서 상대적으로 변해야한다면 viewport 나 rem 을 사용하자

기준 2

• 박스 요소의 너비와 높이에 따라 변해야한다면 % 나 viewport 를 사용하면 됨

• 폰트 사이즈에 따라서 사이즈가 변경되어야한다면 em 과 rem을 사용하면 됨

em vs rem

페이스북으 (따봉)좋아요라는 컴포넌트를 만든다고 가정해보면 버튼의 글자를 rem 을 사용해서 만들게 되면 root 요소(root 에 있는 font-size)에 따라 크기가 결정되어서 페이지의 제일 상위 요소인 body 에서 사용할 때랑 다른 컴포넌트에서 사용할 때랑 크기가 동일함.

em 을 이용해서 컴포넌트를 만든다면 상위에서 썼을 때랑 자식에서 사용했을 때랑 크기가 달라진다. 왜냐하면 em 은 부모 요소의 상대적인 사이즈에 의해 변하기 때문이다.

자 그래서 이제 결론을 내리자. 내가 사용하는 컴포넌트가 페이지 어디에서 사용되던간에 같은 크기로 사용되어야한다면 rem 을 사용하고, 컴포넌트 위치에 따라 상대적으로 변해야한다면 em을 사용하자.

패딩, 마진도 em 을 이용해서 사이즈를 조절할 수 있다. 주의할 건, padding 과 margin 을 em 으로 설정하면 현재 font-size 에 상대적으로 적용된다.

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

위와 같은 style 이 있을 때 padding 은 font-size 의 절반씩된다.

이 때 문제가 생긴다. title 과 content 의 글들이 일자로 쭉 나오지 않는다!!

평행이 맞지 않다!

위에서 말했다시피 padding 의 사이즈가 해당 요소의 font-size에 상대적으로 결정되기 때문에 이런 현상이 발생한다.

따라서 현재 폰트사이즈의 상관없이 고정되도록 만들기 위해서는 padding 에도 rem 을 사용해야한다.

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