[CSS]overflow(code)
See the Pen xxgRQWj by minsucoding (@minsucoding) on CodePen.
안녕하세요 오늘 overflow 속성의 대해서 알려드릴려고해요~
overflow속성은 정해진 공간이 있을때 그 공간을 벗어나는걸 원하지않을때 스크롤을 만들거나 감추어주거나 할때 사용하게됩니다
만약 부모요소의 높이가 정해져 있지 않다면 자식요소들을 기준으로 맞춰주는 속성값입니다
그래서 width를 지정해주고 overflow를 해주는 페이지를 많이 보셨을텐데 그 이유가 자식이 길어질지 어떨지 모르기 때문에 overflow:hidden을 통해서 자식에게 맞춰주기 위함입니다
서론보다는 바로 본론이죠 예제 먼저 보시고 가실게요~
우선 overflow에 대해서 설명 하기 전에 overflow는 공간이 차지하는 범위를 어떻게할지에 대한 속성이에요
즉 공간이 정해져있지 않다면 사용을 할수없는 속성이에요!
overflow를 사용하기 이전에 height,width 값이 잘 나타나는지 확인해주세요!
처음 설명 드릴 속성값은 overflow: visible이에요
overflow: visible은 요소가진 기본값이에요
정해진 width,height를 기준으로 요소가 가진 공간보다 안에들어갈 무언가의 크기가 더 크다면! 공간을 벗어나는 부분까지도 보여주는 속성값이에요
예제를 보시면 차지한 공간을 벗어난 부분도 다 보여지는걸 볼수있죠
overflow: hidden은 요소가 가진 공간보다 안에들어갈 무언가의 크기가 더 크다면! 공간 이상으로 나오는 부분을 보여지지 않게 해주는 속성값이에요
예제를 보시면 차지한 공간을 넘어서 나오는건 안보여지는걸 볼수있죠
이때 white-space: norwap을 사용하면 가로로 벗어나는 부분까지도 hidden이 적용되어서 안보이게 되니 상황에 맞게 적절하게 사용하시길 바랍니다!
overflow: scroll은 요소의 안에 들어갈 무언가의 크기랑 전혀 상관없이 무조건 스크롤을 보여주는 속성값이에요
scroll은 가로와 세로 두종류가 있고 스크롤바 모두 공간을 차지해요
안에 들어가있는 텍스트를 보시면 알수있죠~
마지막으로 overflow: auto는 요소의 안에 들어갈 무언가의 크기에 맞춰서 요소의 크기보다 크다면 스크롤이 생기고 작다면 안생기게 해주는 속성값이에요
세로로 내용이 넘어간다면 세로스크롤바가 생길것이고 white-space: nowrap을 해서 가로로 길어진다면 가로스크롤바가 생기겠죠~
오늘은 overflow에 대해서 알아보았는데요 많은 도움이 되셨기를 바라면서 다음에 더 유익한 정보로 찾아뵙겠습니다!