Point, PT 기본 개념
포인트는 타이포그래피에서 사용하는 가장 작은 인쇄 단위로, 파이카를 잘게 나눈 것입니다.
포인트는 해상도에 따라 크기가 달라지거나 변하지 않습니다. 더 선명하거나 흐려질 수 있지만
인쇄할때 쓴 포인트는 변하지 않게 됩니다.
Pixel, PX 기본 개념
픽셀은 디스플레이에서 가장 기본이 되는 단위입니다. 픽셀은 점의 개수를 뜻합니다.1px은 점 한개를 뜻하기
10px은 10개의 점이 모인것입니다.
픽셀이라는 단어는 우리말로 화소라고 불리웁니다. 화소수가 높을수록 해상도가 높은 영상을 볼 수 있는데
같은 면적 안에 픽셀, 화소가 더 조밀하게 많이 들어 있을수록 그림이 선명하고 정교해집니다.
pt와 px
1. 옛날옛적
(애플은 72dpi(dot per inch)해상도 기준을 처음으로 사용)
애플 맥 컴퓨터와 마이크로소프트사의 윈도우 체제에서 각각 다릅니다.
애플에서는 과거에 인쇄에 쓰이던 point를 모니터상에서도 똑같은 크기로 가져 오기 위해서
1pt = 1/72inch 로 나누는 기준을 정해서 사용했다고 합니다.
(마이크로소프트사는 Window에서 96ppi해상도를 사용)
마이크로소프트사에서는 우리 눈이 바라보는 시각이 모니터상에서 떨어져 있어서 인쇄물에 쓰이는 것보다는
크게 보여야 가독성을 높일 수 있다고 보고 1pt=1 / 96inch로 나누는 기준을 정했다고 합니다.
1인치를 표시하기 위해 맥에서 72px이 필요하고, 윈도우에서는 96px이 필요하며 이런 기준이 다르기 때문에
1pt가 나타나는 크기는 해상도 별로 달라지게 되었습니다.
예를 들어 9pt가 맥에서는 9px로 나타나지만 윈도우에서 보면 9pt = 12px 정도로 조금 더 커집니다.
2. 시대의 변화
그러나 애플은 새로운 디스플레이를 선보입니다. 레티나 디스플레이 인데요
레티나 디스플레이는 2010년 아이폰4를 공개하면서 처음으로 사용한 고밀도 화면 디스플레이를 말하는데
화소수가 72dpi에서 220dpi, 270dpi 등으로 늘어나면서. 1인치당 픽셀수가 더 오밀조밀하게 밀집하게
되었습니다. 그러다보니 과거에 1px=1pt로 사용하던 애플은 방식은 이제 고해상도가 되면서 1pt=2px로 늘어났습니다.
또 레티나 HD 디스플레이가 등장하면서 1pt=3px로 더 픽셀수가 많아지게 됩니다.
3.결론
즉 결론적으로 pt와 px은 똑같은 사이즈가 아닙니다.
제품들마다 화면 해상도 별로 72ppi, 96ppi, 140ppi 등 1인치당 픽셀이 얼마나 밀집되어 있는지에 따라서 px
은 달라질 수 있습니다.
웹브라우저에서 쓰이는 px 단위
공부를 하기 위해 px을 검색해보면 위에 pt와 px을 절대값 상대값등으로 부르는걸 많이 찾았는데요.
해상도별로 px의 수가 달라지는 것을 보면 pt는 절대적인 값, px은 상대적인 값이라고 생각할수 있지 않을까 했지만
웹브라우저에서 CSS에 쓰이는 px의 단위는 절대값으로 지정되어
브라우저나 뷰포트의 크기에 상관없이 고정된 값으로 렌더링이 됩니다. 그래서 CSS상에서는 px을 절대적인 값이라고 부릅니다.
rem은 최상위에 있는 폰트 사이즈를 지정하면 그 아래에 속한 폰트 사이즈를 rem 단위로 사용할 경우
최상위 폰트 사이즈만 변경하면 사이트 전체의 폰트를 조정할 수 있다는 점에서 반응형 웹 브라우저에서 많이 사용하게 됩니다.
최상위 폰트는 보통 html 소스에 들어가 있는 font-size 값을 기준으로 사용하는데
이 값을 임의로 지정하지 않는 경우에는 브라우저 기본값인 16px로 나타나게 됩니다.
(덧붙일 자료가 있으면 코멘트 주세요~)