Zero width space ​

관련지식
html, css

공백(space)와 같은 속성을 가지고 있지만 가로 길이를 가지고 있지 않은 문자 코드가 있습니다. HTML entity 코드가 ​ 인 Zero width space(ZWSP)는 특정한 경우에 매우 유용합니다.

예1) 항목 나열

바나나사과배복숭아딸기오렌지

위의 예제는 몇 종류의 과일을 띄어쓰기 없이 나열하였습니다. 따라서 ‘바나나’를 선택하기 위해 더블 클릭할 경우 ‘바나나’ 뿐 아니라 문자열 전체가 선택됩니다.

예2) Space 추가

바나나 사과 배 복숭아 딸기 오렌지

예2 에서는 Space를 추가하였습니다. 눈으로도 구분되실 겁니다. 이 경우 특정 과일을 더블 클릭해서 해당 과일만 선택하는 것이 가능합니다. 그러나 Space까지 같이 선택되네요.

예3) Zero width space 추가

바나나​사과​배​복숭아​딸기​오렌지

위 예는 과일의 사이사이에 ​을 추가 하였습니다. 겉으로 봐선 예1과 똑같지만 과일 이름을 더블 클릭할 경우 선택 영역이 구분되는것을 볼 수 있습니다. 위의 HTML 태그는 아래와 같습니다.

바나나​사과​배​복숭아​딸기​오렌지

예4) Space 앞에 ZWSP 추가

바나나​ 사과​ 배​ 복숭아​ 딸기​ 오렌지

예2와 동일해 보이지만 과일을 더블클릭하면 Space를 제외하고 선택되는 것을 볼 수 있습니다. 위 예의 실제 태그는 아래와 같습니다.

바나나​ 사과​ 배​ 복숭아​ 딸기​ 오렌지

ZWSP 는 중국어나 일본어와 같이 띄어쓰기가 없는 문자에 대해서 특히 유용합니다. 또는 하나의 단어에서 일정 부분만 선택하거나 CSS에 의해 개행하고 싶을때 ZWSP를 사용하면 처리 가능합니다.