[CSS 공부] CSS의 단위

CSS에는 웹에서 컨텐드가 어떻게 보여질지 표현하기 위해서 단위를 사용한다. CSS에서는 다양한 단위를 사용하여 레이아웃, 공간, 글꼴 크기 등을 정의합니다. CSS의 단위에는 절대 단위(px, cm, mm, in, pt, pc)와 상대 단위(%, em, rem, vw, vh, ex, ch)가 있는데, 각각의 특성에 대해서 살펴보겠습니다.

CSS의 단위 개요

CSS에서는 다양한 단위를 사용하여 레이아웃, 공간, 글꼴 크기 등을 정의합니다. 이러한 단위는 절대적인 단위와 상대적인 단위로 나뉩니다.

절대 단위: 절대 단위는 화면의 실제 물리적인 크기를 기반으로 합니다. 이에 해당하는 주요 CSS 단위들은:
- px (픽셀): 디스플레이 화면에서 가장 기본적인 측정 단위입니다.
- cm, mm, in (인치), pt (포인트, 1/72 인치), pc (파이카, 1/6 인치): 이들은 주로 인쇄 매체에 사용됩니다.
상대 단위: 상대적인 크기나 거리를 표현하는 데 사용되며, 다른 요소의 크기나 폰트 사이즈 등에 비례합니다. 이에 해당하는 주요 CSS 단위들은:
- %: 부모 요소에 대한 비율을 나타냅니다.
- em: 현재 요소의 폰트 크기를 기준으로 합니다. 예를 들어, 폰트 크기가 16px일 때, ‘2em’은 32px와 같습니다.
- rem: 최상단 부모 요소(root element)의 폰트 크기를 기준으로 합니다.
- vw, vh: 각각 viewport 너비와 높이의 백분율을 나타냅니다.

각 상황과 필요성에 따라 적절한 CSS단위를 선택하여 사용하면 웹 페이지의 반응성과 접근성을 향상시킬 수 있습니다.

01: CSS 단위

단위는 크기를 결정하는 중요한 요소 입니다. 일반적인 cm, px 등과 같은 단위 이외에도 CSS에는 여러 단위가 있습니다. 정확한 레이아웃 구성을 위해서는 어떤 단위가 있는지 명확하게 알고 있어야 하며 특히 여러 화면 크기에 대응하는 반응형 웹 디자인을 위해서는 단위에 대한 이해가 필수적입니다.

1) 절대 단위

절대적인 크기가 정해져 있는 단위 입니다. 절대 단위는 화면 크기나 해상도에 따라 지나치게 크거나 작게 보일 수 있습니다. 예를들어 1024×768 해상도에서 500px 의 크기는 화면의 50% 이상에 해당하지만 동일한 콘텐츠를 요즘 많이 사용하고 있는 Full HD 해상도인 1920×1080 에서 보게 될 경우 전체 화면의 26% 밖에 되지않아 글씨 크기가 작게 보이거나 많은 공간이 남게 되어 주의가 필요 합니다.

단 위	설 명
cm	centimeter
mm	millimeter
in	inch (1in = 2.54cm)
px	픽셀, pixel
pt	포인트, point (1pt = 1/72 inch)
pc	파이카, pica (1pc = 12pt)

CSS에서 절대 단위는 화면의 실제 물리적인 크기를 기반으로 합니다. 이들은 디스플레이의 실제 크기나 인쇄 매체 등에 의존적인 단위입니다. 주요 절대 단위는 다음과 같습니다:

px (픽셀): CSS에서 가장 많이 사용되는 단위로, 디스플레이 화면에서 가장 작은 측정 단위입니다. 하지만, ‘픽셀’은 모든 디스플레이에서 동일한 크기를 나타내지는 않습니다. 대부분의 웹 브라우저와 시스템 설정에서 1px는 보통 1/96 인치로 간주됩니다.
cm (센티미터), mm (밀리미터): 이들은 주로 인쇄 매체에 사용되며, 웹 페이지 디자인에는 거의 사용되지 않습니다.
in (인치): 1 인치는 96 픽셀로 정의됩니다.
pt (포인트): 전통적으로 인쇄 산업에서 글꼴 크기를 측정하는 데 사용되던 단위입니다. 1pt는 1/72 인치입니다.
pc (파이카): 역시 전통적으로 인쇄 산업에서 사용하던 단위로 인쇄및 출판시스템에 많이 사용되던 단위 입니다. 1인치에 가로 열 자, 세로 여섯 자가 찍히던 크기로, 현재의 12포인트 활자 크기와 같습니다, 즉, 1pc는 12pt 혹은 1/6인치 입니다.

웹 디자인과 개발을 할 때 대부분 상황에서 절대단위 중 ‘px’가 가장 일반적으로 사용됩니다.

2) 상대 단위

