캡쳐한 화면은 지메일의 메일 리스트 입니다.
제목 줄을 보시면 제목의 길이에 따라 자동으로 표의 길이가 줄어드는데요? 아주 깔끔하게 나오는 것 같네요..
단순히 자바스크립트를 이용해서 구현을 한 것일까요? 아니면 특별한(?) 기술을 응용한 것일까요??
아무래도 자바스크립트인 것 같은데요; 근데 전 창을 줄여도 안되네요. 어떻게 하신거에요?
결론만 말하자면 CSS2 만으로 됩니다. 테이블은 제목이 들어갈 컬럼만 제외하고 픽셀단위로 고정폭으로 주고, 제목이 들어가는 컬럼에는 화면 오른쪽으로 넘어가는 텍스트를 줄넘김이 아니라 화면에서 잘라먹게 해주면 됩니다. CSS2 스펙 뒤지기 귀찮아서 코드는 생략합니다.
그렇게 하면 뒤에 말줄임표 '...'을 붙일 수가 없지 않나요?
ajax로 데이터 가져온 후에 화면에 타이틀 뿌릴때 사이즈 측정하면 '...'정도는 쉽게 가능할듯 합니다. 물론 전체적인 스타일은 css2 사용하구요.
되지 않을까 생각해봅니다. ajax를 이용해서 데이터를 가져온후 화면에 뿌리기 전에 사이즈를 측정해서 맞게 '...'을 붙여주면 될 듯 합니다. 물론 css2 도 같이 사용하면 좋죠.
텍스트 포맷에 대한 자세한 정보
<code>
<blockcode>
<apache>
<applescript>
<autoconf>
<awk>
<bash>
<c>
<cpp>
<css>
<diff>
<drupal5>
<drupal6>
<gdb>
<html>
<html5>
<java>
<javascript>
<ldif>
<lua>
<make>
<mysql>
<perl>
<perl6>
<php>
<pgsql>
<proftpd>
<python>
<reg>
<spec>
<ruby>
<foo>
[foo]
아무래도
아무래도 자바스크립트인 것 같은데요;
근데 전 창을 줄여도 안되네요. 어떻게 하신거에요?
결론만 말하자면 CSS2
결론만 말하자면 CSS2 만으로 됩니다. 테이블은 제목이 들어갈 컬럼만 제외하고 픽셀단위로 고정폭으로 주고,
제목이 들어가는 컬럼에는 화면 오른쪽으로 넘어가는 텍스트를 줄넘김이 아니라 화면에서 잘라먹게 해주면 됩니다.
CSS2 스펙 뒤지기 귀찮아서 코드는 생략합니다.
그렇게 하면 뒤에
그렇게 하면 뒤에 말줄임표 '...'을 붙일 수가 없지 않나요?
혹,,,ajax 도 썼지 않았을까요?
ajax로 데이터 가져온 후에 화면에 타이틀 뿌릴때 사이즈 측정하면
'...'정도는 쉽게 가능할듯 합니다. 물론 전체적인 스타일은
css2 사용하구요.
아마도 ajax를 사용하면..
되지 않을까 생각해봅니다.
ajax를 이용해서 데이터를 가져온후 화면에 뿌리기 전에
사이즈를 측정해서 맞게 '...'을 붙여주면 될 듯 합니다.
물론 css2 도 같이 사용하면 좋죠.
댓글 달기