과거 웹 개발의 기묘했던 CSS 속성들
CSS Curiosities of the Past
Hacker News웹 개발 초창기에는 브라우저마다 CSS 해석 방식이 달라, 표준화되지 않은 수많은 해킹 기법들이 필수적이었습니다.
- 과거에는 `!important` 오용, 특정 브라우저 감지 선택자, 전용 필터 등 비표준 속성 사용이 일반적이었으며, 이는 웹 레이아웃 구현의 핵심이었습니다.
- 이러한 해킹들은 각 브라우저 엔진의 버그나 미흡한 기능을 우회하기 위한 임시방편이었으나, 시간이 지나며 표준화되었습니다.
- 웹 기술은 끊임없는 발전과 표준화를 거쳤으며, 현재는 공식 CSS 속성과 검증된 프레임워크 사용이 필수적입니다.
웹 초창기에는 브라우저마다 CSS 해석 방식이 달라, 표준화되지 않은 수많은 해킹 기법들이 필수적이었습니다. 예를 들어, `*width`, `_width`, `-width`와 같이 별표나 언더바를 접두사로 붙인 속성은 대부분의 브라우저에서 유효하지 않았으나, Internet Explorer 7 이전 버전에서는 유효하게 처리되는 경우가 있었습니다. 또한, 느낌표(!)를 접두사로 사용하면 거의 모든 텍스트 문자열이 `!important`처럼 취급되어 특정 브라우저에서만 스타일을 강제 적용하는 데 활용되기도 했습니다.
레이아웃 문제를 해결하기 위해 개발자들은 해당 속성이 없으면 문제가 발생하는 'hasLayout' 개념을 우회하고자 `zoom: 1;`과 같은 트릭을 사용했습니다. 또한, 특정 브라우저 환경에서만 스타일을 적용하려면 문서 레벨의 복잡한 선택자를 이용해야 했으며, 예를 들어 Internet Explorer 6에서는 `* html {}`와 같은 방식으로 브라우저를 감지하는 것이 일반적이었습니다.
더 나아가, CSS Expressions는 CSS 내에서 JavaScript 코드를 실행할 수 있게 하는 비표준 기능으로, 초기 레이아웃 구현의 어려움을 해결하려 했습니다. 또한, 오파시티나 그라디언트 같은 시각 효과를 위해 마이크로소프트가 DirectX 기반의 전용 필터 속성(`filter: alpha(...)`)을 도입했으며, 이는 웹 표준이 확립되기 전까지 브라우저별로 복잡한 방식으로 사용되었습니다.