HTML & CSS - [CSS] CSS의 다양한 단위

728x90

서론

지난 포스트를 통해 원하는 요소들(Elements)을 선택하는 선택자에 대해 알아봤습니다.

CSS를 사용하여 웹페이지를 디자인하는 과정을 조금 더 디테일하게 설명하자면 원하는 요소를 선택하여 크기를 정하고, 위치를 정하고, 색상을 정하는 과정입니다.

일상생활에서 우리가 길이를 표현하기 위해 미터, 마일, 인치 등의 단위가 존재합니다.

CSS 또한 요소를 제어하기 위한 여러 가지 단위가 존재합니다.

본문에서는 CSS에서 제공되는 다양한 단위들을 알아보도록 하겠습니다.

CSS의 단위와 종류

CSS에는 다양한 단위가 존재한다고 말했습니다.

하나하나 살펴보기 전에, 어떤 종류가 있는지 대략적으로 알아보겠습니다.

우리가 일상생활에서 미터, 인치 등으로 표현하는 것과 같은 절대적인 표현방법과, 특정 기준 대비 표현하는 상대적인 표현방법이 있습니다.

구분	표현 방법	설명
절대적 표현단위 (Absolute)	px	Pixel 단위의 표현
	pt	Point 단위의 표현
	cm	cm 단위의 표헌
	mm	mm 단위의 표현
	in	Inche 단위의 표현 (2.54cm)
상대적 표현단위 (Relative)	em	요소의 font-size의 상대적인 표현단위
	rem	root요소의 font-size의 상대적인 표현단위
	%	부모요소크기대비 비율 표현단위
	vw	Viewport의 넓이의 비율 표현단위
	vh	Viewport의 높이의 비율 표현단위
	vmin	Viewport의 폭 또는 넓이 중 가장 작은 곳의 비율 표현단위
	vmax	Viewport의 폭 또는 넓이 중 가장 큰 곳의 비율 표현단위

절대적 표현(Absolute)

말 그대로 단위 그 자체로 물리적인 표현을 하는 방법입니다. 익숙한 표현방법이기도 합니다.

이런 절대적인 표현 단위는 어떠한 환경에서도 동일한 모양과 형태를 유지하고 싶을 때 유리합니다.

물론, 대부분의 웹페이지는 개발하는 입장에서는 여러 환경에서도 좋은 품질을 제공하기 위해 절대적 표현보다는 상대적 표현을 많이 사용하는 추세입니다.

Pixel 단위 - pixel

화소를 뜻하는 이 pixel을 단위로 표현하는 방법입니다. 실제로 기초적인 CSS예제에서 가장 많이 활용하고 컴퓨터 공학에서 화면에서의 가장 대표적인 물리적 계측 표현 단위 중 하나입니다. 하지만 예전 포스트에서도 언급했다시피 pixel은 화면을 출력하는 출력장치에서 최소의 표현 단위 일 뿐 다양한 화면을 출력하는 장치끼리 크기는 다를 수 있습니다. 따라서 pixel단위를 이용하여 CSS를 사용한다면 주의가 필요합니다.

Pixel단위의 표현으로 px를 이용합니다.

See the Pen Pixel by Gon (@gon-91) on CodePen.

Point 단위 - pt

워드나 한글 같은 문서편집기 작업을 하면 글의 크기를 pt단위로 많이 사용합니다.

CSS에서도 동일한 개념의 단위를 제공합니다. 익숙한 단위로 표현하면 1pt = 0.353mm입니다.

Point단위의 표현으로 pt를 이용합니다.

See the Pen Point by Gon (@gon-91) on CodePen.

cm, mm, in단위

이 단위들은 일상생활에서도 이미 익숙하다고 생각하여 설명은 생략하겠습니다.

See the Pen cm/in/mm by Gon (@gon-91) on CodePen.

상대적 표현(Relative)

CSS에서는 상대적인 표현 단위를 많이 사용하게 됩니다. 모든 요소들에 절대적 표현으로 설정하는 것보다 효율적이며, 여러 장점이 있기 때문입니다.

우선 상대적 표현 단위는 무엇을 기준으로 하느냐에 따라 2가지로 구분할 수 있습니다.

요소를 기준으로 한 상대적 표현 단위
화면을 기준으로 한 상대적 표현 단위

구분	단위
요소 기준	em / rem / %
화면 기준	vw / vh / vmin / vmax

이런 상대적 표현 단위는 왜 절대적 효율 단위보다 많이 사용하게 될까요?

요소 기준 상대적 표현 vs 절대적 표현

만약 아래와 같은 html 문서가 있다고 가정합시다.

<body>
	<div>내용 1</div>
    <div>내용 2</div>
    <div>내용 3</div>
</body>

그리고 다음과 같은 글씨 크기를 적용하려고 합니다.

body 요소의 글씨 크기 : 10px

첫 번째 div 요소의 크기 : body의 글씨 크기의 120%

첫 번째 div 요소의 크기 : body의 글씨 크기의 150%

첫 번째 div 요소의 크기 : body의 글씨 크기의 175%

절대적인 표현방법으로 가능하지만 하나씩 계산해서 px단위로 입력해 주어야 합니다.

하지만, 상대적인 표현방법으로 특정 요소의 크기를 기준으로 몇 배의 크기로 설정하면 보다 효율적이고 효과적이죠.

이런 장점이 발생합니다.

보통 상대적 표현 단위를 사용하면, 글자의 크기에는 em, rem 등의 표현을 사용하고, 요소의 크기 등에는 % 또는 화면 기준 표현을 많이 사용합니다.

화면 기준 상대적 표현

화면 기준의 상대적인 표현 또한 매우 중요합니다. 간혹 가다 스마트폰을 통해 웹페이지에 접속하면 최적화가 되지 않은 불편한 웹페이지들을 종종 볼 수 있습니다. 또는 모바일 접속 URL과 PC 접속 URL이 다른 웹 서비스들도 존재합니다.

만약 웹서비스 개발을 하는 사람이 스마트폰과 PC환경에서 동일환 URL로 접속해도 환경에 따른 최적화된 웹페이지를 제공하고 싶다면 이런 화면 기준의 상대적 표현을 통해 CSS를 사용해야 됩니다. 그래야만 화면의 크기에 따른 요소들의 크기를 효과적으로 제공할 수 있기 때문입니다.

부모 요소 기준 - em

부모 요소(상위)에 정의된 크기를 기준으로 표현하는 방법이다.

즉, 부모 요소의 글씨 크기가 10px로 설정되고 하위 A요소는 1.5배로 B 요소는 3배로 표현하고 싶을 때 효과적이다.

See the Pen em by Gon (@gon-91) on CodePen.

최상위(Root) 요소에는 em을 사용할 수 없다고 생각했다. 하지만 em단위의 표현이 적용 가능한 것을 확인했다.

확인해 보니 물리적 기본값이 저장되어 있고, 그 저장된 물리적 기본값을 em단위로 변경하여 렌더링 하는 것이었다.

최상위(Root) 요소 기준 - rem

최상위 요소에 정의된 크기를 기준으로 표현하는 방법이다.

최상위 요소에 크기를 정해두고 그 이후 최상위 요소 대비 얼마의 크기로 할지 정하는 방법으로 많이 사용됩니다.

See the Pen rem by Gon (@gon-91) on CodePen.

HTML에서 최상위 요소는 <html> 요소입니다.

부모 요소의 크기 대비 상대적인 표현 %

보통 % 는 요소의 크기 등을 결정하기 위해 많이 사용한다고 했습니다.

크기가 정해진 부모 요소에서 특정 비율만큼으로 하위 요소의 크기를 정할 수 있습니다.

See the Pen % by Gon (@gon-91) on CodePen.

또한 이 %단위를 이용해서 요소의 크기도 제어할 수 있습니다.

See the Pen %(width & height) by Gon (@gon-91) on CodePen.

View Port - 화면 기준?

우선 화면 기준의 상대적 표현 단위를 알기 전에 뷰포트에 대해 간단하게 언급하고 넘어가도록 하겠습니다.

흔히 반응형 웹을 만들기 위해서는 이 뷰 포트(View port)와 적절한 단위를 이용해서 사용해야 됩니다.

이 뷰 포트는 말 그대로, 보이는 화면의 크기를 뜻 합니다. 위에서 언급한 % 는 부모 요소의 크기에 비해 크기를 결정했지만, 이 뷰포트 단위를 사용하게 되면 보이는 화면에 크기를 100 분율로 나눠서 표현하는 방법이 가능해집니다.

이렇게 화면 기준의 상대적 표현 단위를 뷰포트 단위라 합니다.

화면의 폭과 높이를 가지고 제어하는 vw, vh

vw와 vh를 이용해서 위에 예시와 같은 동작을 손쉽게 구현 가능합니다.

vw와 vh의 단위는 %이며, 1vw는 전체 화면 폭의 1%라는 의미입니다.

See the Pen vw,vh by Gon (@gon-91) on CodePen.

화면의 폭과 높이 중 하나를 선택하는 - vmin, vmax

뷰 포트의 폭과 높이 중 가장 큰 놈 혹은 가장 작은놈을 선택하여 제어하는 것 또한 가능합니다.

만약 화면의 폭 또는 높이 중 가장 큰 놈을 기준으로 50% X 50% 영역으로 요소의 크기를 지정하고 싶다면 아래와 같이 사용하면 될 것입니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

마침 글

CSS를 사용해서 HTML을 효율적으로 제어하기 위해서는 단위의 개념을 이해하는 것이 가장 첫 번째 일이라고 생각합니다.

단위를 적재적소에 사용한다면, 소스코드의 가독성은 높아지고 구조적인 질의 향상 또한 기대할 수 있습니다.

포스트를 읽고, 단위에 대한 개념의 이해가 도움이 되었으면 합니다.

728x90

'컴퓨터 > HTML&CSS' 카테고리의 다른 글

HTML & CSS - [CSS]position속성 (요소의 배치방법) (0)	2022.05.26
HTML & CSS - [CSS] 요소의 크기와 위치 (width, height, left, top, right, bottom) (0)	2022.05.25
HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자 (0)	2022.05.18
HTML - iframes(문서안의 문서) (0)	2022.02.19
HTML - Class 와 Id(태그의 정체성을 부여해 주다) (0)	2022.01.09