프로그래머가 음악리스트부분의 작업하는 것을 보니...
글이 길때, 마우스오버하면 제목의 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를 이용하는 경우에 대체해도 좋을 듯 하다.
[출처] 긴 제목 마우스오버시에만 보기|작성자 과일장수
POSITION속성과 그 속성값
자료가 도움이 되었다면 댓글과 평가 부탁합니다. 
