HTML DIV tag: 스크롤바 넣기와 제어하기 - overflow: auto, scroll, hidden, white-space:nowrap

DIV 영역에 스크롤바를 표시하고 제어하려면, 스타일(style) 속성에서 overflow 를 지정하면 된다. DIV 영역의 오른쪽에 표시되는 세로 스크롤바가 기본이다.

스크롤 바를 설정하는 것은 어려운 일이 아니지만, 생각해 볼 것이 있다.
스크롤바가 있으면, 방문자 입장에서는 아무래도 번거롭다. 스크롤바는 내용이 한 번에 다 보이지 않는다는 것을 의미하기 때문이다.

누구나 경험한 일이겠지만, 어떤 사이트는 의도적으로 스크롤바를 설정하여 방문자로 하여금 어떤 행동을 하게 만들거나 유도하거나, 또는 알려야 할 내용을 사실상 보지 못하도록 만들거나 ..... 스크롤바가 나쁜 의도로 쓰이기도 한다.

그러한 사이트는 방문자로 하여금 외면당하기 마련이다. 눈앞의 어떤 이익을 위하여 방문자를 속이고 유도하는 데에 스크롤 바를 사용하여서는 아니될 것이다.



[Div 영역에 스크롤바 지정]

<div style="overflow:scroll; width:350px; height:200px;">
</div>

overflow에는 자동 auto, 항상표시 scroll, 항상숨김 hidden 으로 지정할 수 있다.


1. overflow: scroll;  항상 스크롤바 표시
내용이 DIV 영역보다 많든 적든 상관없이 항상 스크롤바를 표시한다.

[예1: 내용이 DIV 영역보다 적은 예]

<div style="overflow:scroll; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.

[예2: 내용이 DIV 영역보다 많은 예]

<div style="overflow:scroll; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다. ====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.

여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.

2. overflow: auto; 내용이 DIV 영역 보다 많을 때만 표시
내용의 양이 DIV 영역보다 많으면 스크롤바를 표시하고, 적으면 표시하지 않는다.
텍스트로 된 내용이 DIV 영역보다 많을 때는, 텍스트 문장은 자동 줄바뀜이 되기 때문에, 세로 스크롤바만 표시되고, DIV 영역보다 큰 그림의 경우에는 가로 세로 스크롤바가 모두 표시 된다.

[예1: 내용이 DIV 영역보다 적은 예]

<div style="overflow:auto; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

[예2: 내용이 DIV 영역보다 많은 예]

<div style="overflow:auto; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다. ====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

3. overflow: hidden; 항상 스크롤바 숨김
내용이 DIV 영역보다 많든 적든 항상 스크롤바를 표시하지 않는다. 
따라서, DIV 영역을 넘는 내용은 보이지 않게 된다. 의도적으로 내용을 숨기려 할 때나 필요한 기능이다.

[예1: 내용이 DIV 영역보다 적은 예]

<div style="overflow:hidden; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

[예2: 내용이 DIV 영역보다 많은 예]

<div style="overflow:hidden; width:500px; height:150px;">
</div>

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

4. overflow-y, overflow-x
overflow-y 는 DIV 영역 오른쪽의 세로 스크롤바를 말하고, overflow-x 는 DIV 영역 아래의 가로 스크롤바를 말한다.
내용이 텍스트인 경우에는 줄바꿈(wrap)을 하지 않도록 하는 경우 외에는 특별히 쓸 일이 없을 것 같다. DIV 영역보다 큰 그림의 경우에는 쓸 경우가 있을 수 있겠다.
overflow에 주는 속성(scroll, auto, hidden)은 위에서 본 것과 같다.

주) 구글 블로그의 다이나믹뷰 템플릿에서는 이 기능이 제대로 작동하지 않으므로, 일반 템플릿에 이 부분에 대한 예를 별도로 만들어 놓았다.
Overflow-y, Overflow-x 제어의 실제 예 보기 >>


[예1: overflow:auto]

<div style="overflow:auto; width:500px; height:150px;">
</div>

[실제 적용한 모습]

[예2: overflow-x:hidden]
가로(x) 스크롤바를 숨김. 따라서, DIV 영역 너비를 넘는 오른쪽 부분을 보이지 않는다.

<div style="overflow-x:hidden; width:500px; height:150px;">
</div>

[실제 적용한 모습]

.

[예3: overflow-y:hidden]
세로(y) 스클롤바를 숨김. 따라서, DIV 영역의 세로(길이)를 넘는 부분은 보이지 않는다.

<div style="overflow-y:hidden; width:500px; height:150px;">
</div>

[실제 적용한 모습]

5. white-space:nowrap; 과 overflow-y:hidden

[DIV 영역 안의 텍스트 줄바꿈을 하지 않도록 하는 태그]

white-space:nowrap;

 
DIV 영역에 들어 있는 문장의 길이가 길면 자동으로 줄바꿈이 되는데, 줄바꿈(wrap)을 하지 않도록 하면 텍스트 문장이 DIV 영역 밖으로 펼쳐 보이게 된다.

[예1: white-space:nowrap]
긴 문장의 자동 줄바꿈을 하지 않도록 하였음. 따라서, DIV 영역을 넘어서 문장이 표시됨

<div style="white-space:nowrap; width:500px; height:150px;">
</div>

[실제 적용한 모습]

예 1: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.

[예2: white-space:nowrap; overflow-y:hidden]
긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바 표시를 자동을 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길면 가로(x) 스크롤바가 표시됨.

<div style="white-space:nowrap; overflow:auto;  width:500px; height:150px;">
</div>

[실제 적용한 모습]

예 2: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. 문장 끝.

[예3.: white-space:nowrap; overflow:hidden]
긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바를 표시하지 않도록 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길지만 스크롤바가 표시되지 않았다.

<div style="white-space:nowrap; overflow:hidden;  width:500px; height:150px;">
</div>

[실제 적용한 모습]

예 3: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. 문장 끝.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...