CSS 에 있는 단위는 아래와 같다.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
CSS values and units
This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through th
developer.mozilla.org

여기 있는 inch 를 쓰면 가 우리 실제 세상의 1 inch 와 같은 길이로 화면에 보일까? CSS 에서 1px 을 쓰면 화면의 1px 길이가 될까?
이러한 내용을 알아보자.
일단 시작 전에 단위, 표현을 명확히 해야한다.
단위 정리
1. CSS 의 px 은 CSS pixel 이라고 하자.
2. 우리 모니터, 스크린도 여러 개의 pixel 로 구성되어 있는데, 이 하나하나의 pixel 을 device pixel 이라고 하자.

3. CSS 의 inch 란 단위도 우리 현실에서의 1 inch 와 다르게 생각하자. CSS 의 단위인 inch 를 CSS inch 라고 하자. 현실 세계에서의 1 inch 를 구분해서 1 physical inch 라고 하자.
4. 그 외, css 에서 쓰는 단위는 다 실제 세계의 단위랑 구분해쓰자.
1 CSS pixel
1 CSS inch
1 CSS pt
1 CSS mm 로.
5. 현실에서의 길이를 phyiscal mm, phyiscal inch 라고 하자.
6. Reference pixel 이란 개념이 있다. 이 것은 디바이스마다 다르게 고정되어 있다. 즉 실제 세계에서 몇 mm 일지는 device 마다 다르다.
기억할 규칙
1. 1 CSS pixel 은 1/96 CSS inch 다. 사실 CSS 의 단위들은 다 서로 연결이 되어있다. 1 CSS inch 는 2.54 CSS cm 고, 96 CSS px 이고... 등등.

즉 1 CSS pixel 이든, 1 CSS cm 든 위에 나온 어떤 단위든 실제 얼마로 보일지가 정해지면 나머지가 실제로 얼마의 길이로 보일지도 다 정해진다.
2. 1 CSS pixel 은 1 device pixel 과 다르고, 실제 1 CSS pixel 이 얼마의 physical mm 가 될지는 모른다.
3. device 마다 resolution 이 다를텐데, resolution 에 따라 1 CSS pixel 을 얼마의 길이로 표현할지 다르다. low resolution 일 때는, 1 CSS pixel 이 1 reference pixel 이 된다. high resolution 에서는 1 CSS inch 를 1 physical inch 로 만들어준다.
4. 즉 1 CSS pixel 은 디바이스에 따라 다른 physical 길이로 보이는 가변 길이다.
Reference pixel 의 이해
1 reference pixel 은 96dppi, arm distance 일 때 0.26 physical mm 가 되는 크기다. 이게 무슨 말이냐면, 96 dppi(device pixel per physical inch, 즉 실제 세상의 inch 안에 몇 개의 device pixel 을 가지고 있는지. dppi 가 정해지면 1 device pixel 의 physical 크기가 얼마가 될지 결정된다) 를 가진 디바이스(폰이든, TV든, 모니터든) 가 있다고 가정하자. 이 때 이 디바이스는 보통 팔 한 개 정도 거리에서 보도록 타겟이 맞춰졌다고 하면 이 길이를 arm distance(28 inches == 71cm) 라고 부르자. 96 dppi 면 하나의 device pixel 의 physical cm 는 2.54cm / 96 인 0.026 physical cm(0.26 physical mm) 가 된다.
96 dppi 화면을 팔 하나 쯤 떨어진 곳에서 보이는 1 device pixel 의 physical mm 는 0.26 mm 이란 것이다.
만약 다른 device 가 더 멀리 두고 보는 스크린이라면(폰보다는 TV 가 더 멀리 보는걸 전제하고 만들어질테니), 예를 들어 28 inches 보다 멀게, 140 physical inches 떨어져서 보는 스크린으로 디자인 됐다고 하자. 그러면 눈으로 보기에 얼마의 physical mm 가 돼야 아까 28 physical inch 떨어져서 96dppi 스크린을 볼 떄의 하나의 1 deivce pixel 크기와 동일하게 보일까? 멀 수록 작게 보이므로, 멀리 있는 스크린은 더 크게 표현해줘야 될 것이므로, 비례식을 세워 보면 1.3 physical mm 가 된다. 이렇게 거리에 따라 실제(physical) 길이가 달라지게 된다.
이렇게 28 physical inch 떨어진 곳에서 0.26 physical mm 를 볼 때 눈으로 보이는 그 상대적인 크기를 1 reference pixel 이라고 한다. 이 상대적 크기를 거리가 달라질 때도 유지하려면 physical mm 가 그에 맞춰서 달라져야한다. (여기서 주의할 점은 하나의 device 는 이미 눈에서 부터 얼마 떨어져서 볼지 정해져있다. 내가 지금 들고 있는 스마트폰을 더 가까이 보고 멀리보고의 문제가 아니다. 이미 정해져 있고 그걸 구입한거다)

