문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_overflow
wiki:css:css_note:css_overflow

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_overflow [2021/03/15 14:14]
emblim98 만듦 		wiki:css:css_note:css_overflow [2023/01/13 18:44] (현재)
줄 77: 줄 77:
 **Note:**''overflow''속성은 지정 높이를 가진 블록 요소에만 적용됩니다.\\ **Note:**''overflow''속성은 지정 높이를 가진 블록 요소에만 적용됩니다.\\
 \\ \\
-**Note:**Mac의 X Lion OS에서, 스크롤 막대는 기본     : shlim@repia.com +**Note:**Mac의 X Lion OS에서, 스크롤 막대는 기본적으로 숨겨져 있고, 사용 중일 때만 표시됩니다.("overflow:scroll"이 설정되었어도)\\
-  * lastupdate  : 2021-03-15 +
-</WRAP> +
-<WRAP clear></WRAP>+
 \\ \\
 +=====overflow: visible=====
 +overflow의 기본 값은 ''visible''이며, 이는 넘치는 부분이 잘리지 않고, 요소의 박스 외부에서 만들어진다는 것을 의미합니다.\\
 +====예제====
 +<code html>
 +<!DOCTYPE html>
 +<html lang="en">
 +
 +<head>
 +    <meta charset="UTF-8">
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +    <title>Overflow</title>
 +    <style>
 +        div {
 +            background-color: lightgray;
 +            width: 200px;
 +            height: 50px;
 +            border: 1px solid black;
 +            overflow: visible;
 +        }
 +    </style>
 +</head>
 +
 +<body>
 +
 +    <h2>CSS Overflow</h2>
 +    <p>
 +        By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:
 +    </p>
 +    <div>
 +        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.
 +    </div>
 +
 +</body>
 +
 +</html>
 +</code>
 \\ \\
-=====Source of the article====  +\\ 
-  * [[https://www.w3schools.com/css/css_overflow.asp|CSS Layout - Overflow]]+=====Overflow: hidden===== 
 +''hidden''값을 가지면, 넘치는 부분은 잘려지고, 콘텐츠의 나머지 부분은 숨겨집니다.:\\ 
 +====예제==== 
 +<code html> 
 +<!DOCTYPE html> 
 +<html lang="en"> 
 + 
 +<head> 
 +    <meta charset="UTF-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 +    <title>overflow: hidden</title> 
 +    <style> 
 +        div { 
 +            background-color: lightgrey; 
 +            width: 200px; 
 +            height: 50px; 
 +            border: 2px dotted black; 
 +            overflow: hidden; 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 + 
 +    <h2>CSS Overflow: hidden</h2> 
 +    <p> 
 +        With th hidden value, the overflow is clipped, and the rest of the content is hidden: 
 +    </p> 
 +    <p>Try to remove the overflow property to understand how it works.</p> 
 + 
 +    <div> 
 +        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. 
 +    </div> 
 + 
 +</body> 
 + 
 +</html> 
 +</code>
 \\ \\
 \\ \\
-======CSS Overflow====== +=====overflow: scroll===== 
-CSS ''overflow'' 속성은 너무 커서 영역에 맞지 않는 콘텐츠에 발생하는 일을 제어합니다.\\+''scroll''값을 설정하면, 넘치는 부분은 잘려지고, 박스 내부에 스크롤하기 위한 스크롤 막대가 추가됩니다. 필요하지 않더라도 가로 그리고 세로 방향 에 스크롤 막대가 추가될 것 입니다.\\
 ====예제==== ====예제====
 <code html> <code html>
줄 98: 줄 172:
     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CSS Overflow</title>+    <title>overflow: scroll</title>
     <style>     <style>
-        #overflowTest { +        div { 
-            background-color: #4caf50; +            background-color: lightgrey; 
-            color: white; +            width: 200px;
-            padding: 15px; +
-            width: 50%;+
             height: 100px;             height: 100px;
-            border: 3px solid crimson; +            border: 2px dotted redd; 
-            overflow: scroll;   /* 스크롤 막대를 생성한다.*/ +            overflow: scroll;
-        } +
- +
-        #overflowTest strong { +
-            color: black;+
         }         }
     </style>     </style>
줄 120: 줄 188:
     <h2>CSS Overflow</h2>     <h2>CSS Overflow</h2>
     <p>     <p>
-        The overflow property controls what happens to content that is too big to fit into an area.+        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):
     </p>     </p>
  
-    <div id="overflowTest"> +    <div> 
-        <strong>This text is really long and the height of its contatiner is only 100 pixels. Therefore, a scrollbar is +        You can use the overflow property when your want to haver better control of the layout. The overflow property 
-        added to help th reader to scroll the content.</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing +        specifies what happens if content overflows an element's box.
-        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.+
     </div>     </div>
  
줄 141: 줄 203:
 \\ \\
 \\ \\
