JavaScript와 CSS를 하나의 파일안에서 사용하기

Ajaxian에 재미있는 기사가 올라왔습니다.
JavaScript와 CSS를 하나의 파일로 쓰는 방법에 관한 기사(Squeeze CSS and JS into one file)인데요. 브라우져의 JavaScript파서와 CSS파서가 <!--에 대해서 동일하게 주석(또는 무시)처리를 한다는 점을 이용하였더군요.

<!-- /*
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

- CSS 파서의 경우 <!--를 만나는 경우 무시를 해버립니다.
- JavaScript 파서의 경우 <!--를 만나는 경우 한 줄을 주석처리합니다.

따라서, 위의코드를 CSS파서에서 보면 다음과 같이 인식을 합니다 .

<!-- /* CSS파서는 여기를 주석처리 합니다.
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

<!--를 무시하고 /* */ 부분을 주석처리하고 남은 나머지 부분을 CSS로 인식합니다.

반면에, JavaScript 파서에서는 다음과 같인 인식을 합니다.

<!-- /*
    function t(){}
<!-- */
<!-- body {background-color:Aqua;}

<!-- 부분을 한 줄 주석으로 판단하고 남은 부분을 JavaScript로 인식합니다.
<!-- 말고도 //로도 동일하게 처리가 가능합니다.

출처 : "Combine CSS with JS and make it into a single download!" by Ajaxian