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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Layout - float and clear ======
<WRAP left notice 80%>
  * description : CSS width, max-width, 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-26
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_float.asp|CSS Layout - float and clear]]
\\
CSS ''%%float%%'' 속성은 요소가 어떻게 __떠 있어야(float)__ 할 지를 지정합니다.\\
CSS ''%%clear%%'' 속성은 어떤 요소가 __속성이 제거된 요소(the cleared element)__ 옆에서 플로트 될 수 있고, 어떤 방향에서 플로트 될 수 있는 지를 지정합니다.\\
\\

======The float Property======
''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\
''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\
  * left - 요소는 컨테이너의 좌측에 떠 있습니다.
  * right - 요소는 컨테이너의 우측에 떠 있습니다.
  * none - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다.
  * inherit - 요소는 부모 요소의 float값을 상속 받습니다.
\\
가장 간단한 용도로, ''float'' 속성은 이미지 주위의 텍스트를 감쌀 때 사용할 수 있습니다.\\
==== Example - float: right; ====
<code css>
<style>
  img {
    width: 170px;
    height: 170px;
    margin-left: 15px;
    float: right;
  }
</style>
</head>

<body>

  <h2>Float Right</h2>
  <p>
    In this example, the image 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"
    style="width:170px; height:170px, margin-left:15px;">
      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 fringillacongue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. 
      Cras ac leo purus. Mauris quis diam velit.
    </p>
</body>
</code>
\\
\\
===== Example - float: left; =====
아래 예제는 이미지가 텍스트에서 왼쪽으로 __떠 있도록(float)__ 지정합니다.\\
====예제====
<code css>
  <style>
    img {
      float: left;
    }
  </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 the paragraph will wrap around the image.
    </p>

    <p>
      <img
        src="pineapple.jpg"
        alt="Pineapple"
        style="width: 170px; height: 170px; margin-right: 30px"
      />
      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>
</code>
\\
\\
===== Example- No float =====
하기 예제에서 이미지는 텍스트에서 위치한 곳에서 표시됩니다.(float: none;):\\
<code css>
    <style>
      img {
        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" style="width: 170px; height: 170px" />
      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>
</code>
\\
\\
=====Example- Float Next to Each Other=====
일반적으로 div 요소들은 서로 위에 표시됩니다(블록 요소처럼). 그러나 ''float: left''를 사용하면 요소들이 서로 옆에 플로트되도록 할 수 있습니다.\\
====예제====
<code css>
<title>Float Next to Each Other</title>
    <style>
      div {
        float: left;
        padding: 15px;
        color: white;
      }

      .div1 {
        background: red;
      }

      .div2 {
        background: dodgerblue;
      }

      .div3 {
        background: green;
      }
    </style>
  </head>

  <body>
    <h2>Float Next to Each Other</h2>

    <p>In this example, the three divs will float next to each other.</p>

    <div class="div1">Div 01</div>
    <div class="div2">Div 02</div>
    <div class="div3">Div 03</div>
  </body>
</code>













{{tag>오션, CSS Float }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
