폰트 사이즈에 rem, em 같은 상대 단위 써야 하는 이유:
그렇게 해야 저시력 사용자들이 폰트 사이즈 조절했을 때(ex)구글에 있는 기능) 확대할 수 있어서다.
즉, 브라우저의 디폴트 폰트 사이즈를 변경하는 것이다. 1rem: 16px -> 1rem: 32px 이런 식으로.
그런데 폰트 사이즈를 px로 지정하면 값이 고정되어 있어서 사용자들이 폰트 크기를 조절할 수 없다.
참고로 폰트 사이즈에는 em보다 rem이 좋다.
왜냐하면 1rem 값은 고정되어 있는 반면 em값은 상속이 되기 때문에 여러 층 내려가면 폰트 크기를 계산하기가 복잡하기 때문이다.
💫 디폴트 폰트 사이즈가 커져도 고정되어야 하는 값은 px로, 같이 커져야 하는 값은 상대 단위(rem)로
즉, 상황에 따라 다르다!
버튼의 경우도 폰트 크기가 커질수록 width도 커지면 텍스트가 다음줄로 넘어가지 않아서 대체로 rem을 쓰는 게 좋지만, 특정 레이아웃을 염두에 두고 있으면 px로 너비를 고정하는 것이 좋을 것이다.(버튼 width의 경우 rem으로 설정하고 max-width를 100%로 지정해서 컨테이너를 넘어가는 걸 방지하는 좋은 방법이 있다!)
수직 margin의 경우는 문단과 문단 사이를 구별하는 기능이 있으므로 (미관상 예뻐 보이려고 사용하는 게 아니라) 폰트 크기가 커졌을 때 구별을 확실히 하기 위해서 rem을 쓰는 게 더 좋다.
height를 쓸 때는 height 대신 min-height를 쓰는 게 좋다. min-height를 쓰면 컨테이너 최대 높이 제한이 없어서 자식 요소가 커질수록 높이도 같이 증가할 수 있기 때문이다.
패딩은 px로 쓰는 게 좋다. 왜냐하면 rem이나 em 같은 상대 단위로 쓰면 폰트 사이즈가 커질 때마다 패딩도 커져서 텍스트 적을 가로 공간이 좁아져서 가독성이 안 좋아지기 때문이다.
✨ css 변수 쓰는 것도 아주 좋은 방법이다!! (링크 맨 아랫부분 참고)
💫 계속 직접 상황에 맞게 여러 unit을 적용해 보면 직감이 생긴다. 외우기보단 직감을 길러서 직감을 따르는 게 좋다.
참고한 글: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/
