[CSS] Overflow

안녕하세요 동기 여러분! 오늘은 Overflow에 대해 알아봅시다. Overflow라는 단어 주방에서 일할 때 자주쓰는 단어인데 여기서 만나니 반갑네용ㅋ

 

Overflow

    <p>
      하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루<br> 
      천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루<br>
      우리의 짱구는 정말 못말려 (짱구야~)<br> 
      짓궂은 장난은 나에게 맡기세요<br>
      이 세상 누구보다 자신이 있다구요<br>
      이리모여 모두 모여 양파를 먹어보자<br>
      그런 눈으로 바라보면 부끄럽죠<br>
      엄마~ 아빠~<br>
      나는 인기만점 (짱구야~)<br>
      천방지축 어리둥절 빙글빙글 모두가 정신이 없네~<br>
      짱구는 대단하네 짱구는 천재라네~<br>
      다음은 무엇을 할까?<br>
      하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루<br> 
      천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루<br>
      우리의 짱구는 정말 못말려 (짱구야~)<br> 
      짓궂은 장난은 나에게 맡기세요<br>
      이 세상 누구보다 자신이 있다구요<br>
      이리모여 모두 모여 양파를 먹어보자<br>
      그런 눈으로 바라보면 부끄럽죠<br>
      엄마~ 아빠~<br>
      나는 인기만점 (짱구야~)<br>
      천방지축 어리둥절 빙글빙글 모두가 정신이 없네~<br>
      짱구는 대단하네 짱구는 천재라네~<br>
      다음은 무엇을 할까?<br>
    </p>

p {
  background-color: cornflowerblue;
  width: 400px;
  height: 300px;
}

위와 같은 코드를 실행하면 아래와 같은 화면이 나오는데요.

 

이렇게 넘쳤을 때 overflow: 값;을 넣으면 넘쳐버린 내용에 대한 설정을 할 수 있습니다.

 

p {
  background-color: cornflowerblue;
  width: 400px;
  height: 300px;
  overflow: scroll;
}

overflow: scroll;을 넣으면 아래와 같이 스크롤이 생기면서 모든 내용을 확인할 수 있게 됩니다.

ㅋㅋㅋ 이건 스샷이라 스크롤이 작동하지 않아요

 

 

---

 

프로퍼티(Overflow)의 값들

값	설명	생김새
visible	내용이 잘리지 않고 요소 박스 밖의 내용도 다 보여줌
hidden	넘쳐난 내용이 잘리고 숨겨짐
scroll	넘쳐난 내용은 잘리지만 그 내용이 스크롤바 박스 안으로 들어가 내용은 다 나옴(스크롤바는 필요하지 않더라도 가로와 세로 모두 생성됨)
auto	scroll과 비슷 하지만 스크롤바가 필요할 때만 생김. -> 생김새를 보면 가로 스크롤바가 사라짐!!!

 

 

---

 

오늘의 느낌

overflow와 관련된 프로퍼티가 더 있습니다!!!

다음시간에는 overflow-x와 overflow-y에 대해 알아보도록 하겠습니다.