div에 스크롤바(Scroll Bar) 넣기

Electron.js에서 UI를 구성하면서 많은 내용(예를 들어 로그를 출력하기 위한 div)을 처리할 필요가 있었습니다. 다음은 html에서 div에 scroll bar를 처리하는 방법을 설명합니다.

 

div에 스크롤바 사용하기

미리 보기

별 헤는 밤

계절이 지나가는 하늘에는
가을로 가득 차 있습니다.

나는 아무 걱정도 없이
가을 속의 별들을 다 헤일 듯합니다.

가슴 속에 하나 둘 새겨지는 별을
이제 다 못 헤는 것은
쉬이 아침이 오는 까닭이요,
내일 밤이 남은 까닭이요,
아직 나의 청춘이 다하지 않은 까닭입니다.

별 하나에 추억과
별 하나에 사랑과
별 하나에 쓸쓸함과
별 하나에 동경과
별 하나에 시와
별 하나에 어머니, 어머니,

어머님, 나는 별 하나에 아름다운 말 한마디씩 불러봅니다. 소학교때 책상을 같이 했던 아이들의 이름과, 패, 경, 옥 이런 이국소녀들의 이름과 벌써 애기 어머니 된 계집애들의 이름과, 가난한 이웃사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, ｢프란시스․쟘｣ ｢라이너․마리아․릴케｣ 이런 시인의 이름을 불러봅니다.

이네들은 너무나 멀리 있습니다.
별이 아슬히 멀 듯이,

어머님,
그리고 당신은 멀리 북간도에 계십니다.

나는 무엇인지 그리워
이 많은 별빛이 나린 언덕 위에
내 이름자를 써보고,
흙으로 덮어 버리었습니다.

딴은 밤을 새워 우는 벌레는
부끄러운 이름을 슬퍼하는 까닭입니다.

그러나 겨울이 지나고 나의 별에도 봄이 오면
무덤 위에 파란 잔디가 피어나듯이
내 이름자 묻힌 언덕 위에도
자랑처럼 풀이 무성할 게외다.

 

줄바꿈 없이 보이기(white-space:nowrap;)

별 헤는 밤

계절이 지나가는 하늘에는
가을로 가득 차 있습니다.

나는 아무 걱정도 없이
가을 속의 별들을 다 헤일 듯합니다.

가슴 속에 하나 둘 새겨지는 별을
이제 다 못 헤는 것은
쉬이 아침이 오는 까닭이요,
내일 밤이 남은 까닭이요,
아직 나의 청춘이 다하지 않은 까닭입니다.

별 하나에 추억과
별 하나에 사랑과
별 하나에 쓸쓸함과
별 하나에 동경과
별 하나에 시와
별 하나에 어머니, 어머니,

어머님, 나는 별 하나에 아름다운 말 한마디씩 불러봅니다. 소학교때 책상을 같이 했던 아이들의 이름과, 패, 경, 옥 이런 이국소녀들의 이름과 벌써 애기 어머니 된 계집애들의 이름과, 가난한 이웃사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, ｢프란시스․쟘｣ ｢라이너․마리아․릴케｣ 이런 시인의 이름을 불러봅니다.

이네들은 너무나 멀리 있습니다.
별이 아슬히 멀 듯이,

어머님,
그리고 당신은 멀리 북간도에 계십니다.

나는 무엇인지 그리워
이 많은 별빛이 나린 언덕 위에
내 이름자를 써보고,
흙으로 덮어 버리었습니다.

딴은 밤을 새워 우는 벌레는
부끄러운 이름을 슬퍼하는 까닭입니다.

그러나 겨울이 지나고 나의 별에도 봄이 오면
무덤 위에 파란 잔디가 피어나듯이
내 이름자 묻힌 언덕 위에도
자랑처럼 풀이 무성할 게외다.

 

코드 보기

<div style="overflow: scroll; width: 100%; height: 150px; padding: 10px;">

<b>별 헤는 밤</b><br />
<br />
계절이 지나가는 하늘에는<br />
가을로 가득 차 있습니다.<br />
<br />
나는 아무 걱정도 없이<br />
가을 속의 별들을 다 헤일 듯합니다.<br />
<br />
가슴 속에 하나 둘 새겨지는 별을<br />
이제 다 못 헤는 것은<br />
쉬이 아침이 오는 까닭이요,<br />
내일 밤이 남은 까닭이요,<br />
아직 나의 청춘이 다하지 않은 까닭입니다.<br />
<br />
별 하나에 추억과<br />
별 하나에 사랑과<br />
별 하나에 쓸쓸함과<br />
별 하나에 동경과<br />
별 하나에 시와<br />
별 하나에 어머니, 어머니,<br />
<br />
어머님, 나는 별 하나에 아름다운 말 한마디씩 불러봅니다. 소학교때 책상을 같이 했던 아이들의 이름과, 패, 경, 옥 이런 이국소녀들의 이름과 벌써 애기 어머니 된 계집애들의 이름과, 가난한 이웃사람들의 이름과, 비둘기, 강아지, 토끼, 노새, 노루, ｢프란시스․쟘｣ ｢라이너․마리아․릴케｣ 이런 시인의 이름을 불러봅니다.<br />
<br />
이네들은 너무나 멀리 있습니다.<br />
별이 아슬히 멀 듯이,<br />
<br />
어머님,<br />
그리고 당신은 멀리 북간도에 계십니다.<br />
<br />
나는 무엇인지 그리워<br />
이 많은 별빛이 나린 언덕 위에<br />
내 이름자를 써보고,<br />
흙으로 덮어 버리었습니다.<br />
<br />
딴은 밤을 새워 우는 벌레는<br />
부끄러운 이름을 슬퍼하는 까닭입니다.<br />
<br />
그러나 겨울이 지나고 나의 별에도 봄이 오면<br />
무덤 위에 파란 잔디가 피어나듯이<br />
내 이름자 묻힌 언덕 위에도<br />
자랑처럼 풀이 무성할 게외다.<br />

</div>

 

스타일 설명

overflow: scroll;

항상 스크롤바가 생성됩니다. overflow는 내용이 div의 크기를 벗어났을 때 사용하는 속성입니다.

 

overflow: auto;

스크롤바가 내용이 div의 영역을 넘으면 자동으로 생성됩니다.

 

overflow: hidden;

내용이 넘어가면 스크롤바 없이 내용을 보이지 않게 합니다.

 

white-space:nowrap;

자동으로 불 바꿈 여부를 설정합니다. 자동으로 줄 넘김을 하지 말고 nowrap 은 한 줄로 길게 보여줍니다. 프로그램 코드를 출력하는 경우에 깔끔하게 보여줍니다.

 

overflow-x, overflow-y 속성을 사용하여 가로와 세로의 스크롤바를 제어할 수 있습니다.

로그 출력을 처리하는 경우에는 overflow-y 속성과 white-space속성을 사용하여 깔끔하게 처리할 수 있습니다.