Reference/At-rules/@charset

김동현·2026년 3월 28일

CSS docs

mdn 학습 번역 - CSS

목록 보기

172/190

@charset

Baseline | Widely available

Chrome, Edge, Firefox, Safari에서 지원돼요.

이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2015년 7월부터 모든 브라우저에서 사용 가능했어요.

@charset CSS 규칙은 스타일 시트에서 사용되는 문자 인코딩을 지정해요. 이 구문은 content와 같은 일부 CSS 프로퍼티에서 비ASCII 문자를 사용할 때 유용해요. @charset의 첫 번째 문자가 @ 기호이지만, at-rule은 아니에요. 스타일시트의 맨 처음에만 배치될 수 있는 특정 바이트 시퀀스예요. 유니코드 바이트 순서 표시를 제외한 다른 어떤 문자도 그 앞에 올 수 없어요. 또한 따옴표나 공백 사용과 같은 일반적인 CSS 구문 규칙을 따르지 않아요.

@charset이 charset 선언으로 인식되지 않으면 일반 at-rule로 파싱돼요. CSS 구문 모듈은 이 폴백 동작을 더 이상 사용하지 않도록 정의하고 있어요. 스타일시트가 문법 검사될 때 제거될 인식되지 않는 레거시 규칙으로 정의하고 있어요.

스타일 시트의 문자 인코딩을 정의하는 방법이 여러 가지 있기 때문에, 브라우저는 다음 순서로 다음 방법들을 시도할 거예요 (그리고 하나가 결과를 내면 멈춰요):

파일 시작 부분에 배치된 유니코드 바이트 순서 문자의 값.
Content-Type: HTTP 헤더의 charset 속성이나 스타일 시트를 제공하는 데 사용되는 프로토콜의 동등한 것이 제공하는 값.
@charset CSS 선언.
참조 문서에 정의된 문자 인코딩 사용: <link> 요소의 charset 속성. 이 방법은 폐기되었으며 사용하지 말아야 해요.
문서가 UTF-8이라고 가정.

구문 (Syntax)

@charset "UTF-8";
@charset "iso-8859-15";

파라미터 (Parameters)

charset

사용할 문자 인코딩을 나타내는 <string> 값이에요. 반드시 IANA 레지스트리에 정의된 웹 안전(web-safe) 문자 인코딩 이름이어야 합니다. 그리고 꼭 큰따옴표(")로 감싸야 하고, @charset 키워드와는 정확히 한 칸의 공백(U+0020)으로 띄워야 하며, 끝에는 바로 세미콜론(;)을 붙여야 해요. 만약 하나의 인코딩에 이름이 여러 개라면, preferred(기본값)라고 표시된 이름만 사용해야 합니다.

형식적인 구문 (Formal syntax)

@charset 규칙은 일반적인 구문 분석 방식을 따르지 않고, 아래와 같은 형태의 특정한 바이트 시퀀스(byte sequence)를 통해 해석된다는 점을 주의하세요.

@charset "<charset>";

예제 (Examples)

올바른 선언과 잘못된 선언 (Valid and invalid charset declarations)

개발하다 보면 실수하기 쉬운 부분들이에요. 잘 봐두세요!

올바른 예시

@charset "UTF-8"; /* 스타일 시트의 인코딩을 유니코드 UTF-8로 설정합니다. */

잘못된 예시

@charset 'iso-8859-15'; /* 틀렸어요! 홑따옴표(')를 쓰면 안 됩니다. */
@charset  "UTF-8";    /* 틀렸어요! 공백이 두 칸 이상이면 안 됩니다. */
 @charset "UTF-8";    /* 틀렸어요! 선언 앞에 공백 같은 문자가 있으면 안 됩니다. */
@charset UTF-8;       /* 틀렸어요! CSS 문자열 형식이 아니에요. 반드시 큰따옴표가 필요합니다. */