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

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_float [2021/03/15 17:14]
emblim98 		wiki:css:css_note:css_float [2023/01/13 18:44] (현재)
줄 4: 줄 4:
   * author      : 오션   * author      : 오션
   * email       : shlim@repia.com   * email       : shlim@repia.com
-  * lastupdate  : 2021-03-15+  * lastupdate  : 2021-07-26
 </WRAP> </WRAP>
 <WRAP clear></WRAP> <WRAP clear></WRAP>
줄 12: 줄 12:
   * [[https://www.w3schools.com/css/css_float.asp|CSS Layout - float and clear]]   * [[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====== ======The float Property======
 ''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\ ''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\
 ''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\ ''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\
-  * %%''left''%% - 요소는 컨테이너의 좌측에 떠 있습니다. +  * left - 요소는 컨테이너의 좌측에 떠 있습니다. 
-  * %%''right''%% - 요소는 컨테이너의 우측에 떠 있습니다. +  * right - 요소는 컨테이너의 우측에 떠 있습니다. 
-  * %%''none''%% - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다. +  * none - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다. 
-  * %%''inherit''%% - 요소는 부모 요소의 float값을 상속 받습니다.+  * inherit - 요소는 부모 요소의 float값을 상속 받습니다.
 \\ \\
 가장 간단한 용도로, ''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> </head>
  
 <body> <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>     </p>
 </body> </body>
- 
-</html> 
 </code> </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>     <h2>Float Left</h2>
  
     <p>     <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>
  
     <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>     </p>
- +  </body>
-</body> +
-</html>+
 </code> </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>     <style>
-        img { +      img { 
-            width: 170px; +        float: none; 
-            height: 170px; +      }
-            float: none; +
-        }+
     </style>     </style>
-</head> +  </head>
- +
-<body>+
  
 +  <body>
     <h2>Float None</h2>     <h2>Float None</h2>
  
     <p>     <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>
  
     <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>     </p>
- +  </body>
-</body> +
- +
-</html>+
 </code> </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>     <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>     </style>
-</head> +  </head>
- +
-<body>+
  
 +  <body>
     <h2>Float Next to Each Other</h2>     <h2>Float Next to Each Other</h2>
  
줄 206: 줄 168:
     <div class="div2">Div 02</div>     <div class="div2">Div 02</div>
     <div class="div3">Div 03</div>     <div class="div3">Div 03</div>
- +  </body>
-</body> +
- +
-</html>+
 </code> </code>
  
줄 224: 줄 183:
  
  
-{{tag>오션, CSS icons }}+{{tag>오션, CSS Float }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float.1615796077.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