wiki:css:css_note:css_float
문서의 이전 판입니다!
목차
CSS Layout - float and clear
- description : CSS width, max-width,
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-07-26
Source of the article
CSS float 속성은 요소가 어떻게 떠 있어야 할 지를 지정합니다.
CSS clear 속성은 어떤 요소가 지워진 요소 옆과 어떤 방향에서 떠 있을 수 있는 지를 지정합니다.
The float Property
float 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.
float속성은 하기의 값 중 하나를 가질 수 있습니다.
- left - 요소는 컨테이너의 좌측에 떠 있습니다.
- right - 요소는 컨테이너의 우측에 떠 있습니다.
- none - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다.
- inherit - 요소는 부모 요소의 float값을 상속 받습니다.
가장 간단한 용도로, float 속성은 이미지 주위의 텍스트를 감쌀 때 사용할 수 있습니다.
float: right; 예제
<!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>
float: left; 예제
하기의 예제는 텍스트에서 좌측으로 이미지가 떠 있으라고 지정합니다.
예제
<!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>
No float 예제
하기의 예제에서 이미지는 텍스트에서 발생하는 위치에만 표시됩니다.(float: none;):
<!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>
Float Next to Each Other
일반적으로 div 요소들은 서로 위에 표시됩니다. 그러나 float: left를 사용하면 요소가 서로 옆에 떠 있게 할 수 있습니다.
예제
<!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 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> </html>
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float.1627273608.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
