CSS의1px이 화면 물리 점 하나와 항상 같지는 않습니다
CSS 픽셀은 CSS의 px 길이 단위이고 장치 픽셀은 디스플레이의 물리 표시 단위입니다. 화면 밀도·배율 등에 따라 두 단위의 대응이 달라질 수 있어 같은 숫자를 그대로 대입하지 않습니다. CSS 인치와의 단위 관계도 화면을 자로 잰 물리 인치 보장으로 해석하지 않습니다. 근거: MDN CSS pixel·devicePixelRatio, 2026-11-04.
근거: MDN CSS pixel · 2026-11-04 확인
CSS100×60과 캡처200×120을 실제로 보았습니다
격리된 로컬 브라우저에 deviceScaleFactor=2를 지정하고 CSS100×60 상자를 만들었습니다. 요소 경계는100×60으로 읽혔지만 요소 PNG 캡처는200×120픽셀이었고 devicePixelRatio는2였습니다. display-examples.json에 보존한 모의 조건의 결과이며 특정 물리 모니터를 측정한 값은 아닙니다. 이 차이가 같은 px라는 단어를 구분해야 하는 이유입니다.
근거: MDN devicePixelRatio · 2026-11-04 확인
흐린 자산은 표시 크기와 원본 치수를 먼저 대조합니다
이미지가 몇 CSS 픽셀로 보이고 원본이 몇 이미지 픽셀인지, 브라우저 배율과 선택한 자산은 무엇인지 기록합니다. CSS에서 작게 표시한다고 원본 해상도가 자동 늘지는 않습니다. 반대로 큰 원본이 있어도 잘못된 자르기·축소·압축이면 기대 품질과 다를 수 있습니다. 실제 사용 조건에서 확인하지 않고 숫자만으로 선명함을 보장하지 않습니다.
근거: MDN CSS pixel · 2026-11-04 확인
성공은 단위 표기와 실제 가독성이 모두 맞는 상태입니다
레이아웃 문서에는 CSS px, 이미지 파일에는 픽셀 치수, 인쇄라면 별도 물리 조건을 적습니다. 확대·작은 화면에서 글자와 선이 읽히는지 허가된 환경에서 확인합니다. 실패 문의에는 표시 크기·원본 크기·배율·관찰 화면을 구분해 전달하며 이 글의 작은 시험을 전체 사이트나 기기 검증으로 확대하지 않습니다.
원문으로 이어 읽기
확인일: 2026-11-04. 정의와 적용 범위, 발행일과 판본을 함께 살펴봅니다. 원문이 존재한다는 사실만으로 개별 주장의 정확성과 재사용 권리가 자동 보장되지는 않습니다.