mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Friday, June 16, 2006

HTML-CSS : div 태그에 스크롤바(Scroll Bar) 붙이기


DIV 태그로 그린 박스에 '내용이 많아서 넘칠 경우' 스크롤바를 붙이는 방법입니다.

자세한 설명은 페이지 아래쪽에 있습니다.


원본 HTML/CSS 소스 코드:
<div style="overflow:scroll; width:300px; height:150px; padding:10px; background-color:gold;">

친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.<br />
<br />
다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.<br />
<br />
친구에게 그 이야기를 재차 확인하고 싶었지만 어쩐지 입이 떨어지지 않았다. 자동차로 한두 시간 거리에 그토록 어둠에 찬 곳이 있다는 사실이 우선 믿기지 않았다. 그리고 그런 곳에 사는 것이 왜 그리 즐겁고 들뜬 일인지 짐작할 수조차 없었다.<br />
<br />
</div>



화면 출력 결과:
친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.

다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.

친구에게 그 이야기를 재차 확인하고 싶었지만 어쩐지 입이 떨어지지 않았다. 자동차로 한두 시간 거리에 그토록 어둠에 찬 곳이 있다는 사실이 우선 믿기지 않았다. 그리고 그런 곳에 사는 것이 왜 그리 즐겁고 들뜬 일인지 짐작할 수조차 없었다.




white-space:nowrap; 속성을 추가해 행갈이를 금지시킨 결과:
친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.

다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.

친구에게 그 이야기를 재차 확인하고 싶었지만 어쩐지 입이 떨어지지 않았다. 자동차로 한두 시간 거리에 그토록 어둠에 찬 곳이 있다는 사실이 우선 믿기지 않았다. 그리고 그런 곳에 사는 것이 왜 그리 즐겁고 들뜬 일인지 짐작할 수조차 없었다.




설명:

div 태그에
overflow:scroll;
이라는 스타일을 지정해 주면, div 내용이 넘치든 아니든, 항상 스크롤바가 붙습니다. 이것이 가장 많이 쓰이고 가장 무난하더군요.

overflow:auto;
라는 스타일을 지정해 주면, 내용이 div 박스 밖으로 넘칠 때에만 스크롤바가 붙습니다. 이것도 많이 쓰이는 편이지만, 내용물의 양에 따라서, 스크롤바가 붙었다 안 붙었다 하기에 디자인에 좀 어려움이 있습니다.

overflow:hidden;
으로 하면, div 박스 밖으로 넘치는 것은 보여주지 않고 그냥 숨겨 버립니다. 스크롤바도 붙지 않습니다. 특별한 목적이 있을 때에만 쓰입니다.


white-space:nowrap;
문자열이 길면 다음줄로 자동으로 행갈이가 되는데, nowrap 은 행갈이를 하지 말고 한 줄로 길게 이어서 쓰라는 의미입니다. 프로그래밍 소스 코드 등을 표현할 때에는 행갈이를 하지 않는 것이 자연스럽습니다.


width:300px; height:150px;
div 박스의 가로 세로 크기를 지정하는 것인데, 퍼센트(%)로 지정해도 좋습니다. height 속성을 생략하면 문장의 분량에 맞게 div 박스의 세로 길이가 자동으로 정해집니다. 둘 다 생략하면 스크롤바가 만들어지지 않을 수도 있습니다.


padding:10px;
div 박스 안으로 약간의 여백을 주어 보기 좋게 하는 것입니다. 필수적인 것은 아닙니다.

background-color:gold;
div 박스의 바탕색을 지정하는 것입니다. 필수적인 것은 아닙니다.



div, 특히 스크롤바를 붙인 div 박스는, IE와 파이어폭스에서 서로 다르게 보이는 경우가 많기에 주의가 필요합니다.



▶▶ HTML-CSS] 이미지/사진에 스크롤바 붙여, 좁은 화면에 모두 표시하기; IMG Scroll Bar

▶▶ [HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제

▶▶ [HTML/CSS] 스크롤바(Scrollbar) 색상 변경하기 (IE 전용)

▶▶ [HTML/CSS] 긴 URL 의 행갈이(Wrap)를 위한 TEXTAREA 태그(tag)




tag: html
HTML | CSS | 자바스크립트 JavaScript

2 Comments:
At December 18, 2006 at 10:27 PM, Blogger zizukabi said...

안녕하세요. 물통님.
요 며칠 블로그 글을 쓰다가 맞히는 것이 있었는데, 이 곳이 잘 정리되어 있어 무척 도움이 되었습니다.

가끔 와서 도움을 받겠습니다. ^^

 
At December 19, 2006 at 8:51 AM, Blogger mwultong said...

저의 보잘것없는 블로그가 도움이 되셨다니 저도 기쁩니다.

(∩_∩)

 

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top