@charset 규칙

@charset은
스타일시트에 사용되는 문자 인코딩을 지정하는 CSS 구문 규칙입니다.
이 규칙을 사용하면 스타일시트에 원하는 문자 인코딩을 지정할 수 있습니다.

스타일시트:
페이지나 문서의 레이아웃과 디자인을 제어하는 데 사용되는 CSS 규칙 집합입니다.
CSS 파일이나, <style> 태그 내의 콘텐츠를 모두 '스타일시트'라고 말합니다.

어떤 이유에서건 스타일시트와 맞지 않게 인코딩된 외부 환경이 아닌, 스타일시트 내부에 직접 명확한 인코딩을 지정하기 위해 사용합니다.

HTML 파일이나 시스템의 기본 인코딩이 표준 인코딩인 UTF-8로 설정되어 있지 않은 환경에서 스타일시트 내부에서 독립적으로 표준 인코딩인 UTF-8로 설정할 때 매우 유용합니다.

다음은 @charset 규칙으로 스타일시트의 내부 인코딩을 UTF-8로 지정한 예입니다.

CSS 
@charset "UTF-8"; /*스타일시트의 첫 번째에 위치해야 함 */

/* 스타일시트에 사용할 코드들이 그 다음에 위치해야 함 */
body {
    font-size: 18px;
}
...

@charset 규칙에 대한 구문 형식은 다음과 같습니다.

구문

CSS 
@charset "charset-name";

charset-name은 지정할 문자 인코딩을 나타냅니다. IANA-registry 에 정의된 웹 안전 문자 인코딩의 이름이어야 하며, 정확히 @charset 다음 한 개의 공백(띄어쓰기) 후 큰 따옴표(")로 묶어야 하며 즉시 세미콜론(;)으로 끝나야 합니다. 대소문자를 구분하지 않습니다.

또한 , 다음과 같은 사용법이 적용되어야 합니다.

  • @charset 규칙은 스타일시트의 첫 번째 요소여야 하며 앞에 어떤 문자(공백 포함)도 있어서는 안 됩니다.
  • @charset 규칙은 스타일시트에서 한 번만 사용할 수 있습니다. 여러 번 중첩해서 사용할 경우 첫 번째 규칙만 적용됩니다.
  • @charset 규칙은 스타일시트에 사용하는 것으로 HTML 페이지 내 <link> 태그의 charset 속성으로 사용할 수 없습니다. HTML5에서 더 이상 사용되지 않고 폐기되었습니다.
  • @charset 규칙은 스타일시트에 사용하는 것으로 HTML 페이지 내 <style> 태그에서 사용할 수 없습니다.

유효한 구문과 유효하지 않은 구문

유효한 구문 
@charset "ISO-8859-1";
유효한 구문 
@charset "utf-8"; /* "UTF-8"과 동일: 대소문자 구분하지 않음 */
유효하지 않은 구문 
@charset 'ISO-8859-1'; /* 작은 따옴표로 묶음 */
유효하지 않은 구문 
@charset ISO-8859-1; /* 큰따옴표로 묶지 않음 */
유효하지 않은 구문 
@charset  "ISO-8859-1"; /* @charset 다음 한 개를 초과하는 공백(띄어쓰기) 사용 */
유효하지 않은 구문 
 @charset "ISO-8859-1"; /* @charset 규칙 앞에 어떤 문자(공백 포함)도 있어서는 안 됨 */

@charset 규칙의 사용 목적

@charset 규칙은 올바르지 않은 스타일시트의 인코딩을 올바른 인코딩으로 지정하는 데 사용됩니다.

스타일시트와 HTML 페이지의 문자 인코딩으로 항상 UTF-8을 사용해야 하며, HTML에서 해당 인코딩을 선언해야 합니다. UTF-8은 표준 인코딩입니다.
그렇다면, 스타일시트에 @charset 규칙을 사용할 필요가 없습니다.

@charset 규칙의 사용

스타일시트와 HTML 페이지의 문자 인코딩으로 항상 UTF-8을 사용할 수 있는 것이 이상적이지만, 항상 그렇지는 않습니다. 예를 들어, 기존 시스템에서 다른 인코딩을 사용하고 있거나, 특정 요구 사항이 있는 경우도 있습니다.

스타일시트에 ASCII가 아닌 문자가 포함되어 있고, 스타일시트와 HTML 페이지의 문자 인코딩으로 항상 UTF-8로 사용할 수 없는 상황에 사용합니다.

"ASCII가 아닌 문자"는 ASCII 문자 집합에 포함되지 않는 문자를 의미합니다. ASCII 문자는 영어 알파벳, 숫자, 일부 특수 기호 등의 문자들을 포함하고 있는데, 이 문자 집합은 대부분의 웹 페이지에서 사용됩니다. 그러나 언어가 다양해지고 국제적인 콘텐츠가 증가함에 따라 ASCII 문자 집합에 없는 문자들도 사용됩니다. 이런 문자들은 유니코드 문자 집합에 속하며, 예를 들어 다양한 언어의 문자, 이모지, 특수 기호 등이 포함됩니다.
ASCII 문자는 인코딩을 별도로 지정하지 않아도 됩니다.

스타일시트와 HTML 페이지의 문자 인코딩으로 항상 UTF-8로 사용할 수 없는 상황
  • 웹 서버가 ISO-8859-1과 같은 다른 문자 인코딩을 사용하는 경우에도, CSS 파일의 문자 인코딩을 @charset 규칙을 사용하여 UTF-8로 명시하는 것이 좋습니다.
  • 스타일시트 파일 자체가 UTF-8이 아닌 다른 문자 인코딩을 사용하는 경우에도 @charset 규칙을 사용하여 CSS 파일의 문자 인코딩을 UTF-8로 명시하는 것이 좋습니다.

브라우저 호환성

@charset 규칙의 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
@charset 2 12 1.5 4

명세서

@charset 규칙의 명세서 사양
명세서 사양
@charset Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#charset①

참고문헌

같이 보기