CSS 단위 이해하기 px, %, em, rem, vw, vh

CSS 단위 이해하기 px, %, em, rem, vw, vh

 

글. 수알치 오상문 

 

px : 고정 크기 (화면에 따라서 실제 크기는 다르게 보일 수 있음)

% : 내 부모의 몇 %인지 지정 (부모 너비가 50%를 사용할 때 자식이 width:50%로 지정하면 실제는 25%이다)

em : 가장 가까운 부모 요소의 폰트 사이즈에 비례한 배율 (패딩이나 마진 같은 경우)

rem : 가장 최상위 html 속성의 폰트 사이즈에 비례한 배율 (글꼴 크기 같은 경우)

       (기본값은 1 rem = 16px 기준) 

vw : 뷰포트 너비 영역의 몇 %인가 

vh : 뷰포트 높이 영역의 몇 %인가

 

절대적인 사용 기준은 없으며, 디자인 상황에 맞게 활용해야 합니다.

아래 두 동영상을 보면 개념 이해에 도움이 됩니다.

 

https://youtu.be/SmzghM3l228

 

https://youtu.be/S5uMXoGogkk