overflow속성이란 무엇 인가?

오늘은 네이버 지식인에서 제게 질문한 사항을 소개 하는 포스팅으로 꾸며 봤습니다. 질문자는 스크롤 만드는 방법과 overflow-x overflow-y 가로와 세로스크롤 동시설정에 대한 질문을 해 아래는 제가 답변 한 내용들 입니다.

박스를 만들어 정리 해 보도록 합니다.
예제를 만들기 위해 박스에 주어지는 스타일을 직접입력 방식으로 코딩 해 보도록 하겠습니다.

overflow 속성 함께 보기

답변

 

스크롤을 만들기 위해서는 콘텐츠가 감싸고 있는 영역 태그를 넘칠 경우에사용 하는 것입니다.

   

 

예를 들어

 <div style=" width:340px; height:130px; border:1px solid red;">

단지 이렇게만 코딩 되어 있다면 내용이 영역을 넘지 못해 스크롤은 무용해 지겠죠 이유는 아래와 같습니다.</div>

단지 이렇게만 코딩 되어 있다면 내용이 영역을 넘지 못하겠죠 이유는 아래와 같습니다.

영역 태그에는 내용이 영역을 벗어 나게 되면 대부분 기본적으로 줄바꿈이 자동으로 생성되도록 설정 되어 있기 때문 입니다.

<div style=" width:340px; height:70px; border:1px solid red; white-space:nowrap;">

이렇게  white-space:nowrap 속성과 값을  추가 해서 코딩 한다면  어떻게  될까요이렇게 줄바꿈이 일어 나지 못하도록 강제 하는 속성을 추가 하게 되면 내용이 영역을 넘어 버리 겠죠 이유는 아래와 같습니다.</div>

 

이렇게 white-space:nowrap 속성과 값을 추가 해서 코딩 한다면 어떻게 될까요이렇게 줄바꿈이 일어 나지 못하도록 강제 하는 속성을 추가 하게 되면 내용이 영역을 넘어 버리 겠죠 이유는 아래와 같습니다.

지금위의 문단 안에는 br태그나 p태그같은 줄바꿈 태그를 하나도 주지 않은 상태 입니다.

그기다white-space:nowrap속성과 값으로 줄바꿈이 일어나지 못하도록 설정이 되어 있기 때문에 줄바꿈이 일어 나지 못해 박스 밖으로 넘쳐 나게 되는 것입니다.

이럴경우 아래 예제 처럼 코딩을 해 보도록 합니다.

<div style="width:360px; height:200px; border:1px solid red; white-space:nowrap;">

이렇게  white-space:nowrap 속성과 값을  추가 해서 코딩 했을때 줄바꿈이 일어 나지 못하도록 강제 하게 됩니다. 이럴때 <br />태그 <p>태그 로 줄바꿈을 해서 정리 해 주면 되겠죠

이렇게 white-space:nowrap 속성과 값을 추가 해서 <br />
코딩 했을때 이렇게 줄바꿈이 일어 나지 못하도록 강제 하는<br />
속성을 추가 하게 되어 내용이 영역을 넘어 버렸을때<br />
br태그나p태그로 줄바꿈을 해 정리 해 주면 되겠죠 <br />
콘텐츠 용량이 많아 질수록 스크롤 되는 길이도 늘어나게
<br /> 될것 입니다.

콘텐츠 내용이 감싸고 있는 div태그의 영역의 가로 보다 길어 지거나 세로의 영역 문단이 많아 영역을 벗어 날  경우 스크롤을 이용해 div태그 영역 안에 가두어 두면서도 내용은 볼수 있도록 설정 하기 위해 스크롤을 만들어 내용을 간단하게 정리 해 주도록 합니다.

아래 처럼 이런식으로 코딩을 해 주면 되겠죠

<div style=" width:340px; height:200px; border:1px solid red; white-space:nowrap; overflow-x:scroll;">

위처럼 영역 안에 줄바꿈태그로 줄 바꿈을 해 주어 문단을 정리 할수도 있겠죠
그대신 박스 안에 가로 스크롤을 만들어 줄바꿈 없는 상태로 스크롤을 움직여서 보는 방법을 사용 하고자 할때 overflow-x:scroll 이렇게 가로 스크롤 속성을 추가 해 주게 되면 가로로 스크롤이 생성 되는 것입니다. 이때 줄바꿈 태그는 원하는 위치에 삽입 하여 무한정 길어 지는것을 방지 하도록 합니다.<br/>
이때 white-space:nowrap속성을 함께 추가 해 주어야 합니다. 이 속성으로 인해 자동 줄 바꿈을 제어 할수가 있겠죠.
그리고 세로영역은 충분히 주어 넘치는것을 막도록 해야 겠죠</div>

