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

 
Previous Post 윈도우 도스창에서의, 파일 비교 명령은? ; 텍스트 파일 / 이진 파일 비교[텍스트 에디터 기초] Replace / Replace All 이란? : 문자열 치환오디오나 윈앰프의 '이퀄라이저'란? : 그래픽 이퀄라이저(Graphic Equalizer)...[QnA] UTF-8 이란 어떤 인코딩입니까?[QnA] 구글에서, 사이트의 제목줄(title) 부분만 검색하기 / 본문만 검색하기[3ds Max 기초] 3DS 맥스로 곡선/직선 그리는 방법: Bezier Curve / ...[HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제일본어 키보드와 특수문자 / 한글 자판으로 일어 입력 / Japanese Keyboard[일본어 학습] 々 는 무슨 기호인가요? 한자인가요?IE로 웹페이지를 저장하려고 하면, '선택한 위치에 웹 페이지를 저장할 수 없습니다'라는 ...

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

Friday, June 16, 2006

코드:
<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)

☞ HTML/CSS/자바스크립트(JavaScript)

2 Comments:
At 10:27 PM, Blogger zizukabi said...

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

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

 
At 8:51 AM, Blogger mwultong said...

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

(∩_∩)

 

Post a Comment

<< Home RSS 2.0 feed

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