CSS Layout - Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area.

 

overflow 속성은 한 영역의 맞추기 너무나 커진 내용물이 무엇을 할지 제어하는 것이다?

 

CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

 

overflow 속성은 내용물을 접을것인지, 스크롤바를 추가할건지 명시한다. (요소의 내용이 명시된 영역안에서 맞추기 너무 클경우)

 

overFlow 속성은 다음의 값을 가진다.

 

visible 기본속성이고, 넘쳐진것들은 접지않는다. 내용물을 요소 밖으로 렌더링한다.

hidden 넘쳐진것들을 접고, 내용물의 나머지는 보여지지 않을 것이다.

scroll 넘쳐진것은 접어질것이고, 스크롤바가 내용물의 나머지를 보기 위해 추가되어진다.

자동 스크롤과 비슷하지만, 이것은 오직 필요할때만, 스크롤을 추가한다.

 

Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

 

주의 :  overFlow 속성은 오직 명시된 높이의 block 요소에서만 작동한다.

주의 : 맥 운영체제에서는 스크롤바는 기본적으로 숨겨졌고, 오직, 사용되어질때만? 보여진다? 심지어 overflow:scroll 이 설정되어있더라도?

 

overflow: visible

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

 

기본적으로 overflow 는 보여진다. 이것은 접혀지지 않는다는 것을 의미하고, 이것은 요소의 바깥으로 렌더링 된다.

 

overflow: hidden

With the hidden value, the overflow is clipped, and the rest of the content is hidden:

 

hidden 값으로 설정되면, 넘쳐난 부분은 접혀지고, 요소의 나머지는 숨겨진다.

 

overflow: scroll

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

 

 

scroll 값으로 설정하는 것은 넘쳐난 부분은 접혀지고, 스크롤바가 추가되어진다. 수평적으로 수직적으로 모두 스크롤바가 추가 된다는 것을 명심하라, 심지어 만일 너가 이것이 필요없다고 할지라도.

 

overflow: auto

The auto value is similar to scroll, but it adds scrollbars only when necessary:

 

auto 값은 scroll값과 비슷하다, 그치만, 오직 필요할때만 스크롤바가 추가된다.

 

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.

 

 

overflow-x와 overflow-y의 속성은 단순하게 수직적으로든지 혹은 수평적으로든지만 내용의 넘쳐난 부분을 바꿀건지 명시한다.

overflow-x 는 내용물의 왼쪽과 오른쪽에 무엇을 할지 명시하고,

overflow-y는 내용물의 위와 아래에 무엇을 할지 명시한다.