Css(rem, em, px)

CSS (rem, em, px)

px

픽셀 값으로 만약 해상도를 1920x1080으로 지정했다면 width 1920px, height 1080px이다.
css에서 px단위를 준다면 px로 정확하게 크기가 고정된다.

em, rem

em, rem은 가변단위이기 때문에 브라우저에서 px로 변환된다.

em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 표시되고
같은 엘리먼트에 설정된 폰트 크키가 없다면 상위 엘리먼트 폰트 사이즈를 기준으로 한다.

style.css
    
div {
	font-size: 10px;
}

div {
	font-size: 1em; // 10px    
}

rem은 최상위 엘리먼트에서 지정한 font-size의 값을 기준으로 변환된다.
보통 HTML Tag에서 지정한 font-size가 기준이 되고 별도로 설정하지 않았다면
브라우저에서 설정한 기본 값을 상속 받는다.

style.css

html {
	font-size: 20px; 
}

div {
	margin: 1.5rem; // 30px
}

rem은 기준이 하나인 반면 em은 엘리먼트 별로 기준이 바뀔 수 있어 복잡한 css에서
크키를 예측하기 어려운 단점이 있다.