px, em, rem에 대해 설명하세요

길이의 3가지 단위

• px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐

• em :

  • font_size, 해당 폰트의 대문자 M 의 너비를 기준으로 함 -> 글자 크기를 참조, 픽셀을 기반
    • 상위 요소 크기의 몇 배인지 정하는 단위
    • 상위 태그의 폰트 크기가 16px일 경우 하위 태그 1em = 16px
    • 부모 엘리먼트의 폰트 사이즈를 기준으로 하는 단위

• rem : root em으로 최상위에 있는 엘리ㅓㅁㄴ트의 사이즈를 기준으로 한 단위, 가장 상위 태그에 적용된 폰트 사이즈가 기준

• ex : x-height, 해당 폰트의 소문자 x 높이를 기준으로 함 -> 글자 크기를 참조, 픽셀을 기반

• % : percent, 전체의 몇 %, 부모를 기준으로 자식의 넓이

• pt : point, 일반 문서 (워드 등)에서 많이 사용하는 단위

viewport의 영역

• vh : viewport height 의 약자로 1vh의 경우 뷰포트 높이의 1%만큼 계산
• vw : viewport width 의 약자로 1vw의 경우 뷰포트 넓이의 1%만큼 계산

구분

크기 단위는 절대 단위와 상대 단위로 구분됩니다

절대 단위 : in, cm, mm, pt, pc 가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
상대 단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리