즉 1 reference pixel 을 표현하기 위해 필요한 device pixel 은 스크린마다 달라진다(눈으로부터의 거리, dppi 에 따라 달라진다)
1 CSS pixel 은 실제로 얼마의 phyiscal mm 로 보이게 될까?
device 의 resolution 에 따라 1 CSS pixel 을 얼마의 physical 길이로 표현할지 다르다. low resolution 일 때는, 1 CSS pixel 이 1 reference pixel 이 되도록(다시 말하자만 device 마다 1 reference pixel 의 physical 크기는 다르게 정해져있다) 화면에 그려준다. 만약 device 의 resolution 이 high resolution 이라면, 1 CSS inch 를 1 physical inch 로 디바이스에 표현해주고, 96 CSS pixel == 1 CSS inch 라고 고정되어 있으므로, 1 CSS pixel 은 (1 / 96) physical inch 가 된다.
그러므로, 1 CSS inch 는 스크린의 종류에 상관 없이 항상 physical inch 가 같다.
그러면 1 CSS pixel 의 실제 크기(physical mm) 는 아래와 같은 식으로 구할 수 있겠다. device target distance 와 device dppi 는 device 마다 달라질 것이고 나머지는 다 고정이다.

그런데 조금 문제가 있다. 결국 두 디바이스가 똑같은 dppi 와 resolution 을 가지더라도, 어떤 방식으로 1 CSS px 을 스크린에 표현하는지 모른다(high resolution 인지 low resolution 인지)
그리고 screen device 의 타겟 eye-to-screen distance 값도 모른다. 그래서 내 스크린을 가지고 정확히 얼마로 보일지 계산하기가 어렵다. 내 screen device 의 1 reference pixel 의 크기를 알 수가 없으니 말이다.
보통 가까이 보도록 설계된 스크린이 high resolution 이고, 그래야 1 CSS == 1 physical inch 가 된다.
일단 방향성만 보면 직관적으로 정리가 된다, 멀리 보도록 디자인된 화면일 수록 1 CSS pixel 이 크게 표현되고, 가까울 수록 작게 표현된다는 것. 그리고 dppi 와 상관 없이
실제 계산해보기
내 모니터 화면은 resolution 이 1600 x 900 이고, 화면 대각선 physical inch 가 17.3 physical inch 다.
이러면 내 화면의 dppi 값이 106 임을 알 수 있따. 그런데,

이게 low resolution 일까? high resolution 일까? 일단 high resolution 이라면 2 physical inch 로 보여야한다.
그리고 low resolution 이라면 1 CSS pixel == 1 reference pixel 이다. 그런데 1 reference pixel 은 내 모니터가 얼마 떨어져서 보기로 했는지(eye to screen 거리)에 따라 다른 physical mm 가 된다. 근데 이 모니터는 arm distance 보다 멀리 볼지 가까이 볼지 모르겠다. arm distance(71 physical cm) 보다 조금 작다고(50 physical cm) 가정해보자. 그렇다면 reference pixel 의 상대 크기를 유지하기 위해 0.26 physical mm 보다 작아지게 된다. (0.26 physical mm / 71 * 50 == 0.1831 physical mm 가 될 것.). 따라서 자로 재보면, 96 css pixel 이 1 css inch 이므로, 96 * 0.26 physical mm == 24.96 physical mm == 2.496 physical cm 보다 작은 96 * 0.1831 physical mm == 17.5776 physical mm == 1.75776 physical cm 가 된다.
아래와 같이 2 css inch x 2 css inch 로 박스를 그려보자.
<!DOCTYPE html>
<html>
<head>
<style>
#id_child {
width: 2in;
height: 2in;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div id="id_child">
2 css in x 2 css in
</div>
</body>
</html>
여기선 2 css inch 이므로 1.75776 * 2 physical cm 인 3.51552 physical cm 가 돼야 한다.
실제로 자로 재보면 4.5 physical cm 가 된다. 차이가 좀 난다.

이러면 실제 2 physical inch 보다 작으므로 high resolution 방식으로 1 CSS inch 을 랜더링 한 것은 아닌 것으로 보인다. 그러면 2 reference pixel * 96 의 길이로 rendering 이 됐는데, distance 가 71 physical cm 보단 가깝고, 50 physical cm 보단 멀다. 내가 eye-to-screen distance 를 너무 짧게 가정한 것 같다.
다시 역산을 해보면...
eye-to-screen distance
-------------------------- * 0.026 physical cm * 96 * 2 == 4.5 physical cm
71 physical cm
위의 식을 풀면 eye-to-screen distance 는 64 cm 다.
>>> 4.5 / 96 / 2 / 0.026 * 71
64.00240384615385 physical cm.
OS 등에 따라서 오차도 존재하기도 하고 정확하지 않을 경우도 있다고 한다.
'개발 카테고리' 카테고리의 다른 글
html 소스 위에 <!DOCTYPE html> 안 쓰면? (0) | 2020.06.16 |
---|---|
Collapsing Margin 마진 겹침 현상 (0) | 2020.06.16 |
Elastic IP 이것 모르면 돈 낼 수 있습니다 (0) | 2020.05.25 |
Ubuntu + Anaconda + Apache2 + Django 사용하기 (0) | 2020.05.25 |
구글 검색엔진에 내 사이트 안 보이도록 하기 (0) | 2020.05.18 |