블로그 웹 페이지의 하나의 요소에 상하 border 값으로 각각 1px로 설정하였습니다.
크롬 웹 브라우저를 띄우고 개발자 도구로 확인하니까 위의 캡처 이미지와 같이 0.727픽셀로 표시됩니다.
CSS 파일에 "border: 1px"로 지정한 내역이 반영되지 않은 것입니다.
웹 브라우저와 사용하는 기기의 OS 설정 값을 조사하고, 변경하면서 결과를 눈으로 확인하면서 이유를 찾았습니다.
일단, 웹 브라우저의 화면 확대 및 축소 그리고 기기의 OS에서 설정하는 글자 크기 설정과 화면 확대 및 축소 기능에 영향을 받는다는 것을 확인하였습니다.
1. OS(MS Windows 11)의 시스템 / 디스플레이 설정 값 변경
① 텍스트 및 기타 항목의 크기 변경
② 연결된 디스플레이의 해상도 변경
- 기본 값으로 100%와 모니터 기본 해상도를 사용하지 않을 경우, CSS에 지정한 border 값이 웹 브라우저의 화면에 다르게 반영됩니다.
③ OS의 글자(텍스트) 크기를 변경하여도 웹 브라우저에 반영되는 border 값에 영향을 미칠 수 있습니다.
④ OS의 디스플레이 해상도를 권장 값(모니터 고유 해상도)을 사용하지 않을 경우 웹 브라우저에 반영되는 border 값에 영향을 미칠 수 있습니다.
⑤ 글자 크기 변경뿐만 아니라, "글자 크기, 앱, 기타 항목의 크기"를 일괄로 지정하는 "배율"을 변경할 경우에도 웹 브라우저에 반영되는 border 값에 영향을 미칠 수 있습니다.
2. 웹 브라우저 내부의 화면 확대/축소 기능을 100% 이외의 값으로 지정할 경우에도 border 값의 실제 반영 수치에 영향을 미칠 수 있습니다.
웹 브라우저의 확대/축소 기능은 브라우저의 종류에 따라서 다른 결과가 나타납니다. FireFox, 그리고 크로미움 렌더링 엔진을 사용하는 구글 Chrome과 MS Edge가 다른 양상을 보입니다. OS 디스플레이 설정 값이 이미 웹 브라우저의 디스플레이 렌더링에 영향을 미치고 있기 때문에, 이것을 자사가 개발하는 웹 브라우저와 결합하는 방법은 단일화가 불가능합니다. 게다가 사용자의 개별적인 설정 값과도 연결되기 때문입니다.
3. 추가
이 글은 웹 브라우저에 내장된 개발자 도구의 판단을 기준으로 작성하였습니다.
개발자 도구가 자체 기준에 의거하여 판단하고 제시하는 결과가 잘못되었을 경우도 항상 염두에 두어야 합니다. 실제 모니터 화면에 렌더링 한 현황이 올바를 수도 있다는 뜻입니다.
"top: 0"를 지정하여 상단에 완벽하게 밀착되어야 할 요소가, Chrome과 Edge에서는 약간의 여백이 뷰포트 상단과 요소 사이에 발생하여 페이지를 위아래로 스크롤할 때마다 하위 레이어의 글자와 이미지가 상단 틈으로 보이는 것입니다.
FireFox에서는 그러한 오류 현상이 발생하지 않았습니다. 해당 웹 브라우저에 내장된 개발자 도구에서도 위에 거론한 border 1px 값이 정확하게 렌더링 된 것으로 판정하였습니다.
다른 종류의 OS나 웹 브라우저에서는 다른 형태로 렌더링 될 수도 있습니다. 그리고 프로그램으로 진단한 그 결과가 실제와는 다를 수도 있습니다.
CSS 길이나 단위 지정이 실제 렌더링에 반영된 결과의 상이성은 border뿐만 아니라 다른 속성에서도 발견됩니다.
댓글