블로거 게시물에 도표가 클때 상하좌우 스크롤 넣기

스크롤,태그

구글의 블로거에서 내용 작성 시 도표가 너무 커서 사이드바까지 내용을 침범하게 되는 경우가 있어 매우 복잡해 집니다.

아래 태그를 이용해서 스크롤을 넣으면 설정된 크기의 윈도우내에서 상하좌우로 스크롤을 할 수 있기 때문에 매우 유용합니다.

네이버 블로그에서도 도표의 크기가 크면 자동으로 스크롤이 생깁니다.




아래 코드입니다.

overflow:scroll;   항상 스크롤바를 넣어줍니다.

overflow:auto; 내용이 DIV 박스 밖으로 넘칠 때에만 스크롤바를 넣어줍니다.

overflow:hidden; 내용이 박스 밖으로 넘치는 것은 보여주지 않습니다. 스크롤바도 붙지 않습니다. 특별한 목적이 있을 때에만 쓰입니다.


white-space:nowrap;  DIV 박스 내에서 글이 다음 행으로 넘어가지 않습니다.


width:300px; height:150px;
div 박스의 가로 세로 크기를 지정해줍니다. 퍼센트(%)로 지정이 가능합니다.
height 속성을 생략하면 문장의 분량에 맞게 div 박스의 세로 길이가 자동으로 정해집니다.


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

background-color:gold;  DIV 박스의 바탕색을 지정합니다.


예)

overflow:scroll; 항상 스크롤바를 넣어줍니다. overflow:auto; 내용이 DIV 박스 밖으로 넘칠 때에만 스크롤바를 넣어줍니다. overflow:hidden; 내용이 박스 밖으로 넘치는 것은 보여주지 않습니다. 스크롤바도 붙지 않습니다. 특별한 목적이 있을 때에만 쓰입니다. white-space:nowrap; DIV 박스 내에서 글이 다음 행으로 넘어가지 않습니다. width:300px; height:150px; div 박스의 가로 세로 크기를 지정해줍니다. 퍼센트(%)로 지정이 가능합니다. height 속성을 생략하면 문장의 분량에 맞게 div 박스의 세로 길이가 자동으로 정해집니다. padding:10px; div 박스 안으로 약간의 여백을 주어 보기 좋게 하는 것입니다. 필수적인 것은 아닙니다. background-color:gold; DIV 박스의 바탕색을 지정합니다.