728x90
overfolow란 html 작식 요소가 부모 요소보다 컨텐츠의 크기가 더 클 경우 자식 요소를 어떻게 보여줄지를 결정한다.
ex) overflow-x, overflow-y, overflow
예시 코드
<body>
<!-- overflow -->
<!-- html 자식 요소가 부모 요소보다 콘텐츠의 크기가 -->
<!-- 더 클 경우 자식 요소를 어떻게 보여줄지를 결정 -->
<!-- overflow-x, overflow-y -->
<!-- overflow -->
<!-- overflow:scroll 이면 인터넷익스플로러같은 브라우저의 경우 컨텐츠의 길이, 높이에 상관없이 스크롤바가 생긴다. -->
<!-- overflow:auto 이면 컨텐츠의 길이,높이가 부모요소를 벗어나지 않는다면 스크롤바가 보이지 않고, 벗어난 순간에 스크롤바가 자동으로 생김 -->
<div
style="
height: 200px;
width: 150px;
border: 3px solid green;
/* overflow-y: scroll;
overflow-x: scroll; */
overflow: auto;
"
>
<p>컨텐츠</p>
<p>컨텐츠</p>
<p>컨텐츠</p>
<p>컨텐츠</p>
<p>컨텐츠</p>
<p>컨텐츠</p>
<p>컨텐츠</p>
</div>
</body>| 속성 | 내용 |
| overflow:scroll | 인터넷 익스플로러같은 브라우저의 경우 컨텐츠의 길이, 높이에 상관없이 스크롤바가 생긴다. |
| overflow:auto | 컨텐츠의 길이, 높이가 부모 요소를 벗어나지 않는다면 스크롤바가 보이지 않고, 벗어난 순간에 스크롤바가 자동으로 생긴다. |
728x90
'HTML, CSS' 카테고리의 다른 글
| CSS - 컨테이너 아이템 정렬(justify-content) (0) | 2023.10.02 |
|---|---|
| CSS - 레이아웃을 만들기 위한 CSS (table 레이아웃, flexbox 레이아웃) (0) | 2023.10.02 |
| CSS - HTML요소의 위치 정의 (0) | 2023.09.30 |
| CSS - border 스타일링 (0) | 2023.09.30 |
| CSS - background 스타일링 (0) | 2023.09.30 |
