CSS - @charset

@charset 은 스타일 시트에 사용되는 문자 인코딩을 지정하는데 사용됩니다.

문자 집합 및 인코딩이란 무엇입니까?

문자 집합은 쓰기 시스템에서 사용되는 문자와 기호의 모음입니다. 예를 들어 ASCII 문자 세트는 영어 텍스트의 문자 및 기호를 다루고, ISO-8859-6은 아랍어 스크립트를 기반으로 하는 많은 언어에 필요한 문자 및 기호를 다루며, 유니코드 문자 세트는 대부분의 살아있는 언어 및 스크립트의 문자를 포함합니다.

문자 집합의 문자는 컴퓨터에서 하나 이상의 바이트로 저장됩니다. 각 바이트 또는 바이트 시퀀스는 주어진 문자를 나타냅니다. 문자 인코딩은 특정 바이트 또는 바이트 시퀀스를 글꼴이 텍스트로 렌더링하는 특정 문자에 매핑하는 키입니다.

다양한 문자 인코딩이 있습니다. 메모리의 바이트에 잘못된 인코딩이 적용되면 이해할 수 없는 텍스트가 만들어 집니다. 따라서 사람들이 콘텐츠를 읽을 경우 사용된 문자 인코딩에 올바르게 레이블을 지정하는 것이 중요합니다.

문서의 문자 인코딩은 일반적으로 HTML에서 <link charset="">또는 <meta ..>태그 형식으로 지정됩니다. 항상 스타일 시트와 HTML 페이지의 문자 인코딩으로 UTF-8을 사용하고 HTML에서 해당 인코딩을 선언해야 합니다. HTML5 문서에서 문자 인코딩을 설정하려면 다음 세 가지 선언 중 하나이면 충분합니다.

<!-- HTTP HEADER -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- HTML4-style meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Short HTML5 meta (Recommended) -->
<meta charset="utf-8">

CSS 에서 문자 인코딩을 선언할 필요는 거의 없습니다. HTML에서 문자 인코딩을 선언하면 스타일 시트에서 따로 선언할 필요가 없다는 뜻입니다. 

그러나 스타일 시트에 ASCII가 아닌 문자가 포함되어 있고 어떤 이유로 HTML 및 연관된 스타일 시트의 인코딩을 동일하게 사용할 수 없는 경우 @charset 또는 HTTP 헤더를 사용하여 인코딩을 선언해야 합니다. (HTML과 CSS 파일이 동일한 인코딩을 사용하는 경우 최신 버전의 주요 브라우저는 HTML 파일의 인코딩을 CSS 스타일 시트에 적용합니다.) (W3C – 2014)

팁: 스타일 시트에 지정된 문자 인코딩으로 표시되지 않는 스타일 시트에서 특수 문자를 사용하는 경우 문자 이스케이프를 사용하여 문자를 이스케이프 할 수 있습니다. 이스케이프는 사용중인 문자 인코딩에서 사용할 수 없는 문자를 나타내는 방법이나 다른 이유로 (예: 구문과 충돌할 수 있는 경우) 문자를 사용하지 않는 방법을 제공합니다. CSS에서 문자를 표시하기 위해 이스케이프를 사용하는 방법에 대해 자세히 알아보려면 여기를 참조하세요.

@charset 공식 구문

@charset 의 공식적인 구문은 다음과 같습니다.

@charset "charset-name";

@charset 에 문자 인코딩 이름을 지정할 때는 따옴표로 감싸주어야 합니다. 예를 들면 다음과 같이 따옴표로 묶지 않으면 잘못된 선언이 됩니다.

@charset charset-name;

참고로 @charset 은 문서 상단에 와야 하며 주석이 아닌 문자가 앞에 와서는 안됩니다. 예를 들면 선언 앞에 빈 줄이 있어도 잘못된 선언이 됩니다.

참고: tympanus.net