웹 디자인, 웹 개발 단위 정리

웹페이지를 만들다 보면 단위가 많아서 뭘 선택해야 될 지 헷갈릴 때가 있습니다. (제가요)

그래서 정리했습니다. 참고하셔 도움 되시길~

웹 디자인 단위 정리

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 의 가로길이입니다. 주로 텍스트의 가로길이를 제한할 때 사용합니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다