mwultong Blog ... 프로그래밍 / 계산기

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

 
Thursday, April 20, 2006

HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)


이번달 10일에, "자동으로 현재 페이지의 링크 코드 생성하여, 페이지에 붙이기" 라는 포스트를 작성했는데, 페이지의 주소가 즉 URL이 아주 길 때에 문제가 생겼다. URL이 행갈이(Word Wrap)가 되지 않고, 한 줄로 길게 이어져 출력되었고, 그 결과 웹페이지 레이아웃이 심각하게 깨져 버렸다.

URL을 가령
"http://mwultong.blogspot.com/2006/04/qna_114543117199903060.html"
이렇게 긴 주소를 DIV 태그로 감싼 것이 문제였다. DIV 태그에서는 공백이 없는 문자열을 행갈이하지 못했다. 처음에는 파이어폭스에서만 나타나는 문제인 줄 알았더니, IE6에서도 마찬가지였다.

그래서 결국 주소창을 TEXTAREA 태그 안에 집어 넣어야 했다. TEXTAREA 태그에서는 긴 주소도 행갈이가 되었다. 그렇지만 TEXTAREA 태그는 여러가지 제한이 많고 융통성이 없어서 쓰기 꺼려해 왔었다. 무엇보다 모양이 투박했다. CSS를 이용하여 TEXTAREA 태그를 좀 다듬어 주었다. 결국 DIV태그와 비슷하게 보였다.

TEXTAREA 태그에는 항상 스크롤바가 붙어 있는데, 이것을 제거할 방법은 없었다. 그리고 파이어폭스에서는, TEXTAREA 태그에 padding 을 줄 경우 스크롤바의 위치가 부자연스럽게 되어 버리는 버그(?)가 있었다. 스크롤바에도 padding 이 주어져 버리는 것이다. padding 은 태그 안의 내용물에만 주어지는 것인데 스크롤바에도 padding이 주어진다니 당혹스러웠다.


다만 TEXTAREA 태그의 장점이 있다면 DHTML을 사용한 "자동 선택"이 가능하다는 것이다.

자동 선택 코드:
<textarea onclick="this.select()" onfocus="this.select()">클릭하거나, 탭 키로 포커스를 주면 자동 선택이 됩니다.</textarea>


결과:




아무튼 IE6에서는 그럭저럭 좋은 결과가 나왔는데, 파이어폭스에서는 스크롤바의 위치 문제 때문에 결과가 부자연스러워졌다. 그렇지만 어쩔 수가 없었다.





템플릿을 이렇게 고쳐 주었다. 이것은 클래스 정의:
<html>
<head>
<style type="text/css">
...중략...

.wasabi-link-code {
  width:98%;
  background-color:white;

  border-top-color:#768BBC;
  border-bottom-color:#EFF1F8;
  border-left-color:#768BBC;
  border-right-color:#EFF1F8;
  border-style:solid;
  border-width:1px;

  scrollbar-face-color:#ECE9FF;
  scrollbar-3dlight-color:#ECE9FF;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#FFFFFF;
  scrollbar-darkshadow-color:#ECE9FF;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-track-color:#ECE9FF; }

...중략...
</style>
...이하 생략...




이것은 템플릿 본문:
<ItemPage>
  <div style="font:bold 10pt 'Tahoma'; text-align:right; color:#66CC66; margin-top:60px; margin-bottom:4px;">Link Code</div>
  <textarea id="link_code" readonly="readonly" rows="4" class="wasabi-link-code" style="font:10pt '돋움'; padding:6px 1px 6px 6px;" onclick="this.select()" onfocus="this.select()">&lt;a href="<$BlogItemPermalinkUrl$>" title="<$BlogTitle$>"&gt;<$BlogItemTitle$>&lt;/a&gt;</textarea>
</ItemPage>


<MainPage>
  <hr style="margin-top:70px;" />
  <div style="font:bold 10pt 'Tahoma'; text-align:right; color:#C5C5E6; margin-top:40px; margin-bottom:4px;">Link Code</div>
  <textarea id="link_code" readonly="readonly" rows="3" class="wasabi-link-code" style="font:12pt 'Comic Sans MS'; padding:10px 1px 10px 6px; margin-bottom:40px;" onclick="this.select()" onfocus="this.select()">&lt;a href="<$BlogURL$>"&gt;<$BlogTitle$>&lt;/a&gt;</textarea>
  <hr style="margin-top:20px;" />
</MainPage>







지금까지 말한 내용은,
자동으로 현재 페이지의 링크 코드 생성하여, 페이지에 붙이기
이 포스트의 업데이트 사항입니다.



tag: html
HTML | CSS | 자바스크립트 JavaScript

2 Comments:
At April 22, 2006 at 11:08 AM, Blogger mwultong said...

저는 이 문제를 뒤늦게 발견하고 참 당황스러웠습니다..

(∩_∩)

 
At April 1, 2007 at 2:05 PM, Anonymous Anonymous said...

랄라라님의 코멘트:

* 오.. 이건 저도 느끼던 문제점이었습니다. mwultong님의 글을 참고하여 백링크에서 주소가 나오도록 했었는데, 주소가 길면 옆으로 나가더군요. 특히 파이어폭스에서요.

이제 해결할 수 있겠군요. 곧 고쳐야겠습니다. ㅎㅎㅎ

(새 블로거 버전에서는, 랄라라님의 한글 아이디 글자가 깨져서, 다시 올립니다.)

 

<< Home RSS 2.0 feed

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