Younho9 NotesCSS 속성 07. overflow
❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료를 정리한 것입니다.
overflow
요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어 - 단축 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| visible | 넘친 부분을 자르지 않고 그대로 보여줌 | visible |
| hidden | 넘친 부분을 잘라내고, 보이지 않도록 함 | |
| scroll | 넘친 부분을 잘라내고, 스크롤 바를 이용하여 볼 수 있도록 함 | |
| auto | 넘친 부분이 있는 경우만 잘라내 스크롤 바를 이용하여 볼 수 있도록 함 |
사용법
overflow: visible;overflow: hidden;overflow: scroll;overflow: auto
overflow: visible;overflow: hidden;overflow: scroll;overflow: auto
예제
<div class="parent"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div>
<div class="parent"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div>
.parent {width: 300px;height: 250px;border: 4px solid;overflow: scroll;}.parent .child {width: 100px;height: 100px;background: tomato;border: 4px solid red;display: flex;justify-content: center;align-items: center;font-size: 40px;}
.parent {width: 300px;height: 250px;border: 4px solid;overflow: scroll;}.parent .child {width: 100px;height: 100px;background: tomato;border: 4px solid red;display: flex;justify-content: center;align-items: center;font-size: 40px;}
☝️ scroll 은 overflow가 발생하지 않는 경우에도 스크롤 바를 생성한다. 반면 auto 는 overflow가 발생하는 경우에만 스크롤 바를 생성한다.
overflow-x , overflow-y
x축과 y축에 대해 각각 overflow를 설정할 수 있다.
그런데 scroll 과, auto 의 경우에 둘 중 하나만 설정하면 모든 방향에 대해 스크롤 바가 적용된다.
overflow-x: scroll;
overflow-x: scroll;
overflow-y: scroll;
overflow-y: scroll;
overflow-x: auto;
overflow-x: auto;
overflow-y: auto;
overflow-y: auto;
Reference
패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong