JS와 CSS의 문자셋 지정

JS와 CSS의 문자셋 지정

December 3, 2008 taggon Tip&Tech, 0

UI 개발을 하면서 JS와 CSS를 사용할 일이 많은데, 이 문자셋이라는 것이 문제가 될 때가 왕왕 있다.

특히, IE의 경우 HTML 문서와 링크된 외부 JS 파일/CSS 파일의 문자셋이 다르면 대부분의 경우 CSS는 무시, JS는 오류가 발생한다. 이 때, 자바스크립트 파일과 CSS 파일에 문자셋을 지정해 HTML 문서와 다른 문자셋을 써도 정상적으로 인식하게 만들 수 있다.

JavaScript 파일

자바스크립트는 외부 파일을 호출하는 <script> 태그에 속성으로 기술한다. 예를 들면, 외부 자바스크립트 파일이 utf-8 문자열을 사용한다면, 다음과 같이 작성할 수 있다.

<script type="text/javascript" src="path/file.js" charset="utf-8"></script>

붉은 글씨로 된 부분의 utf-8 을 원하는 문자열로 바꾸면 된다. charset 속성에 기술된 문자셋은 HTML 문서의 문자셋과 상관없이 인식되므로, 외부 자바스크립트 파일의 인코딩을 자유롭게 사용할 수 있다. 이 속성은 <script> 태그를 이용한 동적 스크립트 등에 유용하게 사용될 수 있다(이를 이용해 JSONP를 구현할 수도 있다). 또한 이 속성은, <a> <meta> <link> 태그에도 사용할 수 있다.

이 속성은 HTML 4.1 표준에 정의되어 있다.

CSS 파일

자바스크립트 파일은 HTML 문서에 있는 <script> 태그에 속성을 기술했지만, 이와 반대로 CSS 파일은 외부 파일에 직접 기술한다. 예를 들어, 외부 CSS 파일이 utf-8 문자열을 사용한다면, 다음 코드를 CSS 파일 제일 앞에 기술한다.

@charset "utf-8";

물론, 문자셋의 대소문자는 관계없으며, 역시 HTML 문서의 문자셋과는 상관없이 기술된 문자셋으로 인식된다.

이 선언은 CSS 2.1 표준에 정의되어 있다.

출처 - http://mygony.com/archives/1271