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

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

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

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

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


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

자동 선택 코드:


결과:
클릭하거나, 탭 키로 포커스를 주면 자동 선택이 됩니다.



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





템플릿을 이렇게 고쳐 주었다. 이것은 클래스 정의:




이것은 템플릿 본문:

---

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