overflow 와 overflow-y 를 사용하여 필요한 경우에만 스크롤이 생기게 하자.

아래 내용은, 필요할 때만 스크롤이 생기게 하는 코드입니다..
정해진 width 안에서 해당 폭을 넘어서면 overflow:auto 에 의해서 가로 스크롤이 자동으로 생기고,
내용에 따라 자동으로 세로가 늘어나기 때문에 세로 스크롤은 overflow-y 를 hidden 으로 합니다.
<div style="width:612px; overflow:auto; overflow-y:hidden"><%= info.getContent() %></div>

overflow 에 대한 옵션값은 아래와 같다.

visible	가로와 세로 값에 상관없이 내용이 모두 보여진다. 가로/세로 스크롤이 표시되지 않는다. 설정한 width 값을 넘어서기 때문에 레이아웃이 깨지지 않도록 주의한다.
hidden	width 나 height 를 넘어서는 부분은 가려진다. 스크롤이 표시되지 않는다
auto	내용이 모두 보여진다. 가로/세로 스크롤이 필요에 따라 자동으로 표시된다.
scroll	내용이 모두 보여진다. 가로/세로 스크롤이 항상 표시된다.

자, 그러면 테스트 해 볼까요.. 외곽은 width 가 100px 에 height 가 50px 입니다.

1.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px>  <div style="border:1px red dashed">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> 텍스트는 외곽의 width 에 맞춰서 줄바꿈이 되었지만, 이미지는 자신의 width 에 맞춰서 옆으로 늘어났습니다. overflow 옵션은 기본값이 visible 이다 보니, overflow 스타일을 설정하지 않아도.. 결과적으로 외곽의 width 를 무시하고 이미지가 모두 보이도록 최종 결과물이 나옵니다. 물론, 스크롤이 생성되지 않습니다. width 값이 중시되지 않는 레이아웃 이라면 상관없지만, width 값을 따라 주어야 하는 레이아웃에서는 이렇게 사용하면 안 되겠죠.
2.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> 외곽의 width 가 먹지 않아서 내곽에 width 를 먹여 봅니다. 텍스트는 생각대로 결과가 나오지만, 역시나 이미지는 뻐팅기는 군요.. height 에 대해서도 width 와 마찬가지로 적용됩니다. 내곽이든 외곽이든 설정해 놓은 height 를 초과하여 본문이 생성되면, width 와 height 모두 본문에 사용되는 좌우상하 공간만큼 레이아웃이 생성됩니다.
3.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px; overflow:hidden">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> overflow:hidden 값을 주니까.. 이제 이미지도 얌전히 width 값을 받아 들입니다. 이제는 외곽의 widht 와 height 에 맞게 표시되었습니다. 그런데, 이미지가 제대로 나오지 않으니까.. 문제가 됩니다. hidden 은 외곽이나 내곽의 width 와 height 의 지배를 받지만, 본래의 내용이 온전히 보여지지 못합니다. 여기서 '한글~' 과 이미지 부분은 <nobr>...</nobr> 로 둘러싸면 말줄임이 됩니다. 외곽의 div 에는 아직도 overflow:visible 이 적용된다는 점 잊지 마세요.
4.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px; overflow:auto">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> overflow:auto 로 하면.. 외곽이나 내곽의 width 와 height 의 지배를 받습니다. width 와 height 를 넘어서는 부분에 대해서는 스크롤이 생깁니다. 이곳에서는 가로 스크롤이 표시되면서, 세로값을 깍아 먹었기 때문에 세로 스크롤이 생겼습니다. 의도한 것은 세로 스크롤은 생기지 않고 가로 스크롤만 나오면 되는데 말입니다. 외곽의 div 에는 아직도 overflow:visible 이 적용된다는 점 잊지 마세요.
5.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px; overflow:scroll">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> overflow:scroll 은 항상 스크롤이 표시되는 겁니다. 세로 스크롤도 항상 보여주어야 하지만, 가로와 달리 세로의 경우에는 이미지가 모두 보여지는 범위에 맞기 때문에 활성화 되지는 않았습니다. 그리고, 외곽에 설정한 height 를 초과하게 됩니다. 내곽이든 외곽이든 height 가 본문에 표시되는 영역을 초과하여도 scroll 옵션은 가로/세로 스크롤 바가 항상 표시되는 것이기 때문에.. 본문 내용이 정상적으로 보여지는 상황이라면 Disable 된 형태로 스크롤바가 표시됩니다. 외곽의 div 에는 아직도 overflow:visible 이 적용된다는 점 잊지 마세요.
6.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px; overflow:auto; overflow-y:hidden">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> 자, 이제 4번에서 설명한 세로 스크롤바가 나오지 않게 하려면 overflow-y 에 hidden 값을 줍니다. 외곽과 내곽의 width 와 height 의 지배를 받으면서도 본문에 표시되는 내용에 따라 가로 스크롤이 생깁니다. 세로 스크롤은 overflow-y 에 hidden 값을 주었기 때문에 표시되지 않습니다. 재미있는 것은, overflow-auto 가 먹으면 내곽의 width 와 height 제한에 걸리지만, overflow-y 에 hidden 값을 주면 height 의 경우 내곽의 height 와 외곽의 height 제한이 적용되지 않고 보여줄 내용을 모두 표시한다는 것입니다. 당연히 본문의 가로폭이 내곽의 가로폭을 넘어서면 스크롤이 생기지만, 세로높이는 내곽이나 외곽에서 설정한 제한에 영향을 받지 않고 본문의 모든 내용이 보여집니다. 따라서, width 제한이 있는 곳에서 6번과 같은 코드를 많이 활용하게 되겠지요.. 외곽의 div 에는 아직도 overflow:visible 이 적용된다는 점 잊지 마세요.
7.	<div style="width:100px; height:50px; border:1px blue solid; padding:5px">  <div style="border:1px red dashed; width:100px; overflow:scroll; overflow-y:hidden">   한글을 사랑합니다.<br />   <img src="" width="150" height="50"/>  </div> </div> 6번과 거의 동일한 결과가 나옵니다. 다른 점은, overflow 가 scroll 이다 보니.. 좌우 스크롤이 항상 보여진다는 겁니다. 본문 내용이 많지 않다면 보여질 필요가 없기 때문에, 아무래도 7번 보다는 6번을 선호하게 되겠지요.. ^^v 외곽의 div 에는 아직도 overflow:visible 이 적용된다는 점 잊지 마세요.

 

()()   v
(~.~)()
이상입니다.