[HTML/CSS]border의 픽셀이 깨지는 오류 해결

자세히 보면 가로선과 다르게 픽셀이 선명하지 않다

어떤 오류인지?

`border-left`를 넣은 `div`가 여러 개 있었는데 소수점 값이 없음에도 불구하고 `border` 픽셀이 자꾸 깨지는 오류가 있었다.

 

왜 발생했는지?

`position, display, margin`등 다 조절해 봤는데도 해결이 안 되었는데 `transform: translate`기능을 끄니 해결되었다. 영역을 가운데로 맞추기 위해 `top:50%, left:50%`값을 주고 `transform: translate(-50%, -50%)`를 사용했는데 퍼센트를 사용하니 값이 정수로 떨어지지 않고 소수점으로 들어간 탓이었다. 다음부터는 % 단위 사용에 있어서 주의하자