CSS content 깨지는 현상(주의점)

CSS content는 좋은 기능이다.

 :after 이나  :before 등에서 사용가능하며 HTML또는 JS없이도 글을 작성가능한 기능이다.

다만 이걸로 글을 쓰기에는 SEO에는 부적절하다.

 

그런데, 이 content는 영어+숫자가 아닌 일반기호, 한글등은 가끔 깨진다.

">" 같이 일반적으로 사용하는 기호도 새로고침 여러번 하다보면 가끔씩 깨진다.

 

이런 버그가 있어서 CSS를 작성시 유니코드문자로 작성할 수 있으며, 이렇게 작성해야 안깨진다.

그냥써도 거의 대부분(99% 이상)에서 안깨지지만 아주 가끔(1% 미만) 깨질수있다.

 

문자로 작성한 글은

div#main>div.input:after{
	content: '또는 클릭해서 파일을 선택하실 수 있습니다.';
}

아래와 같이 유니코드로 변환해주는게 좋다.

div#main>div.input:after{
	content: '\b610\b294\20\d074\b9ad\d574\c11c\20\d30c\c77c\c744\20\c120\d0dd\d558\c2e4\20\c218\20\c788\c2b5\b2c8\b2e4\2e';
}

 

문자 <-> 유니코드 인코더/디코더를 활용하면 쉽게 변환이 가능하다.

https://t.hi098123.com/codec (평문탭에 입력후 유니코드탭으로)

인코딩 / 디코딩

 

이런 문제는 네이버같은 대기업에서도 하는 실수로 위와같이 영문, 숫자가 아닌경우 유니코드로 변환을 해서 사용하는게 좋다.

네이버 지식인에서 잘못된 사용으로 문제가 발생하는 현상