공부할 때 참고한 자료들
https://www.youtube.com/watch?v=AfxL9OKBBCU&t=3s
https://www.youtube.com/watch?v=xWMKz9NCD0k
반응형 이미지와 동영상을 공부한 후 미디어쿼리에 대해서 배우고 그걸 실습하는 과정에서 em과 rem에 대해 궁금해졌다. 회고팀 스터디에서 분명 단위에 대해 한 번 더 공부했음에도 막상 쓰려고하니 여전히 헷갈려 정리해보려고한다.
먼저 em과 rem은 상대값이다. px이나 cm처럼 고정적인 크기가 아니기에 상황에 따라 다른값을 가진다는 의미이다.
| 절대값 | 상대값 |
| cm | em |
| mm | rem |
| px | vw |
| vh | |
| % |
em : 현재 폰트 사이즈를 나타내는 단위로 부모요소를 기준으로 size가 지정된다. 만약 부모 폰트 사이즈가 10px이라면 1em = 10px인 것이다.
rem은 최상위 요소인 <html>을 기준으로 해당 요소의 크기를 정한다.
em과 rem의 차이
em은 부모요소 폰트 사이즈에 따라 변하는 em을 사용하여 버튼을 만들면 body에서 쓸때와 header라는 컴포넌트에서 쓸때 크기의 변화가 있다. rem을 사용하여 버튼을 만들면 body에서 컴포넌트를 쓸 때랑 또는 다른 컴포넌트 안에서 버튼을 쓸때랑 크기의 변화가 없다. 즉, 페이지의 어떠한 박스 안에서 사용해도 크기가 일정하게 고정되어져 있다.
나의 component가 페이지 어디에서 사용되어도 사이즈가 고정되어야 한다면 rem을 사용하자!
반대로 나의 component가 부모요소에 따라서 유동적으로 변경되어야 한다면 em을 사용하자!
드림코딩 꿀팁 요약
패딩에 em만 써야 되는것은 아니다. 패딩 좌우는 일정한 기준에 정렬 되면 좋으니 `padding: 1em 1rem;` 이렇게 작성하면 왼쪽 패딩값은 루트 폰트에 고정되어 좌우는 변하지 않지만 상하단 패딩 값은 폰트 사이즈가 커짐에 따라 반응형으로 구현 가능하다.
미디어 쿼리를 사용할때도 max-width:768px 값 또한 브라우저 스크린의 값에 따라 보여줄 수 있기 때문에 max-width: 48rem 을 사용한다면 더욱 행복해 질 수 있다.
컨테이너를 만들 때 em과 rem에 보다는 %를 사용하는게 더 낫다. 왜? em과 rem은 반응형 유닛이로서 폰트 사이즈의 비례해서 변하는 아이이기 때문에 결국 이 아이들도 고정적인 값을 가지기 때문이다.
폰트 사이즈는 2rem을 주었고 contents에는 1rem을 주었다. 그리고 미디어쿼리를 사용하여 브라우저 사이즈가 780픽셀보다 작아지면 컴퍼넌트의 선택사이즈가 1.5rem으로 줄어드는 것을 볼수 있다.
title과 contents의 패딩을 0.5em 0.5rem을 주었다. 왜 0.5em과 0.5rem으로 넣었을까?contents의 폰트사이즈는 1rem이다. 즉 패딩이 0.5라는 것은 폰트사이즈의 절반이 패딩으로 들어가는 것을 의미한다. 만약 0.5em으로 패딩을 전체 주게되면 아래 화면처럼 수직정렬이 되지않는다. 현재 폰트 사이즈 기준으로 상대적 크기가 결정이 되기 때문에 타이틀의 폰트 사이즈가 컨텐츠 폰트사이즈보다 크기 때문에 조금 더 많은 패딩이 들어가 수직적으로 정렬이 되지않는다. 아래 화면을 통해 확인해보자.
이렇게 요소마다 사이즈의 상관없이 고정적인 패딩을 유지해야 한다면 rem을 사용하는게 좋다. 수직정렬을 맞추기 위해서는 위아래에는 0.5em을 주고 (폰트사이즈에 맞게 패딩이 조정되도록) 양쪽에는 0.5rem을 사용해서 지금 현재 폰트 사이즈에 상관없이 그대로 고정이 되도록 만들면 수직정렬이 된다. 그래서 em과 rem 둘 중에 한가지를 골라서 사용하기 보다는 내가 어떻게 디자인하냐에 따라서 유동적으로 사용한다.
언제 무엇을 사용해야 하나?
1.부모 요소의 사이즈에 따라서 사이즈가 변경되어야 한다면 %나 em을 사용.
2.부모와 상관없이 브라우저 사이즈에 대해서 반응해야 한다면 viewport나 rem 사용.
3.요소의 너비와 높이에 따라서 사이즈가 변경이 되야 한다면 %나 viewport사용
4.폰트사이즈에 따라서 사이즈가 변경되어야 한다면 em, rem 사용
참고 : 드림코딩 < px에서 em과 rem으로 계산해주는 유용한 사이트 http://pxtoem.com/
'TIL' 카테고리의 다른 글
| TIL 26 :: [JS] Boolean Type (0) | 2022.05.02 |
|---|---|
| TIL 24 :: JS란? 변수와 자료형을 알아보자 (0) | 2022.04.28 |
| TIL 18 :: 반응형 이미지, 비디오 (0) | 2022.04.20 |
| TIL 17 :: IR(Image Replacement) & Image Sprite (0) | 2022.04.19 |
| TIL 16 :: css할 때 고려해야할 것 (0) | 2022.04.18 |