[CSS] CSS 에서 사용할 수 있는 특수문자 리스트(Character Entity)

CSS 에서 특수문자를 입력 하기 위해서는 특수문자를 그대로 입력할 경우 실제 사용자에게는 깨져 보일수 있기 때문에, 가급적 CSS 에서 사용하는 형태(역슬래시+코드)로 사용 하는 것이 좋습니다.

:before 의 content 에 특수문자 넣기

이런 상황을 생각 해봅시다.

:before 선택자의 content 값으로 ·(middot) 을 넣고 싶은 경우 보통은 아래와 같이 작성합니다.

ul li:bofore { 
    ...
    content: '·';
    ...
}

하지만 이것을 실제로 해보신 분들은 알겠지만, 때에 따라 가끔씩 이상한 문자와 함께 표시 되거나 깨져 보이는 경우가 있습니다.

그래서 실제로는 CSS 의 문자 코드를 사용하는 것이 좋습니다.

CSS 특수문자 코드 활용하기

위에서 예를 들었던 middot 의 CSS 문자코드는 /00b7 입니다. 따라서 위 코드는 아래와 같이 쓸 수 있습니다.

ul li:bofore { 
    ...
    content: '\00B7';
    ...
}

이렇게 하면 상황에 따른 깨짐 없이 middot 을 표현 할 수 있습니다

CSS 특수문자 코드 리스트

CSS 에서 사용할 수 있는 특수문자는 굉장히 많으므로 여기에 다 정리하기엔 무리가 있으니 아래 링크로 들어가 검색 해보며 사용하는 것이 좋습니다.

• CSS Entities – w3schools.com

CSS 특수문자 코드를 이용해 쾌적한 페이지를 만들어 봅시다.