@charset 규칙

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

스타일 시트의 인코딩을 UTF-8로 저장할 수 없어서 다른 인코딩을 사용해야 할 때 유용합니다.

☝ '@charset 규칙'이라는 용어를 사용했습니다.
CSS에서 @기호로 시작하는 여러 식별자(identifier)가 뒤따르는 구문이 있는데, 이러한 규칙이 있는 구문을 "@식별자 규칙(흔히 @-rule)"이라는 용어로 말합니다.
예를 들어, @charset의 경우 @ 다음의 charset이 식별자이며 '@charset 규칙'이라고 합니다. 그래서, @charset을 '스타일 시트에 사용되는 인코딩을 지정하는 규칙'이라고 설명하는 것입니다.

다음은 @charset 규칙으로 스타일 시트의 인코딩을 ISO-8859-1로 지정한 예입니다.

스타일 시트 흔히, 'CSS 파일'이라고 부름 
@charset "ISO-8859-1"; /*스타일 시트의 첫 번째에 위치해야 함 */

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

구문

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①

참고문헌

같이 보기