컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post [독서] 마광수 소설 '권태' 프리뷰 (문학사상사)[독서] 한강(韓江) 소설 '몽고반점' (이상문학상 대상 수상작) 프리뷰 (문학사상사)[HTML/CSS] 메타 태그(META TAG)의 'REVISIT-AFTER' 속성은 이제...[독서] 한승원 소설 '흑산도 하늘 길' 프리뷰 (문이당)[HTML/CSS] 스크롤바(Scrollbar) 색상 변경하기 (IE 전용)야후ID로 플리커:Flickr.com(무료이미지호스팅/사진공유)에 자동 가입[HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)[QnA] 비디오카드/하드디스크는 어디서 다운로드받나요?[독서] 이문열 소설 '금시조' 프리뷰 (현대문학)[독서] 김탁환 소설 '부여현감 귀신체포기' 프리뷰 (이가서)

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

Monday, April 24, 2006

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










참고로, 이것이 그 툴팁에 제목 나오게 하는 코드인데, 그리 유용하지는 않다:
<span style="font-family:Arial; font-size:10pt; font-weight:bold; font-style:italic;">posted by <$BlogItemAuthorNickname$> <span style="color:#FF9900;">@</span> <a href="<$BlogItemPermalinkUrl$>" title="Permanent Link: <$BlogItemTitle$>"><$BlogItemDateTime$><MainOrArchivePage>&nbsp; <span style="font-family:Arial; font-style:normal; color:#99CC00;">Link</span></MainOrArchivePage></a></span>






위의 코드에서, 핵심 부분은 이것
<a href="<$BlogItemPermalinkUrl$>" title="Permanent Link: <$BlogItemTitle$>"><$BlogItemDateTime$></a>





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

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top