웹페이지를 만들다 보면 단위가 많아서 뭘 선택해야 될 지 헷갈릴 때가 있습니다. (제가요)
그래서 정리했습니다. 참고하셔 도움 되시길~
웹 디자인 단위 정리
px (픽셀)
가장 기본적인 단위입니다. 화면 해상도에 직접 영향을 받습니다
% (퍼센트)
상위 요소의 %입니다.
예를 들어 컨테이너의 width가 1000px이고, 바로 하위 요소를 80%로 설정하면 800px이 되겠죠?
em, rem
em: 현재 폰트 사이즈에 기반한 상대적 단위입니다. 예를 들어, 폰트 사이즈가 16px일 때, 2em은 32px이 됩니다.
rem: 문서의 루트(보통 HTML)의 폰트 사이즈를 기준으로 하는 상대적 단위입니다. 여러 요소들이 중첩되면 계산이 복잡해지는데, 이걸 방지할 수 있습니다.
vw, vh, vmin, vman
뷰포트를 기반으로 사용하는 단위들입니다.
vw: 뷰포트 너비의 백분율로 크기를 결정합니다. 100vw가 뷰포트의 가로길이 입니다.
vh: 뷰포트 높이의 백분율로 크기를 결정합니다.
vmin: 뷰포트의 너비와 높이 중 더 짧은 쪽을 기준으로 설정합니다.
vmax: 뷰포트의 너비와 높이 중 더 긴 쪽을 기준으로 설정합니다.
fr (Fractional)
CSS 그리드 레이아웃에서 사용되며, 사용 가능한 공간을 분할하는 데 사용됩니다.
ch (Character based)
문자 ‘0’의 너비입니다. 예를 들어서 5ch는 00000 의 가로길이입니다. 주로 텍스트의 가로길이를 제한할 때 사용합니다.