CSS @charset 규칙 사용법 완벽 정리

문서를 ASCII나 ISO-8859-1이 아닌 다른 문자셋으로 작성하는 경우, 해당 스타일시트가 어떤 문자셋으로 작성되었는지 브라우저에 알려주기 위해 @charset 규칙을 사용할 수 있습니다. 이 규칙은 특히 한글이나 기타 비라틴 문자를 다룰 때 문자가 깨지는 현상을 방지하는 데 유용합니다.

@charset 규칙의 작성 조건

@charset 규칙을 사용할 때는 반드시 다음 사항을 지켜야 합니다.

• 스타일시트의 맨 첫 줄에 작성해야 하며, 그 앞에 공백이나 빈 줄이 있어서는 안 됩니다.
• 문자셋 값은 반드시 큰따옴표(" ")로 감싸야 합니다.
• 값은 IANA에서 등록한 표준 문자셋 이름 중 하나여야 합니다. 예: iso-8859-1, utf-8, euc-kr 등

예제

다음은 @charset 규칙을 실제로 적용한 예제입니다.

<style>
    <!--
        @charset "iso-8859-1";
        .......other CSS rules .....
    -->
</style>

위 예제에서는 스타일시트가 ISO-8859-1 문자셋으로 작성되었음을 선언하고 있습니다. 이후에 작성되는 CSS 규칙들은 모두 이 문자셋을 기준으로 해석됩니다.

참고 사항

현재 웹 환경에서는 대부분 UTF-8이 표준처럼 사용되므로, 별도의 사유가 없다면 @charset "utf-8";을 선언하는 것이 좋습니다. 또한 HTML 문서 자체의 인코딩과 스타일시트의 인코딩이 일치하면 불필요한 문자 깨짐 문제를 예방할 수 있습니다.