부모요소의 크기를 기준으로 상대적인 크기를 지정하는 단위 입니다. 적절한 설계를 통해 상대 단위를 잘 활용하면 반응형 웹 등 다양한 화면크기에 대응할 수 있는 웹페이지 레이아웃 구현이 가능합니다. 가장 많이 사용되는 단위는 %, em, rem 입니다.

em : 부모요소의 기본 크기를 1em 으로 상대적인 크기를 지정.
rem : rem에서 r은 루트(root)를 뜻하며, 부모가 아닌 최상위 root를 기준으로 하기 때문에 중간에 기본값이 바뀌지 않음.

단 위	설 명
em	부모 요소의 글꼴에 비례. (2em은 현재 글꼴 크기의 2배를 의미.)
ex	현재 글꼴의 x 높이에 비례. (거의 사용되지 않음)
rem	루트 요소(<html>)의 글꼴 크기에 비례.
vw	뷰포트 너비의 1%에 비례.
vh	뷰포트 높이의 1%에 비례.
vmin	뷰포트의 너비와 높이 중 더 작은 치수 1%에 비례.
vmax	뷰포트의 너비와 높이 중 더 큰 치수 1%에 비례.
%	퍼센트, 100% 를 기준으로 하는 상대 크기

CSS에서 상대 단위는 다른 요소의 크기나 폰트 사이즈 등에 비례하는 크기나 거리를 표현하는 데 사용됩니다. 주요 상대 단위는 다음과 같습니다:

%: 부모 요소에 대한 비율을 나타냅니다. 예를 들어, 부모 요소의 너비가 500px이고 자식 요소의 너비가 50%라면, 자식 요소의 너비는 250px입니다.
em: 현재 요소의 폰트 크기를 기준으로 합니다. 예를 들어, 폰트 크기가 16px일 때, ‘2em’은 32px와 같습니다. 만약 부모요소에서 ‘2em’을 설정하면 그것은 현재 폰트 사이즈의 두 배가 됩니다.
rem: 최상단 부모 요소(root element)인 <html> 태그의 폰트 크기를 기준으로 합니다. 이 값은 전체 페이지에 일관된 스페이싱을 적용하는 데 유용합니다.
vw, vh: 각각 viewport 너비와 높이의 백분율을 나타냅니다.
- vw (viewport width): 화면(viewport) 넓이의 백분율로 계산됩니다.
- vh (viewport height): 화면(viewport) 높이의 백분율로 계산됩니다.
ex, ch: 이들은 특정 글꼴과 관련된 상대적인 단위입니다.
- ex는 소문자 ‘x’ 문자열 높이를 기반으로 합니다.
- ch는 숫자 ‘0’ 문자열 넓이를 기반으로 합니다.

앞에 v가 붙은 단위들은 뷰포트(viewport)와 관련된 것으로 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말하는 것으로 PC의 경우 브라우저 크기를 줄이게 되면 스크롤바를 통해 한화면에 보이지 않는 콘텐츠를 볼 수 있습니다. 이때도 보여지는 영역이 뷰포트가 됩니다. 반면 모바일 기기들의 경우 브라우저의 크기를 조정할 수 없으므로 콘텐츠가 브라우저 크기를 벗어나는 경우 한화면에 담기 위해 크기를 줄이게 됩니다. 따라서 글자들이 너무 작게 되어 보기 어렵게 됩니다. html 의 meta 태그중에 viewport 설정은 모바일 화면의 콘텐츠를 뷰포트 크기로 맞춰주는 설정 입니다

상대적인 CSS 단위들은 반응형 웹 디자인에서 중요한 역할을 하며, 다양한 디스플레이 사이즈와 해상도에 대응할 수 있게 해줍니다.

절대단위와 상대단위의 특성과 용도

CSS에서 사용하는 단위는 크게 절대 단위와 상대 단위는 각각 특성과 용도에 따라 다르게 사용됩니다.

절대 단위: 이러한 단위들은 고정된 크기를 가집니다. 즉, 화면의 크기나 해상도, 요소의 크기 등에 관계없이 항상 동일한 물리적인 크기를 나타냅니다. 예를 들어, px, cm, mm, in, pt 등이 있습니다. 웹 디자인에서는 주로 픽셀(px)이 사용되며, 인쇄 매체에서는 센티미터(cm), 밀리미터(mm), 인치(in), 포인트(pt) 등이 주로 사용됩니다.
상대 단위: 상대적인 CSS단위들은 다른 요소나 환경(예: viewport의 크기)에 비례하여 그 값을 결정합니다. 예를 들어, %, em, rem, vw/vh 등이 있습니다.
- %: 부모 요소에 대한 비율을 나타냅니다.
- em: 현재 요소의 폰트 크기를 기준으로 합니다.
- rem: 최상단 부모 요소(root element)의 폰트 크기를 기준으로 합니다.
- ‘vw/vh’: viewport 너비와 높이의 백분율을 나타냅니다.