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

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_float [2021/07/26 14:16]
emblim98 [예제] 		wiki:css:css_note:css_float [2023/01/13 18:44] (현재)
줄 102: 줄 102:
 \\ \\
 \\ \\
-=====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>
  
줄 190: 줄 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>
  
줄 208: 줄 183:
  
  
-{{tag>오션, CSS icons }}+{{tag>오션, CSS Float }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float.1627276583.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