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

카테고리 : 웹 프로그래밍/HTML

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 (평문탭에 입력후 유니코드탭으로)

 

인코딩 / 디코딩

인코딩과 디코딩용 도구입니다.

t.hi098123.com

 

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

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

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글