차이

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

--- wiki:css:css_note:css_float [2021/03/15 17:00]
emblim98 만듦
+++ wiki:css:css_note:css_float [2023/01/13 18:44] (현재)
@@ 줄 4: / 줄 4: @@
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-03-15
+  * lastupdate  : 2021-07-26
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 12: / 줄 12: @@
   * [[https://www.w3schools.com/css/css_float.asp|CSS Layout - float and clear]]
 \\
+CSS ''%%float%%'' 속성은 요소가 어떻게 __떠 있어야(float)__ 할 지를 지정합니다.\\
+CSS ''%%clear%%'' 속성은 어떤 요소가 __속성이 제거된 요소(the cleared element)__ 옆에서 플로트 될 수 있고, 어떤 방향에서 플로트 될 수 있는 지를 지정합니다.\\
 \\
-CSS ''float'' 속성은 요소가 어떻게 떠 있어야 할지를 지정합니다.\\
-CSS ''clear'' 속성은 어떤 요소가 클리어 속성이 해제된 요소 옆에 그리고 어떤 방향에서 떠 있을 수 있는 지를 지정합니다.\\
-\\
-======The float Property======
-''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\
-''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\
-  * %%''left''%% - 요소는 컨테이너의 좌측에 떠 있습니다.
-  * %%''right''%% - 요소는 컨테이너의 우측에 떠 있습니다.
-  * %%''none''%% - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다.
-  * %%''inherit''%% - 요소는 부모 요소의 float값을 상속 받습니다.
-\\
-가장 간단한 용도로, ''float'' 속성은 이미지 주위의 텍스트를 감쌀 때 사용할 수 있습니다.\\
-====float: right; 예제====
-<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>float: right</title>
-    <style>
-        img {
-            width: 170px;
-            height: 170px;
-            margin-left: 15px;
-            float: right;
-        }
-    </style>
-</head>
-<body>
-    <h2>Float Right</h2>
-    <p>
-        In this example, the imagee will float to the right in the paragraph, and the text in the paragraph will wrap
-        around the image.
-    </p>
-    <p>
-        <img src="pineapple.jpg" alt="pineapple">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
-        purus. Mauris quis diam velit.
-    </p>
-</body>
-</html>
-</code>
-\\
-\\
-=====float: left; 예제=====
-하기의 예제는 텍스트에서 좌측으로 이미지가 떠 있으라고 지정합니다.\\
-====예제====
-<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>Float Left</title>
-    <style>
-        img {
-            width: 170px;
-            height: 170px;
-            float: left;
-            margin-right: 15px;
-        }
-    </style>
-</head>
-<body>
-    <h2>Float Left</h2>
-    <p>
-        In this example, the image will float to the left in the paragraph, and the text in th paragraph will wrap
-        around the image.
-    </p>
-    <p>
-        <img src="pineapple.jpg" alt="pineapple">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
-        purus. Mauris quis diam velit.
-    </p>
-</body>
-</html>
-</code>
-\\
-\\
-=====No float 예제=====
-하기의 예제에서 이미지는 텍스트에서 발생하는 위치에만 표시됩니다.(float: none;):\\
-<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>No float</title>
-    <style>
-        img {
-            width: 170px;
-            height: 170px;
-            float: none;
-        }
-    </style>
-</head>
-<body>
-    <h2>Float None</h2>
-    <p>
-        In this example, the image will be displayed just where it occurs in the text (float: none;).
-    </p>
-    <p>
-        <img src="pineapple.jpg" alt="pineapple">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
-        purus. Mauris quis diam velit.
-    </p>
-</body>
-</html>
-</code>
-\\
-\\
-=====Float Next to Each Other=====
-일반적으로 div 요소들은 각각      : shlim@repia.com
-  * lastupdate  : 2021-03-15
-</WRAP>
-<WRAP clear></WRAP>
-\\
-\\
-=====Source of the article====
-  * [[https://www.w3schools.com/css/css_float.asp|CSS Layout - float and clear]]
-\\
-\\
-CSS ''float'' 속성은 요소가 어떻게 떠 있어야 할지를 지정합니다.\\
-CSS ''clear'' 속성은 어떤 요소가 클리어 속성이 해제된 요소 옆에 그리고 어떤 방향에서 떠 있을 수 있는 지를 지정합니다.\\
-\\
 ======The float Property======
 ''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\
 ''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\
-  * %%''left''%% - 요소는 컨테이너의 좌측에 떠 있습니다.
+  * left - 요소는 컨테이너의 좌측에 떠 있습니다.
-  * %%''right''%% - 요소는 컨테이너의 우측에 떠 있습니다.
+  * right - 요소는 컨테이너의 우측에 떠 있습니다.
-  * %%''none''%% - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다.
+  * none - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다.
-  * %%''inherit''%% - 요소는 부모 요소의 float값을 상속 받습니다.
+  * inherit - 요소는 부모 요소의 float값을 상속 받습니다.
 \\
 가장 간단한 용도로, ''float'' 속성은 이미지 주위의 텍스트를 감쌀 때 사용할 수 있습니다.\\
-====float: right; 예제====
+==== Example - float: right; ====
-<code html>
+<code css>
-<!DOCTYPE html>
+<style>
-<html lang="en">
+  img {
+    width: 170px;
-<head>
+    height: 170px;
-    <meta charset="UTF-8">
+    margin-left: 15px;
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    float: right;
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  }
-    <title>float: right</title>
+</style>
-    <style>
-        img {
-            width: 170px;
-            height: 170px;
-            margin-left: 15px;
-            float: right;
-        }
-    </style>
 </head>
 <body>
-    <h2>Float Right</h2>
+  <h2>Float Right</h2>
-    <p>
+  <p>
-        In this example, the imagee will float to the right in the paragraph, and the text in the paragraph will wrap
+    In this example, the image will float to the right in the paragraph,
-        around the image.
+    and the text in the paragraph will wrap around the image.
-    </p>
+  </p>
-    <p>
+  <p>
-        <img src="pineapple.jpg" alt="pineapple">
+    <img src="pineapple.jpg" alt="pineapple"
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
+    style="width:170px; height:170px, margin-left:15px;">
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
+      nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
+      est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
+      Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
+      interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
+      In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
-        purus. Mauris quis diam velit.
+      Integer fringillacongue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
+      Cras ac leo purus. Mauris quis diam velit.
     </p>
 </body>
-</html>
 </code>
 \\
 \\
-=====float: left; 예제=====
+===== Example - float: left; =====
-하기의 예제는 텍스트에서 좌측으로 이미지가 떠 있으라고 지정합니다.\\
+아래 예제는 이미지가 텍스트에서 왼쪽으로 __떠 있도록(float)__ 지정합니다.\\
 ====예제====
-<code html>
+<code css>
-<!DOCTYPE html>
+  <style>
-<html lang="en">
+    img {
+      float: left;
-<head>
+    }
-    <meta charset="UTF-8">
+  </style>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  </head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Float Left</title>
-    <style>
-        img {
-            width: 170px;
-            height: 170px;
-            float: left;
-            margin-right: 15px;
-        }
-    </style>
-</head>
-<body>
+  <body>
     <h2>Float Left</h2>
     <p>
-        In this example, the image will float to the left in the paragraph, and the text in th paragraph will wrap
+      In this example, the image will float to the left in the paragraph,
-        around the image.
+      and the text in the paragraph will wrap around the image.
     </p>
     <p>
-        <img src="pineapple.jpg" alt="pineapple">
+      <img
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
+        src="pineapple.jpg"
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
+        alt="Pineapple"
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
+        style="width: 170px; height: 170px; margin-right: 30px"
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
+      />
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
+      nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
+      ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
-        purus. Mauris quis diam velit.
+      auctor vitae massa. Fusce luctus vestibulum augue ut
+      aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
+      Praesent convallis urna a lacus interdum ut hendrerit risus congue.
+      Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
+      In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
+      dui eget tellus gravida venenatis.
+      Integer fringilla congue eros non fermentum. Sed dapibus
+      pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
     </p>
+  </body>
-</body>
-</html>
 </code>
 \\
 \\
-=====No float 예제=====
+===== Example- No float =====
-하기의 예제에서 이미지는 텍스트에서 발생하는 위치에만 표시됩니다.(float: none;):\\
+하기 예제에서 이미지는 텍스트에서 위치한 곳에서 표시됩니다.(float: none;):\\
-<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>No float</title>
     <style>
-        img {
+      img {
-            width: 170px;
+        float: none;
-            height: 170px;
+      }
-            float: none;
-        }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <h2>Float None</h2>
     <p>
-        In this example, the image will be displayed just where it occurs in the text (float: none;).
+      In this example, the image will be displayed just where it occurs in the text (float: none;).
     </p>
     <p>
-        <img src="pineapple.jpg" alt="pineapple">
+      <img src="pineapple.jpg" alt="Pineapple" style="width: 170px; height: 170px" />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
-        lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
+      interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
-        est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
+      nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
-        facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
+      aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis
-        interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero
+      urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
-        sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.Integer fringilla
+      ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
-        congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
+      dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus
-        purus. Mauris quis diam velit.
+      pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
     </p>
+  </body>
-</body>
-</html>
 </code>
 \\
 \\
-=====Float Next to Each Other=====
+=====Example- Float Next to Each Other=====
-일반적으로 div 요소들은 서로 위에 표시됩니다. 그러나 ''float: left''를 사용하면 요소가 서로 옆에 떠 있게 할 수 있습니다.\\
+일반적으로 div 요소들은 서로 위에 표시됩니다(블록 요소처럼). 그러나 ''float: left''를 사용하면 요소들이 서로 옆에 플로트되도록 할 수 있습니다.\\
 ====예제====
-<code html>
+<code css>
-<!DOCTYPE html>
+<title>Float Next to Each Other</title>
-<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>Float Next to Each Other</title>
     <style>
-        div {
+      div {
-            float: left;
+        float: left;
-            padding: 15px;
+        padding: 15px;
-            color: white;
+        color: white;
-        }
+      }
-        .div1 {
+      .div1 {
-            background: red;
+        background: red;
-        }
+      }
-        .div2 {
+      .div2 {
-            background: dodgerblue;
+        background: dodgerblue;
-        }
+      }
-        .div3 {
+      .div3 {
-            background: green;
+        background: green;
-        }
+      }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <h2>Float Next to Each Other</h2>
@@ 줄 368: / 줄 168: @@
     <div class="div2">Div 02</div>
     <div class="div3">Div 03</div>
+  </body>
-</body>
-</html>
 </code>
@@ 줄 386: / 줄 183: @@
-{{tag>오션, CSS icons }}
+{{tag>오션, CSS Float }}

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

사용자 도구

사이트 도구

차이

문서 도구