화면크기가 달라지면 1, 2픽셀 수준의 작은 크기의 선들이 어긋나요

조회수 127회

1,2 픽셀 수준으로 선을 만들고 화면 배율을 90%센트 110%센트 등등으로 바꾸면 어느선은 굵어지고 어느선은 얇아지고 하는대 어떻게 안바뀌게 할 수 없나요?

  • 모든 '선' 요소의 굵기 단위를 통일하면 되는 문제입니다. https://codepen.io 같은 곳에 데모 올려주실 수 있나요? 엽토군 2019.8.6 13:18
  • https://codepen.io/anon/pen/ympqaV 에다가 매우 간단하게 만들었습니다. 화면배율을 150%정도 확대하면 그떄부터 크기가 달라지기 시작하는 것 같습니다. 김기용 2019.8.6 17:42
  • 어렵네요. background-color 대신에 border-bottom: 1px solid #000; 으로 선을 그리면 굵기가 일정하긴 합니다. Daegi Kim 2019.8.6 18:18

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    찾아보니, 해당 이슈는 순전히 웹브라우저가 고해상도 모니터/확대환경 에서 1픽셀을 어떻게 렌더링할 것이냐에 달린 문제 같습니다.

    https://stackoverflow.com/a/42718300

    ... So although your 10px font-size is now really being rendered as 15px, it still shows as 10px in the inspector. To show you that the border has not been scaled up, the 1px is divided by 1.5, giving 0.667px.

    ... 따라서 폰트 자체는 10px이지만 실제로는 15px로 보여지고 있으므로, 개발자도구에서 검사해 보면 10px이라고 표시가 되지요. 테두리 요소가 확대되었다는 사실을 알려주기 위해서 1px은 1.5로 나눗셈되어야 합니다. 그러면 0.667px이 나오고요.

    PS. 이유는 모르겠는데 그냥 직감따라 해보고서 발견한 사실: 현재 데모의 .boxLine 요소에 display: inline-block; 속성을 추가하면 문제가 좀 나아지는 것처럼 보입니다.

    PS2. 왜 height: 1px;로 1픽셀짜리 선을 긋고 계신가요? 윗분 댓글처럼 border-bottom: 1px 어쩌구를 쓰면 될 텐데요.

    • 화살표를 css로 그렸을때 생긴 문제인대 border-bottom을 주면 세로길이를 0px로 줘도 선의 위치가 원했던 위치와 미묘하게 다르게 나와서 저렇게 했습니다만.. 앞으로는 border로 주고 위치는 따로 다시 맞춰야겠내요 김기용 2019.8.6 19:05
    • 도형을 그리고 계신 거라면 svg를 사용하세요... 엽토군 2019.8.6 19:35

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.