Friday, June 16, 2006
HTML-CSS : div 태그에 스크롤바(Scroll Bar) 붙이기
DIV 태그로 그린 박스에 '내용이 많아서 넘칠 경우' 스크롤바를 붙이는 방법입니다.
자세한 설명은 페이지 아래쪽에 있습니다.
원본 HTML/CSS 소스 코드:
화면 출력 결과:
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)
자세한 설명은 페이지 아래쪽에 있습니다.
원본 HTML/CSS 소스 코드:
<div style="overflow:scroll; width:300px; height:150px; padding:10px; background-color:gold;">
친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.<br />
<br />
다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.<br />
<br />
친구에게 그 이야기를 재차 확인하고 싶었지만 어쩐지 입이 떨어지지 않았다. 자동차로 한두 시간 거리에 그토록 어둠에 찬 곳이 있다는 사실이 우선 믿기지 않았다. 그리고 그런 곳에 사는 것이 왜 그리 즐겁고 들뜬 일인지 짐작할 수조차 없었다.<br />
<br />
</div>
친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.<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
안녕하세요. 물통님.
요 며칠 블로그 글을 쓰다가 맞히는 것이 있었는데, 이 곳이 잘 정리되어 있어 무척 도움이 되었습니다.
가끔 와서 도움을 받겠습니다. ^^
저의 보잘것없는 블로그가 도움이 되셨다니 저도 기쁩니다.
(∩_∩)
<< Home