쉽다고 기억을 하지 않고 그때 그때 찾으면서 하니 이보다 비효율적일 수가...
내용이 많은 경우 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>
[가로 스크롤이 사라진 모습]
간단하지만 맨날 헤딩하는 것을 정리해 봤다^^
