🙋🏻♂️PX 단위
👉 font-size를 px단위로 지정하였을 때 문제점
항상 고정된 값으로 설정된다는 것이다.
고정된 값을 지정하면, 사용자가 눈이 안좋아서, 작은 글씨가 좋아서 등의 이유로 브라우저 기본 설정을 바꿔놓았는데 그대로 무시하게 된다. 그리고 rem, em값으로 설정하는 와중 px 단위를 사용하였다면, 해당요소의 크기가 변할 경우에 레이아웃이 망가지지 않는 지 등을 확실하게 검토해 보아야 할 것이다.
🙋🏻♂️rem 단위
👉 rem을 pixel로 변환하는 방법
rem의 기준은 항상 최상위 요소의 폰트크기 이다. 즉 html요소의 폰트 크기를 기준으로 한다.
html의 폰트 크기가 대부분 16px이 기본이므로 10rem은 10*16으로 160px이 된다.
html{
font-size:16px;
padding:10rem;
}👉 왜 rem을 써야하는가
- 상속의 특성에 상관없이 일관된 크기를 돌려준다.
- 브라우저가 기본 폰트 크기를 어떤 값을 설정했든 이에 맞춘 가변 텍스트 크기에 맞춰서 레이아웃이 조정될 수 있도록 한다.
rem 단위를 쓰면, 사용자가 폰트 크기를 늘리더라도, 레이아웃은 그대로 온전하게 보전될 것이고, 텍스트 또한 작은 텍스트에만 어울리는 아주 빽빽한 공간 안에서 찌그러져 버리는 불상사가 생기지도 않을 것이다.
👉 rem 단위를 써야할 때
크기가 변해야하는 곳에는 rem을 쓰자(margin, width, padding, border 등등 특정 경우를 제외한 모두!)
특히 media queries에도 rem 단위를 사용하여, 사용자가 지정한 브라우저의 폰트 크기에 맞추어 레이아웃을 조정시키자
🙋🏻♂️em 단위
👉 em을 pixel로 변환하는 방법
em은 현재 요소의 폰트 크기와 연관이 되어있다. 이 때 상속 된 상위 요소의 폰트 크기도, 현재 폰트 크기가 지정이 되어있지 않다면 영향을 줄 수 있다.
만약 아래 div 요소의 하위 span의 폰트 크기를 1.2em으로 지정하였다면, 이때 20 * 1.2로 24px를 폰트 크기로 갖게 된다.
div{
font-size:20px
}
span{
font-size:1.2em
}👉 왜 em 단위를 써야하는가
우선 em 단위는 대부분 padding, margin, line-height 등을 설정할 때 사용하면 좋다. 왜냐하면 폰트의 크기가 변하면, 메뉴 항목 주변의 공간도 비례해서 크기를 변화시킬 수 있기 때문이다.
- 최상위 요소가 아닌 다른 특정요소의 font-size를 기준으로 크기를 바꿀 수 있다.
하지만
폰트크기는 rem을 통해 사용하고, margin, padding, width, height, line-height를 기본폰트 크기로 지정되어 있지 않은 요소에 대해 지정할 때 사용하자
참고
Why designers should move from px to rem
종합 안내: Rem 그리고 Em, 언제 써야 할까
왓챠 테크블로그
