css 맨 앞에 @charset "utf-8"; 이라고 작성하는 이유

 

 

@charset "utf-8";의 역할

1. 문자 인코딩 지정
   CSS 파일이 어떤 문자 인코딩을 사용하는지 브라우저에게 명시적으로 알려줍니다.
   • UTF-8은 전 세계 대부분의 언어를 표현할 수 있는 표준 문자 인코딩입니다.
   • 브라우저가 CSS 파일의 문자를 정확히 해석하려면 올바른 인코딩 정보를 알아야 합니다.
2. 문자 깨짐 방지
   특수 문자(예: 한글, 일본어, 이모지, 유니코드 특수 기호 등)가 포함된 경우, 올바르게 표시되도록 보장합니다.
3. 명시적 선언 권장
   CSS 파일이 다른 서버나 환경으로 이동될 경우, 인코딩 오류를 방지하기 위해 명시적으로 선언하는 것이 좋습니다.

 

작성 규칙

1. 문서의 맨 첫 줄
   @charset 규칙은 CSS 파일의 맨 앞줄에 작성되어야 합니다. 주석보다도 앞에 있어야 합니다.
   
   
2.  문자열은 큰따옴표로 작성
   • 반드시 큰따옴표(")를 사용해야 합니다.
   • 작은따옴표(')는 유효하지 않습니다.
3. 한 번만 사용
   • CSS 파일당 @charset은 한 번만 선언해야 합니다. 여러 번 작성하면 에러가 발생할 수 있습니다.
4. 특수 문자 포함 시 필수
   • 한글, 일본어, 중국어 등의 다국어 문자나 특수 기호를 포함할 경우 반드시 선언해야 합니다.

@charset "utf-8";

 

 

주의 사항

• 만약 CSS 파일이 UTF-8로 저장되지 않았다면, @charset "utf-8";만으로 인코딩 문제가 해결되지 않습니다. 반드시 파일을 UTF-8 형식으로 저장해야 합니다.
• HTML 파일에서 <meta charset="utf-8"> 태그를 사용하더라도, 외부 CSS 파일은 별도로 @charset을 지정해야 완전한 호환성을 확보할 수 있습니다.