CSS는 1px 이내의 움직임을 구현합니다.

이전 기사에서는 인라인 요소의 수직 정렬 솔루션에 대해 이야기했습니다. 관심이 있으시면 제 이전 글을 읽어보실 수 있습니다. 이전 글에서는 1px 이내의 이동 문제에 대해 언급했습니다. 이 문서에서는 한 픽셀 내의 문제에 대한 솔루션을 제공합니다.

Retina 화면에서 1픽셀 테두리 문제를 본 적이 있을 것입니다. 이는 모바일 요소가 아니라 테두리 너비입니다.

뭐? 테두리가 1px 미만인가요?

예, 누군가가 이전에 관련 솔루션을 제공했고 솔루션이 많기 때문에 여기서는 구현 원칙을 반복하지 않겠습니다. 관심이 있으시면 해당 페이지로 이동하실 수 있습니다.

Retina 화면이 있는 모바일 기기에서 진정한 1px 라인을 구현하는 방법은 무엇입니까?

웹 포인트를 5픽셀 이동하는 비결

이 글을 읽고 많은 깨달음과 감탄을 얻었습니다. 이동 위치(위, 오른쪽, 아래, 왼쪽), 여백, 패딩, 수직 정렬을 구현하는 방법에 대해 설명합니다.

위의 방법은 특정 단위(px, em, rem 등)로 이동할 수 있는 방법 중 일부일 뿐입니다.

실습 원칙에 따르면 위의 방법은 그렇지 않습니다. 가능하지만 최신 chrome에서는 0.5px 미만이면 0, 0.5px 이상이면 1px가 됩니다.

사례가 너무 간단해서 데모는 하지 않겠습니다. 관심 있으신 분들은 직접 해보시면 될 것 같습니다.

그렇다면 특정 단위로 움직이는 다른 속성은 무엇일까요?

해결책

아마도 이미 변환의 번역 속성에 대해 알고 계실 것입니다. 그렇죠, 1px 내에서는 움직일 수 있어요!

기본 구문:

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

<div class="parent">
  <div class="child-first"></div>
  <div class="child-second"></div>
  <div class="child-third"></div>
</div>

<style>
  .parent {
    width: 310px;
    height: 150px;
    background-color: #666;
  }

  .parent div {
    display: inline-block;
  }

  .child-first {
    width: 100px;
    height: 100px;

    margin-top: .5px;

    transform: translateY(.3px);

    background-color: #f66;
  }

  .child-second {
    width: 100px;
    height: 100px;

    transform: translateY(.5px);

    background-color: #ff0;
  }

  .child-third {
    width: 100px;
    height: 100px;

    transform: translateY(1px);

    background-color: #06c;
  }
</style>

여기서 관찰하기 쉽도록 레이아웃을 인라인 블록으로 변경했습니다. 다시 돌아가서 코드를 살펴보니 문제가 없는 것으로 나타났습니다. 그러면 무엇이 이렇게 거리를 두게 만들었나요?

은 공백인가요? 인라인블록 사용시 코드 들여쓰기나 줄바꿈(의도하지 않게 공백이 추가되는 현상)에 주의하세요.

다음과 같이 수정

<div class="parent">
  <div class="child-first"></div><div class="child-second"></div><div class="child-third"></div>
</div>

여기서 작은 블록의 색상은 특이하게도 브라우저 보기는 최대배율로 확대해서 잘 안보이시면 직접 보시길 추천드려요

요약

여기까지 입니다. 결국 모두가 토론할 수 있습니다. Orange는 지금까지 이 솔루션만 찾았습니다. js를 기반으로 화면을 판단한 다음 0.5픽셀의 오프셋을 제공할 수도 있습니다. 개인적으로 이 방법이 더 간단하다고 생각합니다.