웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

css content 프로퍼티 한글 깨짐 현상

Last Modified : 2020-09-10 / Created : 2018-07-12
12,070
View Count
css content 프로퍼티 한글 깨짐 현상에 대하여 알아봅니다.

CSS의 가상 요소(pseudo-element)인 ::before 또는 ::after에 사용하는 프로퍼티로 content를 사용합니다. content의 값은 해당하는 요소의 텍스트를 나타내는데 이 텍스트의 인코딩 문제... 한글 깨짐이 나타날 수 있습니다.





# css content 프로퍼티 한글 깨짐 해결방안

content의 값에는 일반적인 html 문법과 다른데 태그 등이 적용되지 않습니다. 인코딩 역시 html과는 달리 나타날 수 있는데 영어를 사용하는 경우 특별한 문제가 없으나 특수기호나 한글처럼 인코딩 타입에 따라 달리 나타나는 문자 등은 사용시 인코딩을 선언하거나 아니면 유니코드 형태로 사용할 필요가 있습니다. 왜냐하면 문자깨짐이 나타나기 때문이죠.



! 한글깨짐 현상이 나타나는 경우

확인한 결과 한글깨짐 현상이 간헐적으로 나타나기도 합니다. 아마도 브라우저나 기타 환경에 따라 인코딩을 인식하는 방식 차이로 생각되는데요... 이를 해결하기 위해서 인코딩 또는 유니코드(Unicode)를 적용하는 방법이 필요합니다.


! css 인코딩 설정하기

css 인코딩은 css 최상단에 다음의 인코딩을 선언하면됩니다.
@charset "utf-8";

.text {
  content: '한글';
}

이제 위의 css는 utf-8 인코딩이 적용되어 나타나게 됩니다. 이 방법으로 한글 깨짐 등의 인코딩 이슈를 해결 할 수 있습니다.



# content 프로퍼티에 유니코드를 적용하기

다른 방법으로 한글을 사용할 때 유니코드를 사용하는 방법도 있습니다. 즉 한글을 유니코드로 변환하여 적용해야 합니다. 예를들어 아래와 같은 css를 다음과 같이 unicode로 수정하여 적용할 수 있습니다.
.text {
  content: '한글';
}

아래처럼 수정합니다.
.text {
  content: '\d55c\ae00';
}

이런 방식으로 적용하면 content 프로퍼티에도 안심하고 한글등을 사용할 수 있습니다.
만약 유니코드값을 확인하려면? 아래의 페이지를 참고하세요.


유니코드 확인 바로가기 >
https://webisfree.com/2018-07-20/자바스크립트-unicode-string으로-변환하거나-알아내는-방법

Previous

CSS Property margin

Previous

[CSS] 웹사이트에 Print 프린트, 인쇄 버튼 만들기