15. Overflow

Frontend/CSS

15. Overflow

예린lynn 2024. 7. 6. 01:01

728x90

visible
hidden
scroll
auto

visible

기본값
특정 요소가 박스를 넘어가도 그대로 보여준다.

- 활용 코드

<style>
.lyrics {
  overflow: visible;
  width: 150px;
  height: 50px;
  border: 3px solid blue;
}
</style>
<body>
<div class="lyrics">
  이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다.
  html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.
</div>
</body>

hidden

부모 요소의 범위를 넘는 자식 요소의 부분은 숨긴다.

- 활용 코드

<style>
.lyrics {
  overflow: hidden;
  width: 150px;
  height: 50px;
  border: 3px solid blue;
}
</style>
<body>
<div class="lyrics">
  이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다.
  html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.
</div>
</body>

scroll

자식 요소의 범위가 더 크더라도, 스크롤바를 생성해서 볼 수 있도록 한다.

- 활용 코드

<style>
.lyrics {
  overflow: scroll;
  width: 150px;
  height: 50px;
  border: 3px solid blue;
}
</style>
<body>
<div class="lyrics">
  이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다.
  html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.
</div>
</body>

auto

컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바를 생성한다.

- 활용 코드

<style>
.lyrics {
  overflow: auto;
  width: 150px;
  height: 50px;
  border: 3px solid blue;
}
</style>
<body>
<div class="lyrics">
  이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다.
  html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.
</div>
</body>

- 실행 결과

이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다. html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.

white-space: nowrap

줄 바꿈 하지 않고, 사용자가 가로 방향으로 스크롤 할 수 있도록 설정한다.

- 활용 코드

<style>
.lyrics {
  overflow: auto;
  white-space: nowrap;
  width: 150px;
  height: 50px;
  border: 3px solid blue;
}
</style>
<body>
<div class="lyrics">
  이화여자대학교 컴퓨터공학과 22학번 김예린입니다. 현재 프론트엔드 공부 중입니다.
  html, css 공부하면 그 이후에 javascript 공부도 하고 react 공부도 하고 할게 산더미다.
</div>
</body>

overflow-x, overflow-y

overflow는 가로와 세로 부분 모두에 일괄적으로 적용된다.
overflow-x : 가로 부분이 어떻게 보일지 선택하는 속성
overflow-y: 세로 부분이 어떻게 보일지 선택하는 속성

728x90