쉽다고 기억을 하지 않고 그때 그때 찾으면서 하니 이보다 비효율적일 수가...
내용이 많은 경우 iframe을 사용하지 않고 div 태그를 이용해서 스크롤바를 만들면 효과적으로 화면에 표시할 수 있으며 많이 사용한다.
아래와 같이 테이블의 td 안에 div 넣고 div에 스타일을 적용하면 많은 내용이라도 width와 height로 지정한 영역안에 내용이 표시되고 스크롤바가 표시된다.
여기서 중요한 것이 overflow 라는 것이다.
- 스크롤을 표시하지 않을 경우 : overflow:hidden
- 항상 스크롤을 표시할 경우 : overflow:scroll
- 자동으로 스크롤이 보이거나 안보이게 할 경우 : overflow:auto
<table>
<tr>
<td>
<DIV style="width:100%; height:100px; overflow:scroll; padding:10px; border:3; border-style:solid; border-color:#EBEBEB">내용..
내용..
내용..
</DIV>
</td>
</tr>
</table>
[div overflow:scroll 을 적용해서 스크롤이 생긴 모습]
위의 그림을 보면 가로 스크롤은 보기에 좋지가 않다.
스크롤바를 없애보자.
- 가로 스크롤 없애는 속성 : overflow-x:hidden
- 세로 스크롤 없애는 속성 : overflow-y:hidden
위의 속성을 설정하지 않으면 기본적으로 가로나 세로 스크롤이 생긴다.
<table>
<tr>
<td>
<DIV style="width:100%; height:100px; overflow:scroll; padding:10px; border:3; border-style:solid; border-color:#EBEBEB; overflow-x:hidden">
내용..
내용..
내용..
</DIV>
</td>
</tr>
</table>
[가로 스크롤이 사라진 모습]
간단하지만 맨날 헤딩하는 것을 정리해 봤다^^
트랙백 주소 :: http://blog.bsmind.co.kr/trackback/71
-
Subject: 하츠의 생각
Tracked from itry's me2DAY 2009/06/11 16:09 삭제[html 팁] 테이블에 스크롤바 만들기 어찌보면 웹프로그램할 때 Language보다 html이나 스타일쉬트 때문에 시간이 오래걸릴 때가 많다.. 쉽다고 기억을 하지 않고 그때 그때 찾으면서 하니 이보다 비효율적일 수가… 내용이 많은 경우 iframe을 사용하지..
-
Subject: THEAD안에 TD, 제목일까?
Tracked from 웹 뒤에 숨은 Web 2009/06/19 14:52 삭제데이터테이블은 TABLE 요소 안에 THEAD, TFOOT, TBODY, TR, TH, TD 등의 자식 요소들을 배치함으로써 만들어진다. 더불어 CAPTION 요소를 통해 데이터테이블의 제목을 달아 주거나, summary 속성을을 통해 데이터테이블의 내용을 요약해서 적어줄 수 있다. 보통의 경우 다음과 같이 마크업할 수 있다. (편의상 네이버 스포츠 축구 섹션에서 2010 남아공 월드컵 아시아 지역 최종 예선 결과표를 인용합니다.) 2010 남아공..


댓글을 달아 주세요
overflow-x 와 overflow-y 는 인터넷 익스플로러 전용속성이에요^ ^
아! 그렇군요.
많은 곳에서 사용하길레 별 생각없이 사용을 하고 있었네요^^;;
감사합니다~~
별군이 알려줬는데, 현재 모든 브라우저에서 동작한다네요 ㅋ
css3에서 채택되어 잘 적용되는 속성인가봐요.
그냥 쓰셔도 될거같아요 죄송해요@ _@
그렇군요...
글 내용에 추가했다가 다시 지웠습니다 ^^;;
감사합니다.~
관련 내용 링크 주소 알려드릴게요.
ie8에서는 -ms- 를 붙여야 속성 적용이 됩니다. :D
http://msdn.microsoft.com/en-us/library/ms534313(VS.85).aspx
작은글에 좋은 정보를 주셔서 감사합니다.~~
구글이벤트 3등에 당첨되셨어요~~
축하드려요..
명섭이님 덕분에 저는 좀더 좋은걸 받게되어서
감사 인사겸 들렸습니다..
혹시라도 오해 없으시길 그냥 축하드리러 왔어요~~
와우~ 윤초딩님!
윤초딩님은 1등하셨더군요~
축하드려요^^
감사합니다. 많은 도움이 되었습니다.
별 말씀을요. 저도 다 인터넷 뒤지면서 배운 것이랍니다.
좋은 한주 되세요~