위처럼 영역 안에 줄바꿈태그로 줄 바꿈을 해 주어 문단을 정리 할수도 있겠죠
그대신 박스 안에 가로 스크롤을 만들어 줄바꿈 없는 상태로 스크롤을 움직여서 보는 방법을 사용 하고자 할때
overflow-x:scroll 이렇게 가로 스크롤 속성을 추가 해 주게 되면 가로로 스크롤이 생성 되는 것입니다. 이때 줄바꿈 태그는 원하는 위치에 삽입 하여 무한정 길어 지는것을 방지 하도록 합니다.
이때 white-space:nowrap속성을 함께 추가 해 주면 자동 줄 바꿈을 제어 할수가 있겠죠 그리고 세로영역은 충분히 주어 넘치는것을 막도록 해야 겠죠

아래는 overflow:auto속성으로 가로와 세로 두가지 스크롤을 한꺼번에 설정한 예제 입니다.

 <div style="width:360px; height:200px; border:1px solid red; white-space:nowrap; overflow:auto; background:rgb(230,250,250);">

만약 세로 스크롤만 만들고 싶다면 x대신 y를 넣어 주면 됩니다.<br/>이때는 
white-space:nowrap; 속성을 제거 해 자동 줄바꿈 으로 설정 하든지 <br/>줄바꿈 태그로 가로문단을 제어 해주어 세로 스크롤을 만들수 있도록 유도해 줘야 하겠죠<br/>  그리고 overflow:auto; 속성과 값으로 두가지를 한꺼번에 다 적용할수도 있습니다.

그리고 세로 스크롤 역시 x대신 y를 넣어 주면 됩니다.
이때는 white-space:nowrap; 속성을 제거 해 자동 줄바꿈 으로 설정 하든지
줄바꿈 태그로 가로문단을 제어 해주어 세로 스크롤을 만들수 있도록 유도 할수가 있겠죠
그리고 현제 박스 처럼 overflow:auto; 속성과 값으로 두가지를 한꺼번에 다 적용할수도 있습니다.
그리고 세로 스크롤 역시 x대신 y를 넣어 주면 됩니다.
이때는 white-space:nowrap; 속성을 제거 해 자동 줄바꿈 으로 설정 하든지
줄바꿈 태그로 가로문단을 제어 해주어 세로 스크롤을 만들수 있도록 유도 할수가 있겠죠
그리고 현제 박스 처럼 overflow:auto; 속성과 값으로 두가지를 한꺼번에 다 적용할수도 있습니다.
그리고 세로 스크롤 역시 x대신 y를 넣어 주면 됩니다.
이때는 white-space:nowrap; 속성을 제거 해 자동 줄바꿈 으로 설정 하든지
줄바꿈 태그로 가로문단을 제어 해주어 세로 스크롤을 만들수 있도록 유도 할수가 있겠죠
그리고 현제 박스 처럼 overflow:auto; 속성과 값으로 두가지를 한꺼번에 다 적용할수도 있습니다.

<div style=" width:360px; height:100px; border:1px solid red; white-space:nowrap; overflow:hidden; background:rgb(230,250,250);">

만약 박스를 넘어가는 부분에 대해 보이고 싶지 않을때는overflow:hidden

을 설정 해주시면 되고요</div> 아래는 overflow :hidden 으로 했을 경우의 모습입니다.

만약 박스를 넘어가는 부분에 대해 보이고 싶지 않을때는overflow:hidden 을 설정 해주시면 됩니다.

아래는 visibility:visible 을 주었을때의 모습입니다.
white -space:nowrap의 값이 있는 경우에만 아래와 같은 효과를 나타 냅니다.

 

만약 위의 코딩에서 hidden없이 박스 영역을 벗어나도록설정 하고 싶다면hidden속성은 제거 하고 visibility:visible속성과 값을 주면 됩니다.

 

만약 위의 코딩에서 white-space:nowrap속성 없이 visibility 속성을 주게 되면 기본으로 돌아가는 효과가 나타나 영역을 초과 하는 문단은 줄바꿈이 생겨 나게 됩니다.

이렇게 코딩 해 주면 되겠죠

<div style="BORDER-TOP: red 1px solid; HEIGHT: 170px; BORDER-RIGHT: red 1px solid; WIDTH: 100%; BACKGROUND:rgb(230,250,260); BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; VISIBILITY: visible">

만약 위의 코딩에서 hidden없이 박스 영역을 벗어나도록설정 하고 싶다면 hidden속성은 제거 하고 visibility:visible속성과 값을 주면 됩니다.

아래는 결과입니다.

만약 위의 코딩에서 hidden없이 박스 영역을 벗어나도록설정 하고 싶다면 hidden속성은 제거 하고 visibility:visible속성과 값을 주면 됩니다.