Thursday, April 20, 2006
HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)
이번달 10일에, "자동으로 현재 페이지의 링크 코드 생성하여, 페이지에 붙이기" 라는 포스트를 작성했는데, 페이지의 주소가 즉 URL이 아주 길 때에 문제가 생겼다. URL이 행갈이(Word Wrap)가 되지 않고, 한 줄로 길게 이어져 출력되었고, 그 결과 웹페이지 레이아웃이 심각하게 깨져 버렸다.
URL을 가령
그래서 결국 주소창을 TEXTAREA 태그 안에 집어 넣어야 했다. TEXTAREA 태그에서는 긴 주소도 행갈이가 되었다. 그렇지만 TEXTAREA 태그는 여러가지 제한이 많고 융통성이 없어서 쓰기 꺼려해 왔었다. 무엇보다 모양이 투박했다. CSS를 이용하여 TEXTAREA 태그를 좀 다듬어 주었다. 결국 DIV태그와 비슷하게 보였다.
TEXTAREA 태그에는 항상 스크롤바가 붙어 있는데, 이것을 제거할 방법은 없었다. 그리고 파이어폭스에서는, TEXTAREA 태그에 padding 을 줄 경우 스크롤바의 위치가 부자연스럽게 되어 버리는 버그(?)가 있었다. 스크롤바에도 padding 이 주어져 버리는 것이다. padding 은 태그 안의 내용물에만 주어지는 것인데 스크롤바에도 padding이 주어진다니 당혹스러웠다.
다만 TEXTAREA 태그의 장점이 있다면 DHTML을 사용한 "자동 선택"이 가능하다는 것이다.
자동 선택 코드:
결과:
아무튼 IE6에서는 그럭저럭 좋은 결과가 나왔는데, 파이어폭스에서는 스크롤바의 위치 문제 때문에 결과가 부자연스러워졌다. 그렇지만 어쩔 수가 없었다.
템플릿을 이렇게 고쳐 주었다. 이것은 클래스 정의:
이것은 템플릿 본문:
지금까지 말한 내용은,
자동으로 현재 페이지의 링크 코드 생성하여, 페이지에 붙이기
이 포스트의 업데이트 사항입니다.
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>
...이하 생략...
<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()"><a href="<$BlogItemPermalinkUrl$>" title="<$BlogTitle$>"><$BlogItemTitle$></a></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()"><a href="<$BlogURL$>"><$BlogTitle$></a></textarea>
<hr style="margin-top:20px;" />
</MainPage>
<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()"><a href="<$BlogItemPermalinkUrl$>" title="<$BlogTitle$>"><$BlogItemTitle$></a></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()"><a href="<$BlogURL$>"><$BlogTitle$></a></textarea>
<hr style="margin-top:20px;" />
</MainPage>
지금까지 말한 내용은,
자동으로 현재 페이지의 링크 코드 생성하여, 페이지에 붙이기
이 포스트의 업데이트 사항입니다.
tag: html
HTML | CSS | 자바스크립트 JavaScript
저는 이 문제를 뒤늦게 발견하고 참 당황스러웠습니다..
(∩_∩)
랄라라님의 코멘트:
* 오.. 이건 저도 느끼던 문제점이었습니다. mwultong님의 글을 참고하여 백링크에서 주소가 나오도록 했었는데, 주소가 길면 옆으로 나가더군요. 특히 파이어폭스에서요.
이제 해결할 수 있겠군요. 곧 고쳐야겠습니다. ㅎㅎㅎ
(새 블로거 버전에서는, 랄라라님의 한글 아이디 글자가 깨져서, 다시 올립니다.)
<< Home