☆ 사용되는 태그는 body, div, p 태그 등이며 ☆ 속성은 overflow, overflow-x, overflow-y - overflow : 가로 세로 스크롤바, - overflow-x : 가로 스크롤바, - overflow-y : 세로 스크롤바, ☆ 속성값은 hidden, scroll, auto, yes, no - hidden, no : 스크롤바 감추기, - yes : 무조건 스크롤바 만들기 - scroll, auto : 가로, 세로 크기에 따라 자동으로 나타내고, 감추기 함.
body 태그에 사용한 경우
<body style="overflow:hidden"> ---스크롤바 모두 안보이게 하기
<body style="overflow:auto"> ---필요 여부에 따라 스크롤바가 나타남
<body style="overflow-x:hidden; overflow-y:auto"> 세로(상하) 스크롤바만 나타나게 하기
<body style="overflow-x:auto; overflow-y:hidden"> 가로(좌우)스크롤바만 나타나게 하기
* 다음 블로그에서는 body태그가 적용 안되기 때문에 사용불가.
table태그 내에서 div태그에 사용하는 예를 살펴보겠습니다.
div 태그에 사용한 작성 예시
나타난 결과
div 태그에 사용한 예제로 내용을 설명하면 테이블의 크기는 가로 300픽셀, 세로 150픽셀 크기이고 나타나는 위치(세로정열)는 위부분(top)에 나타난다. auto 라는 것은 내용이 한줄을 넘을 경우 스크롤바를 만들고 그렇지 않으면 만들지 말라는 뜻입니다. yes로 하면 무조건 만들기.
p 태그에 사용한 작성 예시
<table> <tr> <td> <p style="overflow: auto; width:300; height:100; padding:4px"> 내용<br> auto 라는 것은<br> 내용이 한줄을 넘을 경우<br> 스크롤바를 만들고 <br> 그렇지 않으면 <br> 만들지 말라는 뜻입니다.<br> yes로 하면 무조건 만들기.<br> </p> </td> </tr> </table>
나타난 결과
내용 auto 라는 것은 내용이 한줄을 넘을 경우 스크롤바를 만들고 그렇지 않으면 만들지 말라는 뜻입니다. yes로 하면 무조건 만들기.