CSS 절대 단위 같은 것은 없습니다

CSS를 배우기 시작할 때 CSS 측정 단위는 상대적 또는 절대적으로 분류됩니다. 절대 단위는 픽셀, 센티미터, 인치와 같은 물리적 단위에 근거합니다. 그러나 수년에 걸쳐 CSS의 모든 절대 단위는 물리적 세계와의 연결이 끊어지고 최소한 웹의 관점에서 보면 다른 종류의 상대적 단위가 되었습니다.

상대 단위와 절대 단위 사이에는 여전히 상당한 차이 가 있다는 점에 유의하는 것이 중요합니다. CSS 상대 단위는 상위 요소에 의해 정의된 다른 스타일 정의에 따라 크기가 지정되거나 상위 컨테이너 크기의 영향을 받습니다. 절대 단위의 경우 화면 및 장치의 운영 체제와 같은 다른 요소에 의해 어떻게 영향을 받는지 자세히 살펴보겠습니다.

상대 단위에는 % , em , rem , 뷰포트 단위( vw 및 vh ) 등과 같은 단위가 포함됩니다. 가장 일반적인 절대 단위는 픽셀( px )입니다. 그 외에도 센티미터 단위( cm )와 인치 단위( in )가 있습니다.

이제 CSS 절대 단위가 절대적이지 않은 이유를 살펴보겠습니다.

CSS 픽셀

픽셀은 웹 초기부터 CSS의 가장 일반적인 단위였습니다. 데스크톱 화면의 구세계에서 스마트폰이 있기 전에는 화면의 픽셀이 항상 CSS 픽셀과 동일했습니다.

예를 들어 2007년에 가장 일반적인 데스크탑 해상도는 1024 × 768 픽셀이었습니다. 그 당시에는 일반적으로 전체 페이지에 맞도록 웹 페이지에 1000 픽셀의 고정 너비를 제공하고 나머지 픽셀은 브라우저의 스크롤 막대에 저장했습니다.

스마트폰 화면

스마트폰은 고밀도 화면의 시대를 여는 또 다른 조용한 진화를 가져왔습니다. 화면 너비가 1170 픽셀인 iPhone 12 Pro를 고려하면 장치의 모든 3 픽셀을 CSS에서 1 픽셀로 계산합니다.

모바일에서 크기를 조정할 때 장치 픽셀이 아니라 CSS 픽셀에 따라 측정합니다. 요약하자면:

• CSS 픽셀은 논리적 픽셀 입니다.
• 장치 픽셀은 실제 물리적 픽셀 입니다.

좋습니다. 하지만 데스크톱 장치는 어떻습니까? 그들은 여전히 ​​​​동일한 이전 픽셀 계산으로 작동합니까? 그것에 대해 이야기합시다.

2021년의 데스크탑 화면

고밀도 화면은 몇 년 후 노트북에 등장했습니다. 2014 MacBook에는 최초의 "레티나" 화면이 있습니다(레티나는 고밀도와 동의어임).

요즘 대부분의 노트북에는 고밀도 화면이 있습니다.

MacBook 을 생각해 봅시다.

• 13.3형 MacBook Pro 에는 너비가 2560 픽셀이지만 1440 픽셀처럼 작동하는 화면이 있습니다. 이는 모든 1.778 개의 물리적 픽셀이 1 논리적 픽셀처럼 작동함을 의미합니다.
• 16형 MacBook Pro 의 화면은 너비가 3072 픽셀이지만 1792 픽셀처럼 작동합니다. 이것은 모든 1.714 물리적 픽셀이 1 논리적 픽셀처럼 작동함을 의미합니다.

PC 노트북 중 풀HD 해상도와 4K 해상도의 15.6인치 화면 두 개를 테스트했다. 결과는 흥미로웠습니다.

• 15.6인치 풀 HD 화면 의 너비는 1920 픽셀이지만 1536 픽셀처럼 작동합니다. 이것은 모든 1.25 개의 물리적 픽셀이 1 논리적 픽셀처럼 작동함을 의미합니다.
• 15.6인치 4K 화면 의 너비는 3840 픽셀이지만 다시 1536 픽셀처럼 작동합니다. 이것은 모든 2.5 개의 물리적 픽셀이 1 논리적 픽셀처럼 작동함을 의미합니다.

보시다시피 실제 물리적(즉, 장치) 픽셀과 CSS(즉, 논리적) 픽셀 간의 연결이 거의 사라졌습니다.

화면은 수년에 걸쳐 밀도가 높아졌습니다.

