px 단위

CSS에서 px(pixels, 픽셀)은 절대 길이의 표준 단위(canonical unit)입니다.

부연설명
여기에서 표준 단위(canonical unit)는 CSS에서 기본적으로 합의된 측정 단위를 말합니다.

px은 물리적인 길이가 아니라 시각적(visual angle unit) 크기를 기준으로 하는 '참조 픽셀(Reference Pixel)'의 개념을 사용하는 길이 단위입니다.

참조 픽셀(Reference Pixel)

현대 CSS에서 px은 절대적인 크기가 아니라 시각적 각도(visual angle unit)에 기반한 상대 단위입니다.

과거 CSS에서는 px이 물리적인 단위(physical units, in, cm, mm, in, pt 등이 있음)가 고정된 비율로 연관되지 않았습니다. 물리적 단위는 항상 물리적 측정값에 묶여 있었지만 픽셀 단위는 '참조 픽셀'과 가장 일치하도록 변경되었습니다.

참조 픽셀의 크기

현대 CSS에서 말하는 px(pixels, 픽셀)은 참조 픽셀을 의미하며, 이 크기는 96dpi(dots per inch)의 해상도를 가진 화면에서 사람의 팔 길이(약 28인치 정도, 즉 약 71cm)에서 볼 때, 1px이 차지하는 시각적 각도(약 0.0213도)를 기준으로 정의합니다. 1px은 대략 0.26mm 크기입니다.

왜 '참조 픽셀'이라고 부르나

앞서 설명한 참조 픽셀의 크기를 참고하여, CSS에서 사용하는 물리적 단위인 in, cm, mm, in, pt 등의 크기를 상대적으로 계산하기 때문입니다.
그 계산된 크기의 값은 다음과 같습니다.

참조 픽셀과 물리적 크기의 계산된 값
물리적 단위CSS px 단위로 계산된 크기
1in 96px
1cm 37.795px
1mm 3.7795px
1pt 1.3333px

CSS 픽셀과 물리적 픽셀의 차이

CSS에서 사용하는 픽셀과 물리적 픽셀을 혼동하지 말아아 합니다.

CSS 픽셀

  • 절대적인 크기가 아니라 측정 기준을 만들어 측정한 시각적 각도(visual angle unit)에 기반한 길이 단위입니다.
  • 이 길이 단위를 기준으로 CSS에서 사용되는 물리적 단위의 상대적 크기를 계산하기 때문에, 다양한 해상도의 화면에서도 동일한 물리적 단위의 크기를 구현할 수 있습니다.

물리적 픽셀

  • 실제 화면을 구성하는 가장 작은 점(화소)을 기준으로 하는 크기입니다.
  • 이 크기는 화면의 크기나 해상도에 따라 다릅니다.

예제

CSS에서 px은 주로 요소의 크기나 레이아웃 크기 등 길이와 관련된 크기를 설정할 때 자주 사용됩니다.

HTML 
<div class="my-div">My Div</div>
CSS 
.my-div {
    font-size: 24px;
    padding: 10px 15px;
    border: 2px solid red;
}
실제 적용된 모습

명세서

px 단위의 명세서 사양
명세서 사양
px CSS Values and Units Module Level 4
#absolute-lengths

같이 보기