차이

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

--- wiki:css:css_note:css_float_examples [2021/03/16 09:28]
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">
+<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>Flexible Boxes</title>
+    <style>
+        .flex-container {
+            display: flex;
+            flex-wrap: nowrap;
+            background-color: dodgerblue;
+        }
+        .flex-container .box {
+            background-color: #f1f1f1;
+            width: 50%;
+            margin: 10px;
+            text-align: center;
+            line-height: 75px;
+            font-size: 30px;
+        }
+    </style>
+</head>
+<body>
+    <div class="flex-container">
+        <div class="box">
+            Box 01 - This is some text to make sure that the content gets really tall. This is some text to make sur that the content gets really tall.
+        </div>
+        <div class="box">
+            Box 02 - My height will follow Box 01.
+        </div>
+    </div>
+    <p>Try to resize the browser window to see the flexible layout.</p>
+    <p>
+        <strong>Note:</strong>Flexbox is not supported in Internet Explorer 10 or earlier versions.
+    </p>
+</body>
+</html>
 </code>
+\\
+\\
+=====Navigation Menu=====
+하이퍼링크 목록과 ''float''속성을 사용하여 가로 배치 메뉴를 만듭니다.\\
+====예제====
+<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>Navigation menu with float property</title>
+    <style>
+        ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #333;
+        }
+        li {
+            float: left;
+        }
+        li a {
+            display: inline-block;
+            color: yellow;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+        }
+        li a:hover {
+            background-color: red;
+        }
+        .active {
+            background-color: blue;
+        }
+    </style>
+</head>
+<body>
+    <ul>
+        <li><a href="#home" class="active">Home</a></li>
+        <li><a href="#news">News</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <li><a href="#about">About</a></li>
+    </ul>
+</body>
+</html>
+</code>
+\\
+\\
+=====Web Layout Example=====
+''float''속성을 사용하여 웹 페이지 전체 레이아웃 작업을 하는 것도 일반적입니다.\\
+====예제====
+<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>Web page Layout using float property</title>
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+        .header,
+        .footer {
+            background-color: grey;
+            color: white;
+            padding: 15px;
+        }
+        .column {
+            padding: 15px;
+            float: left;
+        }
+        .clearfix::after {
+            content: "";
+            clear: both;
+            display: table;
+        }
+        .menu {
+            width: 25%;
+        }
+        .content {
+            width: 75%;
+        }
+        .menu ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+        .menu li {
+            padding: 8px;
+            margin-bottom: 8px;
+            background-color: #33b5e5;
+            color: #ffffff;
+        }
+        .menu li:hover {
+            background-color: #0099cc;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Chania</h1>
+    </div>
+    <div class="clearfix">
+        <div class="column menu">
+            <ul>
+                <li>The Flight</li>
+                <li>The City</li>
+                <li>The Island</li>
+                <li>The Food</li>
+            </ul>
+        </div>
+        <div class="column content">
+            <h1>The City</h1>
+            <p>
+                Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
+            </p>
+            <p>
+                You will lern more about web layout an responsive web pages in a later chapter.
+            </p>
+        </div>
+    </div>
+    <div class="footer">
+        <p>Footer Text</p>
+    </div>
+</body>
+</html>
+</code>
+\\
+\\
+=====All CSS Float Properties=====
+^ Property    ^ Description                                           ^
+| box-sizing  | 요소의 너비와 높이가 계산되는 방법을 정의합니다. 패딩과 보더 포함 여부              |
+| clear       | 어떤 요소가 지워진 요소 옆에 그리고 어느 방향으로 플로트 되는지를 지정              |
+| float       | 요소가 플로트 되는 방법을 지정                                     |
+| overflow    | 콘텐츠가 요소의 박스에서 넘칠 경우 발생하는 작업을 지정                       |
+| overflow-x  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 좌측/우측 가장자리에서 수행할 작업을 지정  |
+| overflow-y  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 상단/하단 가장자리에서 수행할 작업을 지정  |
 {{tag>오션, CSS float examples  }}

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

사용자 도구

사이트 도구

차이

문서 도구