자료실
MH 슬라이딩 배너 0....
MH 위젯스타일
prettyphoto - 본문내...
SCM 플레이어 사용법
XE 1.4.4.2버전 이후에...
네비게이션 위젯
IE 버젼별로 css 따로...
문서보기 유저 지정
문하우스 게시판스킨 V...
내용글 출력시 주소창에...
Html Tip
여러사이트에서 제가 필요해 가져온 Html Tip들입니다.
2008.04
04
![[레벨:30]](http://moonhouse.co.kr/xe/modules/point/icons/default/30.gif "포인트:266106point, 레벨:30/30"){kind=icon}
프로그래머가 음악리스트부분의 작업하는 것을 보니...
글이 길때, 마우스오버하면 제목의 text들이 우에서 좌로 스크롤되도록 한다는 것을 알았다.
그런데...스크롤...이런 거 장점은 티끌만큼 있는 반면 단점은 우질라게 많은 거다.
게다가....Mozilla Firefox에선 아예 안되는 <nobr>태그까지...으으윽
이런저런 궁리를 하다가 엉뚱한 아이디어가 떠올랐다.
<a>태그에 hover시 레이어개념으로 띄워서 긴 제목을 모두 보게 할 수 있을까?
만들었다.
이기찬의 명곡(?)
"시간은 모든 걸 잊혀지게 합니다. 하지만 사랑은 모든 걸 기억하게 하죠 (사랑이 아직 남았는데..)"
꽤 긴 제목으로 악명이 높아 웬만한 음악사이트에서 100% 말줄임표를 쓰게하는...
제목부분에 마우스오버를 하면...
요로케 된다.
a.:link {
width:100%;height:12px;vertical-align:top;overflow:hidden;position:static;color:#494949;
display:block;background-color::#EFEFEF;
}
a.:visited {
a.:visited {
width:100%;height:12px;vertical-align:top;overflow:hidden;position:static;color:#494949;
display:block;background-color::#EFEFEF;
}
a.:active {
width:100%;height:12px;;vertical-align:top;overflow:hidden;position:static;color:#494949;
display:block;background-color::#EFEFEF;
}
a.:hover {
display:block;
border:1px solid #DEDEDE;
width:495px;
display:block;
border:1px solid #DEDEDE;
width:495px;
height:auto;
position:absolute;
overflow:show;
color:#FF0000;
vertical-align:top;
background-color:#FFFFFF;
}
position:absolute;
overflow:show;
color:#FF0000;
vertical-align:top;
background-color:#FFFFFF;
}
위의 소스에서 눈여겨 볼것은 2가지이다.
width속성값, height속성값, 그리고 position속성값이다.
width와 height의 퍼센트(%)값은 해당태그의 겉을 감싸고 있는 태그 (어미태그)의 width값을
종속받아 그 값의 퍼센트(%)로 구현하는 것이다.
link, visited, active의 width는 <td>태그에 지정된 width값의 100%만큼의 너비를 가지게 되고
레이어로 띄우는 hover때는 495px로 고정시키는 것이다.
height의 경우는 제목의 긴 text를 감추기 위해 12px로 고정시켰다.
레이어로 띄웠을 때에는 text의 길이만큼 자동으로 height가 넓어지도록 auto값을 주었다.
position속성의 또 하나의 값 static
이것은 position의 기본값, absolute, relative값이 없을 때의 Default값이다. 안써도 별 상관없는 속성값이지만, hover시에 absolute를 쓰기 위해선 이 Default값이 지정되어 있어야 했다.
그외 자세한 디테일은 스스로 해보며 조정해나가야 할 것이다.
그런데....
참...훌륭한(?) 아이디어 이었음에도 불구하고...
이것을 쓰기에는 뭔가 불편했다.
짧은 제목이었을 때를 체크해주는 속성은 CSS에서 어떻게 해볼수가 없었다.
"녹색 정원"같은 짧은 제목일 때에도 레이어로 띄워야만 하는 것이 꽤 큰 불편함으로 다가왔다.
굉장히 긴 글인데 짧은 요약글의 형태를 기본으로 하고
마우스오버같은 액션으로 긴글을 보여줘야 하는...
다른 곳에 쓰기에는 좋은 아이디어인 듯 하다.
설명을 보여주어야 하는 popup layer같은 비속성CSS를 이용하는 경우에 대체해도 좋을 듯 하다.
[출처] 긴 제목 마우스오버시에만 보기|작성자 과일장수
