html태그를 다둘때 흔히 '툴팁'이라고 title 옵션을 아시나요? 정보
기타 html태그를 다둘때 흔히 '툴팁'이라고 title 옵션을 아시나요?
본문
- 제 1 막 -
-. 들어가기에 앞서 '툴팁'이 뭔가요?
윈도우에서 흔히 말하는 풍선 도움말입니다.
단, 마우스 오버시 활성화 되는 것이 있고,
클릭시 활성화 되는 것이 있습니다.
한가지 방법만으로 '안되는데요?'라고
되묻지 마시기 바랍니다.
간혹 '속성'이라는 용어와 혼용하는 분들이 계신데,
'속성'에 대한 간략한 예를 들어 보겠습니다.
<table border="" bordercolor="" width="" height="" cellpadding="" cellspacing="">
느닷없이 웬 <table>태그?!
보이십니까?
없나요?
정말로 있나요?
있다면 몇개나 보이나요?
바로 여기에 '속성'이 나열되어 있습니다.
이상 이해를 돕기 위해, <table>태그에 적용할 수 있는
속성중에서 간단히 여섯가지만 기재해 봤습니다.
-. 일반 유저가 비교적 자주 접하는 옵션은 alt라는 옵션이겠지요.
alt 옵션은 Msie 전용입니다.
이미 수차례 팁텍, 질답, 웹스터디 쪽에도 등록되었지만,
브라우저 종류에 상관 없이 '툴팁'을 적용시키려면 'title'옵션을
사용해야 합니다.
- 제 2 막 -
-. 문제 : '툴팁'을 사용할 수 있는 부분은?
(정)답 : 이미지 태그의 속성을 지정하는 부위에 옵션으로 넣을 수 있습니다.
끝?!
-. '툴팁'과 관련한 내용 조금...
툴팁을 설명하기 위해서는 하이퍼 텍스트, 하이퍼 미디어, 하이퍼링크,
앵커?!(뉴스 진행자?!, anchor, hypertext anchor...)
anchor는 원래 '닻(배를 정박시킬 때 바닥에 던져 고정시키는 도구)'을 지칭하나,
컴퓨터와 관련해 anchor라는 용어를 설명하자면,
*** anchor ***
HTML로 작성된 하이퍼텍스트 문서에서 텍스트 또는 아이콘, 기타 요소를
그 문서 내의 다른 개체로 연결시키거나, 다른 하이퍼텍스트 문서 내의 다른 요소와
연결하는 하이퍼링크로 식별하는 데 사용한는 태그를 지칭합니다.
흔히 사용하는 anchor로는 <a ~></a>태그가 있습니다.
-. "에이 다 아는 소린데, 웬 흰소리?!"
<a href~></a> : 많은 사용자들이 익히 알고 있으며, 가장 흔히 접할 수 있습니다.
<a name> : 상당수 유저들은 참조 또는 연결의 의미로 본 anchor(앵커)를 사용하기도 합니다.
<a title>?!
title 옵션의 일반적인 사용 방법은 하단과 같은 예를 들 수 있습니다.
(예. 1) <a href="./" title="메인 페이지로">지지고 볶아도 메인으로 간다</a>
(예. 2) <img src="/image/무지하게_잘난척_하구만.png" width="" height="" title="그냥~ 난척">
<a title>는 <a name>과 유사한 형태의 참조물이라고 보시면 됩니다.
다만, 동일한 기능이 아니라는 점과,
<a title>는 title옵션 자체의 기능인 '툴팁'만을 지정해 주고,
활용하는 데 그 목적이 있다는 차이만 아시면 됩니다.
지금부터라도, alt 옵션이나 title 옵션을 사용하기 위해서는,
반드시 <a href="" title="">를 사용하거나,
<img src="" title="">와 같이 특정 태그와 동시에 기재되어야
사용할 수 있다는 생각을 바꾸시기 바랍니다.
원래 html문서가 보급되는 순간부터 존재했던 옵션입니다.
참... <a title> 자체로 사용되는 경우는, '태그'라고 표현해야 좀 더 정확하겠군요.
- 제 3 막(끝맺음. 뽀~~~나~쓰) -
g4에서 방문자 현황에 출력되는 각각의 카운트에 title 옵션을 지정한 예제 입니다.
하단 소스는 그대로 사용하셔도 오류없이 가능합니다.
<td width=100% nowrap> <a title='오늘'><?=number_format($visit[1])?></a> / <a title='어제'><?=number_format($visit[2])?></a> / <a title='최대'><?=number_format($visit[3])?></a> / <a title='전체'><?=number_format($visit[4])?></a> </td>
[이왕 뭔가 읽어 볼 꺼리를 만들었다면...]
하단에 기재한 내용은 정말 헷갈리기 쉽고,
틀리기 쉬운 맞춤법입니다.
(나스카 ☜ 넌 대체 얼마나 아는데?!)
(모르는 것 투성입니다.)
(그나마 알고 있는 부분을 짚어 봅니다.)
웬일?! 왠일?! 왠지?! 웬지?!
왠일이래?! 웬일이래?!
댓글 전체
* HTML 4 애트리뷰트(attribute)의 색인
http://trio.co.kr/webrefer/html/index/attributes.html
* 7.4.3 제목(title) 애트리뷰트
http://trio.co.kr/webrefer/html/struct/global.html#adef-title
* 13.8 대체(alternate) 텍스트 지정 방법
http://trio.co.kr/webrefer/html/struct/objects.html#adef-alt
* img에서 alt사용시
익스에서는 이미지 있을때와 없을때 마우스 오버시에 alt에 지정된 내용이 보입니다.
모질라에서는 이미지가 있을때는 안보이며 이미지를 발견하지 못할경우(없을때) alt에 지정된 내용이 이미지 자리에 텍스트로 표시됩니다.
http://trio.co.kr/webrefer/html/index/attributes.html
* 7.4.3 제목(title) 애트리뷰트
http://trio.co.kr/webrefer/html/struct/global.html#adef-title
* 13.8 대체(alternate) 텍스트 지정 방법
http://trio.co.kr/webrefer/html/struct/objects.html#adef-alt
* img에서 alt사용시
익스에서는 이미지 있을때와 없을때 마우스 오버시에 alt에 지정된 내용이 보입니다.
모질라에서는 이미지가 있을때는 안보이며 이미지를 발견하지 못할경우(없을때) alt에 지정된 내용이 이미지 자리에 텍스트로 표시됩니다.
흐~* 역시 일단 써 놓고 보면,
보여주는 부분보다는 훨씬 더 다양하고,
직접적인 자료를 손쉽게 얻을 수 있어서 좋습니다~*^^*
나름대로의 전략이지요^^;
========================================
일단 '옵션'이라고 명시는 했으나,
사용하는 용도에 따라, 특정 태그의 속성이 되기도 합니다.
직역하자면 attribute란 우리말로 하자면 '속성'을 지칭하나,
옵션이 될수도 있지요.
또 한가지...
설명은 동일하지만, alt속성은 모질라계열에서는 적용되지 않습니다.
보여주는 부분보다는 훨씬 더 다양하고,
직접적인 자료를 손쉽게 얻을 수 있어서 좋습니다~*^^*
나름대로의 전략이지요^^;
========================================
일단 '옵션'이라고 명시는 했으나,
사용하는 용도에 따라, 특정 태그의 속성이 되기도 합니다.
직역하자면 attribute란 우리말로 하자면 '속성'을 지칭하나,
옵션이 될수도 있지요.
또 한가지...
설명은 동일하지만, alt속성은 모질라계열에서는 적용되지 않습니다.
다음링크 참고하십시오.
3.4번을 보시면 익스의 경우 alt와 title의 기능이 너무 모호하지만
모질라의 경우 정확히 자기의 기능을 하는것을 보실수있습니다.
모질라에서
3번을 보시면 이미지가 없는 상태이므로 이미지 없다는 아이콘과 아이콘에 마우스 오버시 title에 설정된 타이틀을 보여줍니다.
4번의 경우 이미지가 없는 상태에 alt가 있으므로 이미지없다는 아이콘은 안보이고 이미지자리에 alt의 내용을 보여줍니다
http://threes.org/gnu3/main/test.html
3.4번을 보시면 익스의 경우 alt와 title의 기능이 너무 모호하지만
모질라의 경우 정확히 자기의 기능을 하는것을 보실수있습니다.
모질라에서
3번을 보시면 이미지가 없는 상태이므로 이미지 없다는 아이콘과 아이콘에 마우스 오버시 title에 설정된 타이틀을 보여줍니다.
4번의 경우 이미지가 없는 상태에 alt가 있으므로 이미지없다는 아이콘은 안보이고 이미지자리에 alt의 내용을 보여줍니다
http://threes.org/gnu3/main/test.html
감사합니다.
직접 확인시켜 주시려고, 이런 수고까지 해 주시고~*
아... 이미지 태그를 사용하는 경우,
적용되는 형태를 4가지로 보여줄 수 있군요.
하단에 모호하게 기재되어 있는 단락은,
필히 수정해야 되겠네요.
> alt 옵션은 Msie 전용입니다.
> 이미 수차례 팁텍, 질답, 웹스터디 쪽에도 등록되었지만,
> 브라우저 종류에 상관 없이 '툴팁'을 적용시키려면 'title'옵션을
> 사용해야 합니다.
>> 이미지 태그내에서 사용할 경우,
>> 상단에 인용된 문구와 같이 사용하는 것이 아니라,
>> 상황에 따라 그때 그때 적절하게 사용해야 합니다.
간략히 줄이면...
그 범위를 한정하지 않은 모호함이 있으나,
게시물에 기재되어 있는 것처럼,
일반적으로 이미지 태그가 아닌 앵커(anchor)에서 title을 사용하는 경우,
alt는 msie와 모질라계열만을 놓고 본다면,
alt는 msie에서만 의도하는 대로 작동하고,
title은 구분없이 작동한다.
~ 이 정도 될까요~*^^*
직접 확인시켜 주시려고, 이런 수고까지 해 주시고~*
아... 이미지 태그를 사용하는 경우,
적용되는 형태를 4가지로 보여줄 수 있군요.
하단에 모호하게 기재되어 있는 단락은,
필히 수정해야 되겠네요.
> alt 옵션은 Msie 전용입니다.
> 이미 수차례 팁텍, 질답, 웹스터디 쪽에도 등록되었지만,
> 브라우저 종류에 상관 없이 '툴팁'을 적용시키려면 'title'옵션을
> 사용해야 합니다.
>> 이미지 태그내에서 사용할 경우,
>> 상단에 인용된 문구와 같이 사용하는 것이 아니라,
>> 상황에 따라 그때 그때 적절하게 사용해야 합니다.
간략히 줄이면...
그 범위를 한정하지 않은 모호함이 있으나,
게시물에 기재되어 있는 것처럼,
일반적으로 이미지 태그가 아닌 앵커(anchor)에서 title을 사용하는 경우,
alt는 msie와 모질라계열만을 놓고 본다면,
alt는 msie에서만 의도하는 대로 작동하고,
title은 구분없이 작동한다.
~ 이 정도 될까요~*^^*
정확하게 말한다면 마우스 올렸을때 나오는 것은 title 가 맞을 것 같군요.
이미지의 alt 는 시각장애인을 읽어주기 위한 수단으로 쓰기도 합니다.
img 의 마우스올림은 alt 가 , 나머지 마우스올림은 title 가 맞을 것 같습니다.
ps. img의 alt 는 불여우 뿐만 아니라 다른 브라우저에서도 그림대신 보입니다. (ie : 배꼽포함)
이미지의 alt 는 시각장애인을 읽어주기 위한 수단으로 쓰기도 합니다.
img 의 마우스올림은 alt 가 , 나머지 마우스올림은 title 가 맞을 것 같습니다.
ps. img의 alt 는 불여우 뿐만 아니라 다른 브라우저에서도 그림대신 보입니다. (ie : 배꼽포함)
감사합니다. root님, zzzz님!
조그만 거 하나 써 봤다가,
정말 많은 내용을 알고 갑니다.
특히 한글화 되어 있고, 다양한 내용을 참조할 수 있어서
더더욱 유용했습니다 *^^*
조그만 거 하나 써 봤다가,
정말 많은 내용을 알고 갑니다.
특히 한글화 되어 있고, 다양한 내용을 참조할 수 있어서
더더욱 유용했습니다 *^^*
저는 신경쓰기 귀찮아서 그냥 title 만 씁니다