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
'Frontend > CSS' 카테고리의 다른 글
| 17. table, flex (0) | 2024.07.06 |
|---|---|
| 16. 미디어 쿼리 (0) | 2024.07.06 |
| 14. 가상 클래스 (0) | 2024.07.06 |
| 13. 속성 선택자 (0) | 2024.07.05 |
| 12. 연결 선택자 (0) | 2024.07.05 |