CSS 이론 채워 넣기 - 2. 다양한 CSS 단위

1. 크기 단위

cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.

px은 절대값이고 em, %는 상대값이다.

1.1 px

px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미하고 픽셀은 디바이스 해상도(resolution) 에 따라 상대적인 크기를 갖는다.

이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식한다.

1.2 %

% 는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.

1.3 em

em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.

폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능하여 편리하다.

1.4 rem

em의 기준은 상속의 영향으로 바뀔 수 있다. 즉, 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다.

rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.

1.5 Viewport 단위(vh, vw, vmin, vmax)

반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.

Viewport 단위는 상대적인 단위로 viewport 를 기준으로 한 상대적 사이즈를 의미한다.

※ viewport 란 웹페이지의 가시영역을 의미한다.

단위	Description
vw	viewport 너비의 1/100
vh	viewport 높이의 1/100
vmin	viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax	viewport 너비 또는 높이 중 큰 쪽의 1/100

2. 색상 표현 단위

단위	사용예
HEX 코드 단위 (Hexadecimal Colors)	#000000
RGB (Red, Green, Blue)	rgb(255, 255, 0)
RGBA (Red, Green, Blue, Alpha/투명도)	rgba(255, 255, 0, 1)
HSL (Hue/색상, Saturation/채도, Lightness/명도)	hsl(0, 100%, 25%)
HSLA (Hue, Saturation, Lightness, Alpha/투명도)	hsla(60, 100%, 50%, 1)

3. display 관련

layout 정의에 자주 사용되는 중요한 프로퍼티이다.

3.1 block 레벨 요소

block 특성을 가지는 요소(block 레벨 요소 또는 block 요소)는 아래와 같은 특징을 갖는다.

• 항상 새로운 라인에서 시작한다.
• 화면 크기 전체의 가로폭을 차지한다. (width: 100%)
• width, height, margin, padding 프로퍼티 지정이 가능하다.
• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다
• block 레벨 요소 예
  • div
  • h1 ~ h6
  • p
  • ol
  • ul
  • li
  • hr
  • table
  • form

3.2 inline 레벨 요소

inline 특성을 가지는 요소(inline 레벨 요소 또는 inline 요소)는 아래와 같은 특징을 갖는다.

• 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
• content의 너비만큼 가로폭을 차지한다.
• width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
• inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
• inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다.
• inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
• inline 레벨 요소 예
  • span
  • a
  • strong
  • img
  • br
  • input
  • select
  • textarea
  • button

3.3 inline-block 레벨 요소

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

• 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
• 복수의 block 요소는 기본적으로 수직 정렬된다. *이것을 inline-block 요소로 변경 시 수평정렬된다. *
• block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
• content의 너비만큼 가로폭을 차지한다.
• inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다. 이것을 회피 방법은 Fighting the Space Between Inline Block Elements를 참조

4. visibility 프로퍼티

프로퍼티값 키워드	설명
visible	해당 요소를 보이게 한다 (기본값)
hidden	해당 요소를 보이지 않게 한다. display: none;은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.
collapse	table 요소에 사용하며 행이나 열을 보이지 않게 한다.
none	table 요소의 row나 column을 보이지 않게 한다. IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다.

참고

https://poiemaweb.com/css3-units

https://poiemaweb.com/css3-display