완벽한 픽셀

CSS는 웹에 아름다움과 생명력을 부여하는 강력하고 복잡한 언어입니다. 하지만 컴퓨터를 4층 창문 밖으로 내던지고 다시는 프런트엔드를 건드리지 않고 싶게 만들 수도 있습니다.


CSS에 대한 대부분의 좌절은 이해 부족에서 비롯되며, 이는 종종 웹 개발의 사후 생각으로 가르치기 때문에 의미가 있습니다. CSS가 페인트칠이 아닌 언어처럼 취급된다면 그 가치를 더 높이 평가할 것입니다.



우리가 작성하는 모든 CSS는 결국 사용자가 보고 참여할 수 있도록 화면에 표시되는 픽셀로 요약됩니다. 그러나 pixel라는 용어는 스타일시트의 값에 대해 이야기할 때 오해의 소지가 있을 수 있습니다. "픽셀"이 화면에 표시될 수 있는 가장 작은 눈에 보이는 양이라는 것은 당연합니다. 하지만 실제로 픽셀은 정말... 정말 작습니다. (1/96인치인 것 같지만 누가 세는지)

Here's what the spec says :

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

나는 그 설명에 이해가 되지 않았기 때문에 하나의 노란색 CSS 픽셀을 표시하는 서로 다른 물리적 화면의 빅풋 같은 사진을 몇 장 찍었습니다.




구형 LG 모니터, iPhone 8+, 2018 15인치 MacBook Pro입니다.

1 css 픽셀은 LG의 경우 1 화면 픽셀, iPhone의 경우 약 6 또는 8, MacBook의 경우 4 화면 픽셀과 같습니다. 추측일 뿐이지만 중요한 부분은 다음과 같습니다.

그래서 뭐?

도구가 작동하는 방식과 도구를 사용하는 것이 가장 좋은 시기를 이해하는 것이 중요합니다. px는 바다에 있는 유일한 물고기가 아닙니다.

The CSS px value should be used when you need an absolute unit of measurement for an element that will not fluctuate in size on your page. (Or it will change very little)

CSS에는 px가 제공하지 못하는 방식으로 유연성과 응답성을 제공할 수 있는 다른 측정 단위가 있습니다.

div {
  height: 10em;
}

div {
  height: 10rem;
}

div {
  height: 10vh;
}

div {
  height: 10%;
}

em : 상위 요소의 글꼴 크기
rem : 루트 요소의 글꼴 크기
vh : 뷰포트 높이의 1%
% : 일반적으로 가장 가까운 "크기"상위 요소의 백분율(이 요소에는 많은 주의 사항이 있음)




내 개인적인 생각으로는 가장 유연하고 제어할 수 있는 CSS 측정 단위가 필요한 경우 rem가 가장 적합합니다. em 보다 더 예측 가능하며 다른 화면에 대한 레이아웃이나 크기를 변경할 때 응답성을 쉽게 만듭니다. 나는 여기서 잡초에 들어 가지 않을 것입니다. this wonderful article에 매우 철저하게 설명되어 있습니다.

CSS 측정 단위와 관련하여 약간의 추가 지식이 있기를 바랍니다. 건배! 🍻


Clint Bellanger의 픽셀 아트