css overflow ( div 스크롤 설정 )

브라우저 스크롤 말고 div에 스크롤을 생성 할 수 있다.

div에 css로 스크롤 생성 하는 방법은 overflow 이다.

최근 게시물이나 메인 화면에 작게 노출해줄때 사용하면 편리하다.

//---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 <style>

    #over1 {

  overflow: hidden;

      width: 200px;

      height: 150px;

  border: 1px solid black;

  margin-bottom:10px;

    }

#over2 {

  overflow-y: scroll;

  overflow-x: hidden;

      width: 200px;

      height: 150px;

  border: 1px solid black;

  margin-bottom:10px;

    }

#over3 {

  overflow: scroll;

      width: 200px;

      height: 150px;

  border: 1px solid black;

  margin-bottom:10px;

    }

    #over4 {

      width: 200px;

      height: 150px;

  border: 1px solid black;

    }

  </style>

1 : overflow: hidden;

   <div id="over1">

overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

</br>

  overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

  </div>

  2. overflow-y: scroll; overflow-x: hidden;

  <div id="over2">

overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

</br>

  overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

  </div>

  3.  overflow: scroll;

  <div id="over3">

overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

</br>

  overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

  </div>

   4.  no overflow

  <div id="over4">

overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

</br>

  overflow1overflow2overflow3

<br/>

overflow1overflow2overflow3

</br>

overflow1overflow2overflow3

  </div>

//---------------------------------------------------------------------------------------------------------------------------------------------------------------------

div 스크롤 설정 overflow 끝 ~ !!