CSS에서 여러개의 아이템을 균등 분할 시 소수점을 사용해야 균등하게 나눠지는 경우가 있다.
See the Pen ExapOaq by sel (@selucky) on CodePen.
예시로 3개를 나눌 땐 width: 33.33%, 6개는 width: 16.66% 등등.. 엄밀히 말하면 한치의 오차도 없이 “정확하게” 나눠지는 건 아니다. 100% / 2 = 50%는 정확히 나누어지지만, 100% / 3 = 33.33%는 소수점만큼의 공간이 남는 것임..
어느날 모든 너비값이 애매한 소수점말고 width: 50% 같이 정확하게 나눠진다면 얼마나 좋을까라는 생각이 들었는데, 유명한 방법인 calc 함수를 사용하면 되지만 IE 9까지만 지원되는 단점이 있다.
그래서 생각해낸 방법이 무엇이냐면 “태블릿 ~ 모바일에서 calc를 적극 사용해야겠다”…
위의 예시 코드를 보면 알겠지만, 각 아이템을 개발자도구로 찍어보면 33.33%는 165.97px, calc(100% / 3)은 166px로 확연한 차이를 볼 수 있다.