이번 포스팅에서는 CSS를 이용해서 스크롤바를 설정하는 방법에 대해서 알아보도록 하겠습니다.
CSS 속성 중에 overflow 라는 속성이 있는데 이녀석은 컨텐트 박스보다 많은 양의 컨텐트가 들어갈 경우에 컨텐트가 어떻게 보여져야 하는지에 대해서 설정해주는 속성입니다.
이 속성에 대한 속성값은 다음과 같은 값들이 있습니다.
| Value | Description |
|---|---|
| visible | Allows the content to overflow the borders of its containing element. |
| hidden | The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible. |
| scroll | The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content. |
| auto | The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow. |
다음 예제를 보실까요.
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>
|
결과는 아래와 같습니다. ( 결과 이미지 )
직접 페이지를 만들어서 구현해보세요. ^-^
Reference : http://www.tutorialspoint.com/css/css_scrollbars.htm
'💻 Programming > CSS' 카테고리의 다른 글
| [CSS] 21. Positioning ( 포지셔닝, 위치 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 20. Visibility ( 가시성 ) (0) | 2016.06.12 |
| [CSS] 18. Dimension ( 높이, 너비, width, height ) (0) | 2016.06.12 |
| [CSS] 17. Outlines ( 외곽선, 아웃라인 ) (0) | 2016.06.12 |
| [CSS] 16. Cursor ( 마우스 커서 모양 ) (0) | 2016.06.12 |