-=====CSS Overflow===== +=====overflow: auto===== 
-''ovrflow''속성은 요소의 콘텐츠가 너무 커서 지정 영역에 맞지 않을 때 콘텐츠를 자르거나 스크롤 막대를 추가할 지를 지정합니다.\\+''auto''값은 ''scroll''과 비슷하지만, 필요한 경우에만 스크롤 막대를 추가합니다.\\ 
 +====예제==== 
 +<code html> 
 +<!DOCTYPE html> 
 +<html lang="en"> 
 + 
 +<head> 
 +    <meta charset="UTF-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 +    <title>Overflow: auto</title> 
 +    <style> 
 +        div { 
 +            background-color: lightgray; 
 +            width: 200px; 
 +            height: 50px; 
 +            border: 3px solid crimson; 
 +            overflow: auto; 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 + 
 +    <h2>CSS Overflow: auto</h2> 
 +    <p> 
 +        The auto value is similar to scroll, only it adds scrollbars when necessary: 
 +    </p> 
 + 
 +    <div> 
 +        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. 
 +    </div> 
 + 
 +</body> 
 + 
 +</html> 
 +</code>
 \\ \\
-''ovrflow''속성에는 하기의 값들이 있습니다.\\ 
-  * %%''visible''%% - 기본 값, 오버플로우 (넘지는 부분)는 잘리지 않습니다. 콘텐츠는 요소의 박스 외부에서 만들어집니다. 
-  * %%''hidden''%% = 오버플로우는 잘려지고, 콘텐츠의 나머지는 보이지 않습니다. 
-  * %%''scroll''%% - 오버플로우는 잘려지고, 스크롤 막대가 추가되어 콘텐츠의 나머지를 볼 수 있습니다. 
-  * %%''auto''%% - ''scroll''과 비슷하지만 필요한 경우에만 스크롤 막대를 추가합니다.  
 \\ \\
-**Note:**''overflow''속성은 지정 높이를 가진 블록 요소에만 적용됩니다.\\+=====Overflow-x and overflow-y===== 
 +''overflow-x''와 ''overflow-y'' 속성은 콘텐츠의 넘치는 부분을 가로 또는 세로 (또는 양쪽 모든 방향으로) 방향으로만 변경할 지를 지정합니다.\\
 \\ \\
-**Note:**Mac의 X Lion OS에서, 스크롤 막대는 기본적으로 숨겨져 있고, 사용 중일 때만 표시됩니다.("overflow:scroll"이 설저되어 있어도)\\+''overflow-x''는 콘텐츠의 좌측/우측 가장자리 방향으로 무엇을 할 지를 지정합니다.\\ 
 +''overflow-y''는 콘텐츠의 상단/하단 가장자리 방향으로 무엇을 할 지를 지정합니다.\\ 
 +====예제==== 
 +<code html> 
 +<!DOCTYPE html> 
 +<html lang="en">
  
 +<head>
 +    <meta charset="UTF-8">
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +    <title>overflow-x and overflow-y</title>
 +    <style>
 +        div#overflow-x {
 +            background-color: lightgray;
 +            width: 200px;
 +            height: 50px;
 +            border: 2px dotted crimson;
 +            overflow-x: scroll;  /* Add horizontal scrollbar */
 +            overflow-y: hidden;  /* Hide vertical scrollbar */
 +        }
  
-=====+        div#overflow-y { 
 +            background-color: lightgray; 
 +            width: 200px; 
 +            height: 50px; 
 +            border: 2px dotted blue; 
 +            overflow-x: hidden;      /* Hide horizontal scrollbar */ 
 +            overflow-y: scroll;      /* Add vertical scrollbar */ 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 + 
 +    <h2>CSS overflow-x and overflow-y</h2> 
 +    <p>You can also change the overflow of content horizontally or vertically.</p> 
 +    <p>overflow-x specifies what to do whith the left/right edges of the content.</p> 
 +    <p>overflow-y specifies what to do with the top/bottom edges of the content.</p> 
 +    <br> 
 +    <strong>overflow-x</strong> 
 +    <div id="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. 
 +    </div> 
 +    <br> 
 +    <strong>overflow-y</strong> 
 +    <div id="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. 
 +    </div> 
 + 
 +</body> 
 + 
 +</html> 
 +</code> 
 +\\ 
 +\\ 
 +====All CSS Overflow Properties==== 
 +^ Property    ^ Description                                                ^ 
 +| overflow    | 콘텐츠가 요소의 박스에서 넘치는 경우 발생하는 작업을 지정합니다.  | 
 +| overflow-x  | 콘텐츠가 요소의 콘텐츠 영역에서 넘지는 경우 콘텐츠의 좌측/우측 가장자리 방향으로 수행할 작업을 지정합니다. | 
 +| overflow-y  | 콘텐츠가 요소의 콘첸츠 영역에서 넘지는 경우 콘텐츠의 상단/하단 가장자리 방향으로 수행할 작업을 지정합니다. |
      
 {{tag>오션, CSS overflow, visible, hidden, scroll, auto, overflow-x, overflow-y }} {{tag>오션, CSS overflow, visible, hidden, scroll, auto, overflow-x, overflow-y }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_overflow.1615785250.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki