wiki:css:css_note:css_float_examples
문서의 이전 판입니다!
목차
CSS Float Examples
- description : CSS Float Examples
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-15
Source of the article
Grid of Boxes / Equal Width Boxes
float속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.
예제
<!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>Grid of Boxes</title> <style> * { box-sizing: border-box; } .box { float: left; width: 33.33%; /* 3개의 박스, 4개 박스는 25%, 2개 박스는 50% */ padding: 50px; } .clearfix::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>Grid of Boxes</h2> <p>Float boxes side by side:</p> <div class="clearfix"> <div class="box" style="background-color:#bbb"> <p>Some text inside the box.</p> </div> <div class="box" style="background-color:#ccc"> <p>Some text inside the box.</p> </div> <div class="box" style="background-color:#ddd"> <p>Some text inside the box.</p> </div> </div> <p> Note that w also us the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect. </p> </body> </html>
3개의 플로팅 박스를 쉽게 나란히 만들 수 있습니다. 하지만 각 박스의 너비를 확대하는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.
''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.
Images Side By Side
박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.
예제
<!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>Images Side By Side</title> <style> * { box-sizing: border-box; } .img-container { width: 33.33%; padding: 5px; float: left; } .clearfix::after { content: ""; clear: both; display: table; /* p를 이미지 하단에 배치 */ } </style> </head> <body> <h2>Images Side by Side</h2> <p>Float images side by side</p> <div class="clearfix"> <div class="img-container"> <img src="img_5terre.jpg" alt="Italy" style="width:100%"> </div> <div class="img-container"> <img src="img_forest.jpg" alt="Forest" style="width:100%"> </div> <div class="img-container"> <img src="img_mountains.jpg" alt="Mountains" style="width:100%"> </div> </div> <p> Note that we also use the clearfix hack to take care of the layout flow, and that we add the box-sizing property to make sure that the image container doesn't break due to extra padding. Try to remove this code to see the effect. </p> </body> </html>
Equal Height Boxes
이전의 예제에서, 동일한 너비로 박스들을 나란히 배치하는 방법을 확인하였습니다. 그러나, 동일한 높이로 플로팅 박스들을 만드는 것은 쉽지 않습니다.
하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.
예제
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float_examples.1615853381.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
