overflow란?
요소 내의 콘텐츠(이미지, 박스, 글자 등)가 너무 커서 요소의 크기를 넘는 경우를 해결해주는 속성이다.
속성 값
visible : 기본 설정 값으로, 흘러 넘치면 그대로 빠져 나가서 요소의 밖에서도 보임.
hidden : 넘친 부분은 잘라서 안 보이게 함.
scroll : 스크롤 바가 생겨서 넘친 부분은 스크롤을 이동하여 확인이 가능.
auto : 컨텐츠의 크기나 양에 따라 스크롤바를 추가를 자동으로 결정.
1. visible
기본 설정된 값이다. 요소의 크기보다 콘텐츠의 크기가 클 때(요소 < 콘텐츠), 콘텐츠가 요소 밖으로 튀어 나간다. 이를 해결하기 위해 overflow의 다른 속성값이 존재한다.
2. hidden
말 그대로 숨기는 것이다. 요소 밖으로 튀어 나온 곳을 숨겨서 없애준다는 것이다.
3. scroll
스크롤 바가 요소에 삽입 되어 넘쳐나는 콘텐츠를 스크롤 바를 이용하여 볼 수 있게 해준다.
4. auto
요소 > 콘텐츠일 때는 visible 처럼 되어 있지만, 요소 < 콘텐츠가 되면 scroll처럼 자동 적용해주는 속성 값이다.
overflow속성을 보통 언제 사용하면 좋을까?
- overflow가 의미하는 바처럼, 요소 바깥으로 흘러 넘치는 것을 방지하고 싶을 때 사용하면 된다.
overflow-x, overflow-y는 누구인가..?
기본적인 속성 값 제외하고도 vscode에 치면 overflow-x와 y가 또 있다.
overflow-x
: 가로, 세로가 모두 요소를 벗어난다고 했을 때 가로는 넘치는 것을 없애주고 세로는 그대로 보여주고 싶다면!!
overflow-y
: 마찬가지로 세로로 넘치는 것은 없애주고 가로로 넘치는 것은 그대로 보여주고 싶을 때!!!
안녕하세요!