차이

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

--- wiki:css:css_note:css_float_examples [2021/03/16 10:36]
emblim98
+++ wiki:css:css_note:css_float_examples [2023/01/13 18:44] (현재)
@@ 줄 4: / 줄 4: @@
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-03-15
+  * lastupdate  : 2021-03-16
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 15: / 줄 15: @@
 ======Grid of Boxes / Equal Width Boxes======
 ''float''속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.\\
-====예제====
+==== Example ====
-<code html>
+<code css>
-<!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>Grid of Boxes</title>
     <style>
         * {
@@ 줄 62: / 줄 54: @@
     <p>
-        Note that w also us the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this
+        Note that w also us the clearfix hack to take care of the layout flow,
-        code to see the effect.
+        and that add the box-sizing property to make sure that the box doesn't break due to extra padding.
+        Try to remove this code to see the effect.
     </p>
 </body>
+</code>
-</html>
+====What is box-sizing?====
-</code>
+개의 플로팅 박스를 나란히 쉽게 만들 수 있습니다.\\
-\\
+하지만 각 박스의 너비를 늘리는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.\\
-====3개의 플로팅 박스를 쉽게 나란히 만들 수 있습니다. 하지만 각 박스의 너비를 확대하는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.====
+''%%box-sizing%%'' 속성을 사용하면 박스의 전체 너비(및 높이)에 패딩과 보더를 포함하여\\
+패딩이 상자 내부에 유지되고 깨지지 않도록 할 수 있습니다.\\
 ====''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.====
 \\
@@ 줄 77: / 줄 72: @@
 박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.\\
 ====예제====
-<code html>
+<code css>
 <!DOCTYPE html>
 <html lang="en">
@@ 줄 138: / 줄 133: @@
 하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.\\
 ====예제====
-<code html>
+<code css>
 <!DOCTYPE html>
 <html lang="en">
@@ 줄 202: / 줄 197: @@
 \\
 ====예제====
-<code html>
+<code css>
 <!DOCTYPE html>
 <html lang="en">
@@ 줄 254: / 줄 249: @@
 하이퍼링크 목록과 ''float''속성을 사용하여 가로 배치 메뉴를 만듭니다.\\
 ====예제====
-<code html>
+<code css>
 <!DOCTYPE html>
 <html lang="en">
@@ 줄 403: / 줄 398: @@
 </html>
 </code>
+\\
+\\
+=====All CSS Float Properties=====
+^ Property    ^ Description                                           ^
+| box-sizing  | 요소의 너비와 높이가 계산되는 방법을 정의합니다. 패딩과 보더 포함 여부              |
+| clear       | 어떤 요소가 지워진 요소 옆에 그리고 어느 방향으로 플로트 되는지를 지정              |
+| float       | 요소가 플로트 되는 방법을 지정                                     |
+| overflow    | 콘텐츠가 요소의 박스에서 넘칠 경우 발생하는 작업을 지정                       |
+| overflow-x  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 좌측/우측 가장자리에서 수행할 작업을 지정  |
+| overflow-y  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 상단/하단 가장자리에서 수행할 작업을 지정  |
 {{tag>오션, CSS float examples  }}

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

사용자 도구

사이트 도구

차이

문서 도구