====== CSS Layout - Overflow ====== * description : CSS width, max-width, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_overflow.asp|CSS Layout - Overflow]] \\ \\ ======CSS Overflow====== CSS ''overflow'' 속성은 너무 커서 영역에 맞지 않는 콘텐츠에 발생하는 일을 제어합니다.\\ ====예제==== CSS Overflow

CSS Overflow

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

This text is really long and the height of its contatiner is only 100 pixels. Therefore, a scrollbar is added to help th reader to scroll the content.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
\\ \\ ''ovrflow''속성은 요소의 콘텐츠가 너무 커서 지정 영역에 맞지 않을 때 콘텐츠를 자르거나 스크롤 막대를 추가할 지를 지정합니다.\\ \\ ''ovrflow''속성에는 하기의 값들이 있습니다.\\ * %%''visible''%% - 기본 값, 오버플로우 (넘지는 부분)는 잘리지 않습니다. 콘텐츠는 요소의 박스 외부에서 만들어집니다. * %%''hidden''%% = 오버플로우는 잘려지고, 콘텐츠의 나머지는 보이지 않습니다. * %%''scroll''%% - 오버플로우는 잘려지고, 스크롤 막대가 추가되어 콘텐츠의 나머지를 볼 수 있습니다. * %%''auto''%% - ''scroll''과 비슷하지만 필요한 경우에만 스크롤 막대를 추가합니다. \\ **Note:**''overflow''속성은 지정 높이를 가진 블록 요소에만 적용됩니다.\\ \\ **Note:**Mac의 X Lion OS에서, 스크롤 막대는 기본적으로 숨겨져 있고, 사용 중일 때만 표시됩니다.("overflow:scroll"이 설정되었어도)\\ \\ =====overflow: visible===== overflow의 기본 값은 ''visible''이며, 이는 넘치는 부분이 잘리지 않고, 요소의 박스 외부에서 만들어진다는 것을 의미합니다.\\ ====예제==== Overflow

CSS Overflow

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

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
\\ \\ =====Overflow: hidden===== ''hidden''값을 가지면, 넘치는 부분은 잘려지고, 콘텐츠의 나머지 부분은 숨겨집니다.:\\ ====예제==== overflow: hidden

CSS Overflow: hidden

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

Try to remove the overflow property to understand how it works.

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
\\ \\ =====overflow: scroll===== ''scroll''값을 설정하면, 넘치는 부분은 잘려지고, 박스 내부에 스크롤하기 위한 스크롤 막대가 추가됩니다. 필요하지 않더라도 가로 그리고 세로 방향 에 스크롤 막대가 추가될 것 입니다.\\ ====예제==== overflow: scroll

CSS Overflow

Setting the overflow 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):

You can use the overflow property when your want to haver better control of the layout. The overflow property specifies what happens if content overflows an element's box.
\\ \\ =====overflow: auto===== ''auto''값은 ''scroll''과 비슷하지만, 필요한 경우에만 스크롤 막대를 추가합니다.\\ ====예제==== Overflow: auto

CSS Overflow: auto

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

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
\\ \\ =====Overflow-x and overflow-y===== ''overflow-x''와 ''overflow-y'' 속성은 콘텐츠의 넘치는 부분을 가로 또는 세로 (또는 양쪽 모든 방향으로) 방향으로만 변경할 지를 지정합니다.\\ \\ ''overflow-x''는 콘텐츠의 좌측/우측 가장자리 방향으로 무엇을 할 지를 지정합니다.\\ ''overflow-y''는 콘텐츠의 상단/하단 가장자리 방향으로 무엇을 할 지를 지정합니다.\\ ====예제==== overflow-x and overflow-y

CSS overflow-x and overflow-y

You can also change the overflow of content horizontally or vertically.

overflow-x specifies what to do whith the left/right edges of the content.

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


overflow-x
You cna use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

overflow-y
You cna use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
\\ \\ ====All CSS Overflow Properties==== ^ Property ^ Description ^ | overflow | 콘텐츠가 요소의 박스에서 넘치는 경우 발생하는 작업을 지정합니다. | | overflow-x | 콘텐츠가 요소의 콘텐츠 영역에서 넘지는 경우 콘텐츠의 좌측/우측 가장자리 방향으로 수행할 작업을 지정합니다. | | overflow-y | 콘텐츠가 요소의 콘첸츠 영역에서 넘지는 경우 콘텐츠의 상단/하단 가장자리 방향으로 수행할 작업을 지정합니다. | {{tag>오션, CSS overflow, visible, hidden, scroll, auto, overflow-x, overflow-y }}