wiki:css:css_note:css_float_examples

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_float_examples [2021/07/26 15:57]
emblim98 [예제]
+++ wiki:css:css_note:css_float_examples [2023/01/13 18:44] (현재)
@@ 줄 15: / 줄 15: @@
 ======Grid of Boxes / Equal Width Boxes======
 ''float''속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.\\
-====예제====
+==== Example ====
 <code css>
     <style>
@@ 줄 54: / 줄 54: @@
     <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
+        Note that w also us the clearfix hack to take care of the layout flow,
-        code to see the effect.
+        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>
 </code>
-\\
-====3개의 플로팅 박스를 쉽게 나란히 만들 수 있습니다. 하지만 각 박스의 너비를 확대하는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.====
+====What is box-sizing?====
+개의 플로팅 박스를 나란히 쉽게 만들 수 있습니다.\\
+하지만 각 박스의 너비를 늘리는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.\\
+''%%box-sizing%%'' 속성을 사용하면 박스의 전체 너비(및 높이)에 패딩과 보더를 포함하여\\
+패딩이 상자 내부에 유지되고 깨지지 않도록 할 수 있습니다.\\
 ====''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.====
 \\

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_float_examples.1627282661.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)