과거에는 화면을 자세히 보면 실제로 픽셀을 볼 수 있었습니다. 스크린의 기술이 향상되면서 제조사들은 고밀도 스크린을 만들기 시작했습니다.

추천 자료 : 폴더블 웹은 실제로 무엇을 의미합니까?

논리 픽셀을 다르게 계산하는 이유는 무엇입니까?

수년에 걸쳐 화면이 더 조밀해짐에 따라 화면에 더 많은 픽셀이 있기 때문에 동일한 화면 크기에 더 많은 콘텐츠를 담을 수 없었습니다.

잠시 생각해 보십시오. Samsung Galaxy S21 Ultra 를 고려하십시오. 더 좁은 치수는 1440 물리적 픽셀입니다. 일반 데스크탑 화면에 쉽게 맞출 수 있습니다. 그러나 그렇게 하면 텍스트가 읽을 수 없을 정도로 작을 것입니다. 이 때문에 물리적 픽셀과 논리적 픽셀을 분리합니다.

그런 다음 CSS의 크기(예: 너비 및 높이)는 CSS 논리 픽셀에 따라 계산됩니다. 물론 물리적 픽셀을 사용하여 다음과 같이 이미지 및 비디오와 같은 고밀도 콘텐츠를 로드 할 수 있습니다.

 <img src="image-size-1200px.jpg" width="300" >

알겠습니다. CSS 픽셀은 기기의 물리적 픽셀과 같지 않습니다. 그러나 우리에게는 센티미터와 인치가 있습니다. 물리적인 세계와 연결된 물리적인 단위들이죠? 확인해 봅시다.

CSS 인치 및 CSS 센티미터

인치와 센티미터와 같은 물리적 단위를 사용할 때마다 이것이 절대 단위라는 것을 압니다.

CSS 픽셀이 장치 픽셀과 같지 않다면 웹에서 인치와 센티미터와 같은 물리적 단위를 사용하는 것이 좋을 것이라고 생각했습니다. 절대단위죠?

확실히 하기 위해 테스트를 해보았습니다. 너비와 높이가 1cm인 상자를 만들고 배경색을 빨간색으로 지정했습니다. 실제 줄자를 잡고 깜짝 놀랐습니다.

CSS 센티미터는 물리적 센티미터와 같지 않습니다.

여기 2019년 중반 13인치 MacBook에서 줄자로 CSS 센티미터 단위를 테스트하고 있습니다.

결과는 CSS 인치에 대해 동일합니다.

CSS 인치는 물리적 인치와 같지 않습니다.

파이카( pc ) 및 밀리미터( mm ) 단위에 대해서도 마찬가지입니다. 이들은 CSS 인치 또는 CSS 센티미터의 일부에 해당하며 둘 다 실제 인치 또는 실제 센티미터에 연결되지 않습니다.

CSS 인치와 센티미터가 실제 인치와 센티미터가 아닌 이유

1980년대부터 PC 시장은 CSS 인치를 96 픽셀에 해당하는 것으로 결정했습니다. 이 픽셀 계산은 당시 마이크로소프트 윈도우 운영체제의 모니터용 DPI/PPI(pixels per inch) 표준과 직접적으로 연결되어 있었는데, 그 중 가장 일반적인 것이 96 DPI의 표준이었습니다.

이것은 1 CSS 인치가 항상 96 CSS 픽셀과 동일하다는 것을 의미했습니다.

CSS 센티미터의 경우 모든 센티미터는 인치에서 직접 계산되므로 1 인치는 2.54 센티미터에 해당합니다. 즉, 1 CSS 센티미터는 항상 37.7952756 CSS 픽셀과 같습니다.

즉, 1cm = 37.7952756px (96px / 2.54) 입니다.

