CSS 속성 단위 (px, em, rem)
프론트엔드 개발자라면 무조건 숙지해야할 내용 !
▪︎ PX (PIXEL)
-
고정적인 절대(absolute) 단위
-
하지만 디스플레이 해상도에 따라 상대적인 크기를 나타낸다.
▪︎ EM / REM
-
가변적인 상대(relatve) 단위
-
font-size 단위의 기준
1em이나 1rem은 항상 고정된 길이를 나타나지 않고,
대신 브라우저가 어떤 기준에 따라 계산을 하여 px로 변환을 해준다.변환 기준?
- em과 rem의 차이점
html {
font-size: 15px;
}
.em-box {
font-size: 17px;
width: 10em; /* 170px */
}
.rem-box {
font-size: 17px;
width: 10rem; /* 150px */
}rem에서 r은 root로 최상위 요소의 font-size 속성 값이 기준이 된다.
따라서 <html>요소의 font-size 속성 값이 기준이 된다.
em은 해당 요소의 font-size에 비례해서 크기가 결정된다.- em의 문제점 ?
<style>
html { font-size : 10px; }
div { font-size : 2em; }
p { font-size : 2em; }
</style>
<html>
<div>
20px 크기의 글자
<p>
40px 크기의 글자
</p>
</div>
</html>em은 해당 요소의 font-size에 비례해서 크기가 결정된다고 했는데,
해당 요소에 font-size 속성이 없다면 부모의 font-size의 값을 그대로 상속 받게 된다.
따라서 층층이 끼어 있는 구조라면 어떤 요소에서 시작된 길이인지 예측하기가 어렵고,
위 예시 코드처럼 부모 요소의 단위가 상대단위라면 더욱 예측하기 어렵다.- em vs rem
em을 사용해야하는 큰 이유가 없다면 가급적 rem을 우선적으로 쓰는것을 권고
em은 px 변환에 대한 영향을 주는 변수가 많기 때문에 재사용 및 유지보수가 어려워진다.- 웹 접근성 관련 ?
브라우저에는 루트 글꼴 크기 설정이 있는데 시각 장애가 있는 사용자에게 중요한 설정이다.
- 구글 크롬 기준
설정 > 모양 > 글꼴 맞춤 설정
사용자만 이러한 글꼴 설정을 변경할 수 있는게 아니다.
개발자는 html 태그와 CSS를 사용하여 루트 글꼴 크기를 변경할 수도 있다.
px로 크기를 고정하는 순간 모든 브라우저 설정을 덮어쓴다.
따라서 설정한 루트 글꼴 크기를 완전히 무시해 버리기 때문에 사용성과 웹 접근성에
큰 제약사항을 발생시킬 수가 있다.Reference
