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

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_float [2021/07/26 13:59]
emblim98 [Example - float: right;] 		wiki:css:css_note:css_float [2023/01/13 18:44] (현재)
줄 61: 줄 61:
 \\ \\
 \\ \\
-=====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>
  
줄 197: 줄 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>
  
줄 215: 줄 183:
  
  
-{{tag>오션, CSS icons }}+{{tag>오션, CSS Float }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float.1627275556.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