Elad Shechter의 Pen [CSS Real Dimensions!](https://codepen.io/smashingmag/pen/BaRJvWj)을 참조하십시오.

PC 산업 초기에 좋은 아이디어처럼 보였던 그 결정(일종의 표준이 있었음)은 CSS 인치와 센티미터를 구식으로 만들고 쓸모없게 만드는 잘못된 결정으로 판명되었습니다(적어도 인터넷).

1980년대에 Apple은 화면에 대해 다른 표준인 72 를 사용했습니다.

화면 픽셀 밀도가 높아짐

내가 언급했듯이 화면의 DPI는 수년에 걸쳐 밀도가 높아졌고 우리는 120 에서 160 의 화면을 보았습니다. 그리고 1 CSS 인치는 항상 96 CSS 픽셀과 같기 때문에 CSS 인치는 실제 물리적 인치와 같지 않다는 의미입니다.

CSS 인치와 CSS 센티미터는 CSS 픽셀에서 직접 변환되고 화면은 수년에 걸쳐 더 많은 DPI를 얻었기 때문에 이러한 단위가 화면에 표시되어야 하는 것을 나타내지 않는 지경에 이르렀습니다.

CSS 포인트 단위

포인트( pt ) 단위는 CSS에서 덜 인식되는 단위 중 하나입니다. Wikipedia에서는 다음과 같이 말합니다.

“타이포그래피에서 요점은 가장 작은 측정 단위입니다. 인쇄된 페이지의 글꼴 크기, 행간 및 기타 항목을 측정하는 데 사용됩니다."

Wikipedia 페이지에는 아래쪽에 포인트 눈금이 있고 위쪽에 인치 눈금이 있는 눈금자가 표시됩니다.

이 단위가 실제로 웹의 절대 단위가 아닌 이유를 알아보기 전에 화면과 프린터의 기본 단위를 살펴보겠습니다.

PPI 및 DPI

우리는 이미 DPI에 대해 언급했으며 과거에 이러한 용어를 들어본 적이 있을 수 있지만 정확히 무엇에 관한 것인지 이해하지 못했다면 여기 빠른 입문서가 있습니다.

• PPI
  화면은 픽셀이라고 하는 많은 작은 밝은 점으로 구성됩니다. 픽셀 밀도를 측정하기 위해 PPI(인치당 픽셀 수)라고 하는 1인치에 맞는 픽셀 수를 계산합니다.
• DPI
  프린터는 컬러 도트를 인쇄합니다. 프린터 도트의 밀도를 나타내기 위해 DPI(인치당 도트 수)라고 하는 1인치 용지에 맞는 도트 수를 계산합니다.

요컨대, 이것은 우리가 1인치에 들어갈 수 있는 시각 정보의 밀도를 측정하는 두 가지 방법입니다.

• PPI : 인치당 픽셀(화면용)
• DPI : 인치당 도트 수(프린터용)

1 인치의 CSS 픽셀 및 점 수는 너비와 높이 모두에 대한 것임을 언급하는 것이 중요합니다. 즉, 96 PPI 화면에서 높이와 너비가 1 인치인 상자의 총 크기는 9216 픽셀( 96 × 96 픽셀 = 9216 픽셀)이 됩니다.

다음은 10 화면에서 1 인치의 시각적 데모입니다.

다음은 CSS PPI의 실제 계산에 대한 몇 가지 예입니다.

화면용 "DPI"

모바일 및 데스크톱 장치 제조업체는 화면 측정값을 PPI가 아닌 DPI로 표현하는 것을 선호합니다. 그러나 그것이 당신을 혼동하게 하지 마십시오. 그것은 항상 화면의 경우 PPI이고 프린터의 경우 DPI입니다 .

DPI/PPI 표준

이러한 모든 점과 픽셀을 나타내기 위해 포인트( pt ) 단위가 있습니다.

그러나 CSS의 포인트 단위는 1980년대에 다시 결정된 기본 프린터 DPI에서 파생되며 72 와 동일합니다. 즉, CSS 1 인치는 항상 72 포인트와 같습니다.

• 1 인치 = 72 포인트
• 1 포인트 = 1 ^인치 의 1/72

웹용 픽셀, 프린터용 도트

웹의 경우 DPI 단위는 의미가 없습니다. 웹 DPI는 CSS 인치와 CSS 센티미터를 계산할 때 이미 이야기한 다른 표준( 96 DPI)에 따라 정의됩니다. 이 때문에 웹에서 포인트 단위를 사용할 이유가 없습니다.

참고 : 1 포인트는 (CSS) 픽셀과 같지 않습니다.

• 1 포인트 = 1.333 픽셀
• 72 포인트 = 1 인치
• 72 포인트 = 96 픽셀

프린터

이 기사에서는 주로 웹에 절대 단위가 없는 이유를 보여주고 싶었습니다. 그러나 프린터에 사용하는 것은 어떻습니까? 프린터에 CSS 인치, 센티미터 또는 포인트 단위를 사용하는 이유가 있습니까?

내 인쇄 테스트

1980년대 DPI 표준이 프린터에서 올바르게 작동하는지 확인하기 위해 작은 테스트를 실행했습니다. 너비와 높이가 72 포인트인 상자와 너비와 높이가 1 인치인 두 번째 상자를 만들었습니다.

사무실에 있는 레이저 프린터로 이 두 상자를 인쇄했습니다. 다음은 프린터의 포인트 및 인치 테스트를 위한 내 Codepen입니다.

결과

이 데모를 레이저 프린터로 인쇄했습니다. 놀랍게도 72 포인트(또는 1 인치)를 사용하면 정확히 1 인치가 됩니다. 이것은 프린터의 경우 여전히 포인트, 인치, 센티미터와 같은 CSS 단위를 사용해야 하는 충분한 이유가 있음을 의미합니다.

프린터는 더 많은 DPI를 인쇄할 수 있지만 프린터에서 100% 확대/축소로 작업하는 경우 CSS의 72 포인트(또는 1 인치)는 실제 물리적 인치와 같습니다.

알림 : 이 문서는 프린터가 아닌 웹에 대한 절대 단위의 연결에 대해 자세히 설명합니다. 물론 결과는 프린터 유형에 따라 달라질 수 있습니다.

추천 자료 : CSS에서 HSL 색상 사용하기

웹에서 정확한 크기 만들기

CSS 픽셀 1 개당 물리적 ​​픽셀의 비율이 1.714 인 16인치 MacBook Pro를 보면 웹에서 크기를 정확하게 예측할 수 없습니다.

JavaScript의 window.devicePixelRatio 를 사용하여 16인치 MacBook Pro의 실제 장치 픽셀 비율을 추측하려고 하면 1.714 대신 2 라는 잘못된 비율을 반환합니다. (그리고 이것은 웹 브라우저 및 운영 체제의 확대/축소 상태를 고려하지 않은 것입니다.)

실제 절대 CSS 단위가 필요한 이유

사이드바 요소의 고정 크기를 정의하려면 CSS 픽셀을 사용합니다. 하지만 곰곰이 생각해보면 요즘 CSS 픽셀은 의미가 없습니다. 위에서 보았듯이 대부분의 스마트폰과 데스크톱에서 CSS 픽셀은 더 이상 장치 픽셀을 설명하지 않습니다.

이를 기반으로 CSS 픽셀이 웹에서 더 이상 진정한 의미를 갖지 않기 때문에 CSS 에 대한 실제 물리적 단위(실제 센티미터 또는 인치 단위와 같은)가 필요 하다고 생각합니다.

Firefox가 실제 물리적 밀리미터 단위( mozmm ​​)를 구현했지만 버전 59에서 제거했다는 점을 언급할 가치가 있습니다. 왜 제거했는지 모르겠습니다. 아마도 반응형 이미지, em 및 rem 단위와 같이 이미 CSS 픽셀에 의존하는 것이 많기 때문일 것입니다. 새로운 물리적 측정을 추가하려고 하면 해결하는 것보다 더 많은 문제가 발생할 수 있습니다.

웹 사람들은 픽셀 단위로 생각하는 데 너무 익숙해져 CSS 픽셀 단위가 장치 픽셀에 대한 연결이 끊어지더라도 계속 그 단위를 사용할 것입니다.

그리고 여전히 CSS 픽셀이 훌륭한 측정 단위라고 생각한다면 새로운 웹 개발자에게 이 단위가 실제로 측정하는 것을 설명하십시오.

현재로서는 CSS에서 물리적 크기를 설명할 실제 방법이 없습니다.

따라서 CSS 픽셀은 다른 모든 것을 제외하고는 최악의 절대 단위입니다.

요약

이 기사의 시작 부분에서 절대 CSS 단위가 새로운 종류의 상대 단위와 같다고 말했습니다. 우리는 CSS 픽셀로 시작했고 CSS 픽셀과 장치 픽셀의 차이를 보았습니다.

그런 다음 CSS 인치와 CSS 센티미터가 CSS 픽셀에서 직접 변환되고 실제 인치와 센티미터에 연결되지 않는다는 것을 알았습니다. 결국 우리는 포인트 단위에 대해 이야기했고, 이 단위가 웹에서 절대적인 의미가 없다는 점에 대해 다시 이야기했습니다.

마지막 단어

그게 다야. 이 기사를 즐기고 내 경험을 통해 배웠기를 바랍니다. 이 게시물이 마음에 든다면 그 소식을 듣고 공유해 주시면 감사하겠습니다.

참고문헌

• "CSS 길이 설명", Tim Chien, Robert Nyman, Mozilla Hacks
• "인치당 도트 수", Wikipedia
• "포인트(타이포그래피)", Wikipedia
• "CSS 값과 단위", W3C