HTML/CSS] 포스트 제목 툴팁(tooltip)의 쌍따옴표/홑따옴표 문제 해결

포스트 하단의, '날짜와 LINK' 부분에 마우스 커서를 가져가면, 툴팁(말풍선)에 포스트 제목이 나오도록 했었다.

그런데 어제 자세히 살펴 보니, 이 툴팁(tooltip)에 나타난, 특정 포스트 제목이 반쯤 잘리는 것이었다. 포스트 제목에 쌍따옴표가 들어간 경우에 그랬다.


문자열을 툴팁에 나타낼 때, 문자열 일부에 따옴표를 섞어서 사용하기 위해서는, 가령 이런 문자열의 경우 zzz(따옴표)aa(따옴표)zzz:


<a href="ADDRESS" title="zzz'aa'zzz">TEXT</a>
또는
<a href="ADDRESS" title='zzz"aaa"zzz'>TEXT</a>
이어야만 한다. 쌍따옴표로 문자열의 범위가 지정되었을 때는 홑따옴표를 따옴표로서 사용하고, 그 반대의 경우는 반대로 하는 식인 것이다.


그러나 이렇게 되어 있었다:
<a href="ADDRESS" title="zzz"aa"zzz">TEXT</a>

문제가 생길 만도 했다. 이러면 어디까지가 툴팁 문자열인지 알 수가 없다. (물론 일반 문자열 표현에서는 쌍/홑따옴표를 그대로 사용해도 전혀 문제가 없다. 속성의 값으로 들어갔을 때만 생기는 문제다.)

프로그래밍에서라면 명백한 에러를 출력해 주기에 즉시 알 수 있지만, 브라우즈는 코드에 에러가 있더라도 아무런 메시지가 없어서, 뒤늦게야 심각한 버그를 겨우 알아채는 경우가 많았다.



블로거닷컴에서는 제목의 쌍따옴표(")를 &quot; 으로 바꾸어 주지도 않았다. 제목을 제목으로서만 사용할 때는 아무 문제가 없기에 이것은 어쩌면 당연한 것이다.

툴팁을 없애버린다고 해서 문제가 근본적으로 해결될 것 같지는 않았다. 쌍따옴표를 남겨두면 언젠가는 화근이 될 것 같았다.

결국 포스트 제목에서 쌍따옴표를 모두 홑따옴표로 바꾸어 주는 수밖에는 없었다.


설치형 블로그라면 FTP로 다운받아서 일괄처리할 수 있겠지만, 가입형 블로그라서 그런 것도 되지 않았다. '노가다'밖에는 없었다. 지금 생각해 보니 가입형 블로그라는 것이 참 부자유스러운 것이었다. 전문 블로거들이 왜 가입형 블로그를 쓰지 않는지 이제서야 좀 알 것 같다. 어제, 설치형 블로그를 해볼까 하고 고민했었다. 그러나 설치형 블로그도 나름대로의 어려움(호스팅 문제 등)이 있을 것이고 해서, 결국 포기할 수밖에 없었다.

---

참고로, 이것이 그 툴팁에 제목 나오게 하는 코드인데, 그리 유용하지는 않다:





위의 코드에서, 핵심 부분은 이것





관련 게시물: [HTML] 자바스크립트 소스에서, 쌍따옴표 홑따옴표 표현하기 (이스케이프 Escape)