css에서 소수점 px에 관해서

우테코를 하면서

 

소수점 픽셀을 무심결에 사용했었던 적이 있다.

(나는 css와 js가 우테코 준비하면서 시작해서 경력이 짧다.. 이런거 첨이야..)

 

브라우저에서 적용이 안되는것 같았고, 코드리뷰를 받았을 때 수정해달라는 요청이 있었다.

 

 

 

 

근데 궁금했다.

 

분명 1px은 크기인데, 소숫점을 나타낼 수는 없는걸까?

 

글들을 많이 찾아봤다.

 

'반올림 시켜준다' 라는 말이 정말 많았다.

 

 

 

답변이 시원찮아서...(왜냐면 브라우저는 대기업에서 만드는건데, 소수점 픽셀정도는 지원해줘도 괜찮잖아?)

 

재밌는 글을 찾아서 직접 실험해 봤다.

 

 

 

실험코드는 다음과 같았다. (리액트로 작업중에 받아서 하던 플젝에서 시험해서 리액트 코드다)

const arr = Array.from({ length: 100 }, (v, i) => i);

<div className='testcon'>
          {arr.map((e, i) => (
            <div key={i} className='test'></div>
          ))}
 </div>
 <div className='testcon'>
          {arr.map((e, i) => (
            <div key={i} className='test2'></div>
          ))}
 </div>

.testcon {
  display: flex;
}

.test {
  width: 0.5px;
  height: 30px;
  background-color: #333;
}

.test2 {
  width: 1px;
  height: 30px;
  background-color: #333;
}

 

 

각설하고 설명하면

 

A물체는 0.5px짜리 100개를 이어붙였고

B물체는 1.0px짜리 100개를 이어붙였다.

 

만약 0.5px이 1px로 반올림 되는거면 둘의 길이가 같아야 할 터이다.

 

.

 

.

 

.

 

 

 

 

근데 이렇게 나왔다.

 

길이가 대충봐도 2배차이가 난다.

 

이건 다른 글들과 내 생각을 합친 결론인데,

 

내 생각이 맞다면 차지하는 크기는 0.5가 맞지만 화면상에

표현할 수 있는 크기가 1px 밑이 불가능 하기 때문에 못보여 주는것 같다.

px을 안쓰는게 제일 좋아보이지만 '적용이 안된다' 라는 말은 반은 맞지만 반은 틀릴수도 있겠다는 생각이 든다!!

 

이 글을 읽는 당신은 나와 같이 소숫점을 적용하지는 않기를 바라며...

 

영어로 된 source들도 제대로 답변이 시원찮고 그래서 직접 정리해봤다.