It's Myself

A 태그(<A>) 라든가, DIV 태그(<DIV>), 또는 SPAN 태그(<SPAN>)을 이용하여 안에 각종 Text를 넣을 수 있다. 그런데, 이 Text에 대한 설명이나 말을 줄여 놓으면 그 원래 크기의 문자열을 표시하고 싶을 때가 있다.

이 때 괜찮은 방법이 바로 툴팁이라는 조그만한 노란 창이 좋다. 이것을 사용하려면, 태그 안에 title 이라는 속성 내에 값을 넣어주면 된다.

다양한 Tag 내에서 속성 값으로 title 이라는 속성 값 내에 툴팁으로 표시하는 방법이다. 현재까지 테스트된 태그로는 <A> <DIV> <SPAN> 이며 이외에도 다양한 태그들 안에서 동작가능할 것 같다.

만일 특정 테이블 안에 Text에서 툴팁이 나오게 하기 위해서는 <span title="툴팁내용">test</span>  또는 <div title="툴팁내용">test</div> 라는 형태로 넣어주면 나오게 된다.

테스트 결과 FF 3.0과 IE 7.0 에서 정상적으로 표시된다.
(FF 2.X에는 어떤지는 잘 모르겠다.)

ASP.NET의 서버 웹컨트롤로 만들면 CS 프로그램 짜듯이 쉽게 UI를 구성할 수 있다.
마치 일반 Windows Form 프로그램 짜듯이 붙이게 되는데,
이 컨트롤을 실제 웹 브라우저에서 볼 수 있도록 HTML로 번역하게 된다.

TextBox 같은 경우 <Input type="text" .. >로,
Button 같은 경우 <Input type="button" ...> 로  번역되어 나타낸다.

그런데, 이 중 요상한 것이 있는데, 바로 Label 컨트롤이다.
이 Label 컨트롤을 다른 컨트롤 처럼 만들어서 붙이면 이상하게 <span> 으로 붙는다.
그런데 다른 부분의 Html 소스를 보면 <Label ..> 로 구성되어 있다.
그래서 간혹 CSS를 구성하다 보면 유독 그 녀석만 CSS가 안먹는 기이한 현상을
만들어 낸다. 게다가 HTML 코드 자체가 틀리니 미묘하게 짜증까지...

하지만 그 속에서 쓰고 있는 웹 컨트롤은 모두 똑같이 Label 이였다.
그럼 이와 같은 차이가 발생하는 이유는 무엇일까?

그것은 Label의 역할에 따라 다르게 번역되는 것이다.
위의 구성 내용 중 RSS Feed 주소 부분이 바로 이 Label로 만들어진 부분인데,
그냥 Label을 생성해서 붙이기만 하면 저 부분은 Span으로 구성되게 된다.
      <span .... > RSS Feed 주소 </span>

만일 html에서 Label로 표시하고 싶으면, Label의 속성 중에 AssociatedControlID 라는 부분에 이 Label이 수식하고 있는 컨트롤 ID를 넣으면 된다.
즉 만일 저 위의 그림의 예제에서 TextBox ID가 txtRSSFeeder 이면,
  label.AssociatedControlID  = "txtRSSFeeder";
이렇게 서버에서 구성해주면 된다.

그러면 실제 웹에서 보여주는 소스를 보게 되면,
     <Label for="txtRSSFeederxxxxxxxx" > RSS Feed 주소 </Label>
     (txtRSSFeederxxxxxx에서 xxxxxx 부분은 볼때 마다 틀린 값이 붙는다.)