CSS 무한대: 브라우저 해석의 기묘한 여정

2025-08-21
CSS 무한대: 브라우저 해석의 기묘한 여정

이 글에서는 CSS 계산 함수에서 `infinity` 키워드의 기묘한 동작을 탐구합니다. `text-indent`, `word-spacing`, `letter-spacing`과 같은 속성에 `infinity`를 적용함으로써 저자는 서로 다른 브라우저가 무한 값을 처리하는 방식의 불일치를 발견했습니다. 하지만 시각적인 결과는 일관되게 수평 오버플로우로 이어집니다. 더욱 흥미로운 점은 `z-index`에서 사용할 경우 `infinity`의 계산 값이 모든 브라우저에서 최대 정수 값으로 제한되어 예상치 못한 스태킹 순서가 발생합니다. 마지막으로 저자는 애니메이션 지속 시간에 `infinity`를 시험해 보고 이것이 매우 긴 시간으로 변환되고 심지어 Safari에서 페이지가 응답하지 않는다는 것을 알게 되었습니다. 요약하자면, 이 실험은 브라우저가 CSS에서 무한 값을 처리하는 다양한 전략과 몇 가지 놀라운 부작용을 보여줍니다.

개발