overflow 속성은 html의 자식 요소가 부모 요소보다 크기가 클때
자식 요소를 어떻게 보여줄지를 결정하는 속성이다
<!-- overflow -->
<!-- html 자식 요소가 부모 요소보다 콘텐츠의 크기가 -->
<!-- 더 클 경우 자식 요소를 어떻게 보여줄지를 결정 -->
<div style="height: 200px; width: 150px; border: 3px solid green"></div>
이렇게 <div> 태그로 높이 200px 넓이 150px인 3px두께의 초록색 직선으로 박스를 만들었다
그리고 <div>태그 안에 자식들을 만들어 보자
<body>
<!-- overflow -->
<!-- html 자식 요소가 부모 요소보다 콘텐츠의 크기가 -->
<!-- 더 클 경우 자식 요소를 어떻게 보여줄지를 결정 -->
<div style="height: 200px; width: 150px; border: 3px solid green">
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
</div>
</body>
이렇게 <div>태그 안에 <p>태그인 자식 요소를 많이 만들면
이렇게 부모인 <div>태그보다 <p>태그의 요소의 크기가 더 커서 박스 밖으로 나와있는걸 볼 수 있다
만약 내가 저 박스안에 콘텐츠를 넣고 싶을때
이럴때 overflow 속성을 사용한다
<div
style="
height: 200px;
width: 150px;
border: 3px solid green;
overflow-y: scroll;
"
>
<div>태그에 overflow-y: scroll; 이라는 속성을 입혔다
overflow는 overflow-x,-y 가 있다고 한다, 각각 x축과 y축을 뜻한다
그러면 네모 박스 안에 콘텐츠들이 들어가고 스크롤이 생긴것도 볼 수 있다
overflow-y: scroll 속성값은 y축(세로)에 있는 자식 요소들이 부모 요소를 벗어나 버린경우
스크롤을 줘라는 뜻인것이다
<div
style="
height: 200px;
width: 150px;
border: 3px solid green;
overflow-y: scroll;
"
>
<p>
콘텐츠 콘텐츠 콘텐츠 콘텐츠콘텐츠 콘텐츠콘텐츠 콘텐츠콘텐츠 콘텐츠콘텐츠
콘텐츠콘텐츠 콘텐츠콘텐츠 콘텐츠콘텐츠 콘텐츠
</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
<p>콘텐츠</p>
</div>
</body>
이번에는 x축(가로)으로 자식 요소를 길게 만들기 위해 위의 코드처럼 코드를 작성하면
x축은 부모 요소의 크기에 맞게 들어간걸 볼 수 있다
이건 <p>태그가 가진 기본적인 속성 때문에 그렇다고 한다
<style>
p {
white-space: nowrap;
}
</style>
그래서 태그 선택자로 <p>태그들에 white-space: nowrap 이라는 속성을 입혔다
이것은 해당 태그를 두번째줄로 내리지않고 한줄로 쓰겠다는 의미라고 한다
그러면 이렇게 부모인 네모박스를 벗어난다
요기서
<div
style="
height: 200px;
width: 150px;
border: 3px solid green;
overflow-x: scroll;
"
>
부모인 <div>태그에 y값을 빼고
overflow-x: scroll 속성값을 주면
이렇게 x축(가로)으로 스크롤이 생겨 자식 요소가 부모에 다 담겨진다
그런데 분명 위의 코드처럼 y축 값을 지우고 x축 값을 입력했는데 y축(세로)로도
스크롤이 생긴걸 볼 수 있다
이건 크롬에서 자동으로 잡아주는걸 수 도 있다고 한다
인터넷익스플로러에서는 x값 y값을 각자 줘야한다고 한다
<div
style="
height: 200px;
width: 150px;
border: 3px solid green;
overflow: scroll;
"
>
보통 위의 코드처럼 overflow: scroll 이렇게 속성값을 줘서 사용한다고 한다
저렇게 하면 자동으로 x축 y축 둘다 scroll이 생긴다고 한다
overflow:scroll 속성값을 줬을때
만약 자식이 부모보다 이미 작은 상태인데도 스크롤이 생겨면 이상할것이다
크롬은 자식이 부모보다 이미 작은 상태일때 scroll 속성을 줘도 스크롤이 생기지 않는다
하지만 인터넷 익스플로우는 scroll 속성값을 주면 자식이 부모보다 작아도 스크롤이 생긴다고 한다
그래서 auto 속성값을 쓴다고 한다
<!-- overflow:scroll ->인터넷 익스플로우 같은 브라우저의 경우 콘텐츠의 길이, 높이에 상관없이 무조건 스크롤이 생김 -->
<!-- overflow:auto -> 콘텐츠의 길이, 높이가 부모요소를 벗어나지 않는다면 스크롤바가 안보이고,
벗어난 순간에 스크롤바가 자동으로 생김 -->
