[CSS] overflow 속성
2020. 7. 19. 20:12ㆍFront-End/CSS
- overflow 속성
- 지정된 요소를 크기를 벗어났을 때 처리하는 방법
- overflow 속성 값
- visible : 지정된 요소를 벗어나도 출력
- hidden : 지정된 요소를 벗어난 부분은 출력을 하지 않게 처리
- scroll : 지정된 요소에 대한 크기를 벗어나지 않아도 스크롤이 출력
- scroll-y : 세로 축 스크롤
- scroll-x : 가로 축 스크롤
- auto : 지정된 요소를 벗어나면 스크롤이 나오고 넘지 않으면 스크롤이 출력이 되지 않음
- overflow : visible -> width는 200px, height는 50px로 설정이 되어도 visible 속성에 따라 텍스트가 벗어남
- overflow : hidden -> width와 height의 따라서 나머지 부분은 짤림
- overflow : scroll -> width와 height의 크기에 따라서 나머지 부분은 스크롤 할 수 있게 됨
* 빨간색 부분은 가로 스크롤
- overflow : auto -> width와 height의 크기에 따라서 스크롤이 생기지만 세로 스크롤만 생김
'Front-End > CSS' 카테고리의 다른 글
[CSS] float 요소와 clear 요소 (0) | 2020.07.19 |
---|---|
[CSS] position 속성 (0) | 2020.07.19 |
[CSS] display 속성 (0) | 2020.07.15 |
[CSS] margin과 padding (0) | 2020.07.14 |
[CSS] CSS 정의 (0) | 2020.07.11 |