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

사용자 도구

사이트 도구

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

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_float_examples [2021/03/16 09:09]
emblim98 		wiki:css:css_note:css_float_examples [2023/01/13 18:44] (현재)
줄 4: 줄 4:
   * author      : 오션   * author      : 오션
   * email       : shlim@repia.com   * email       : shlim@repia.com
-  * lastupdate  : 2021-03-15+  * lastupdate  : 2021-03-16
 </WRAP> </WRAP>
 <WRAP clear></WRAP> <WRAP clear></WRAP>
줄 15: 줄 15:
 ======Grid of Boxes / Equal Width Boxes====== ======Grid of Boxes / Equal Width Boxes======
 ''float''속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.\\ ''float''속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.\\
-====예제==== +==== Example ==== 
-<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>Grid of Boxes</title>+
     <style>     <style>
         * {         * {
줄 62: 줄 54:
  
     <p>     <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>     </p>
  
 </body> </body>
 +</code>
  
-</html> +====What is box-sizing?==== 
-</code> +3개의 플로팅 박스를 나란히 쉽게 만들 수 있습니다.\\  
-\\ +하지만 각 박스의 너비를 늘리는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.\\ 
-====3개의 플로팅 박스를 쉽게 나란히 만들 수 있습니다. 하지만 각 박스의 너비를 확대하는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.====+''%%box-sizing%%'' 속성을 사용하면 박스의 전체 너비(및 높이)에 패딩과 보더를 포함하여\\  
 +패딩이 상자 내부에 유지되고 깨지지 않도록 할 수 있습니다.\\
 ====''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.==== ====''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.====
 \\ \\
줄 77: 줄 72:
 박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.\\ 박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.\\
 ====예제==== ====예제====
-<code html>+<code css>
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
줄 138: 줄 133:
 하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.\\ 하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.\\
 ====예제==== ====예제====
-<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>Equal Height Boxes</title>
 +    <style>
 +        * {
 +            box-sizing: border-box;
 +        }
 +
 +        .box {
 +            float: left;
 +            width: 50%;
 +            padding: 50px;
 +            height: 300px;
 +        }
 +
 +        .clearfix::after {
 +            content: "";
 +            clear: both;
 +            display: table;
 +        }
 +    </style>
 +</head>
 +
 +<body>
 +
 +    <h2>Equal Height Boxes</h2>
 +    <p>Floating boxes with equal heights</p>
 +
 +    <div class="clearfix">
 +        <div class="box" style="background-color:#bbb">
 +            <h2>Box01</h2>
 +            <p>Some content, some content, some content</p>
 +        </div>
 +        <div class="box" style="background-color:#ccc">
 +            <h2>Box02</h2>
 +            <p>Some content, some content, some content</p>
 +            <p>Some content, some content, some content</p>
 +            <p>Some content, some content, some content</p>
 +        </div>
 +    </div>
 +
 +    <P>
 +        This example is not very flexible. It is ok to use CSS height if you can guarantee that the boxes will always have the same amount of content in them, but that's not always the case. If you
 +        try the example above on a mobile phone (or resize the browser window), you will see that the second box's content will be displayed outside of the box.
 +    </P>
 +    <p>
 +        Go back to the tutorial and find another solution, if this is not what you want.
 +    </p>
 +</body>
 +
 +</html>
 </code>  </code> 
-  +\\ 
 +하지만, 이렇게 하는 것은 매우 유연하지 않습니다. 박스들 내부에 항상 동일한 양의 콘텐츠가 있다는 것을 보장할 수 있는 경우에는 괜찮습니다.\\ 
 +하지만 많은 경우  콘텐츠가 동일하지 않습니다. 상기 예제를 휴대폰에서 시도하면, 두 번째 박스의 콘텐츠가 박스 외부에 표시되는 것을 확인할 수 있습니다.\\ 
 +자동으로 가장 긴 박스만큼 길게 박스를 늘릴 수 있는 CSS3 Flexbox가 이런 경우에 유용합니다.\\  
 +\\ 
 +====예제==== 
 +<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>Flexible Boxes</title> 
 +    <style> 
 +        .flex-container { 
 +            display: flex; 
 +            flex-wrap: nowrap; 
 +            background-color: dodgerblue; 
 +        } 
 + 
 +        .flex-container .box { 
 +            background-color: #f1f1f1; 
 +            width: 50%; 
 +            margin: 10px; 
 +            text-align: center; 
 +            line-height: 75px; 
 +            font-size: 30px; 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 + 
 +    <div class="flex-container"> 
 +        <div class="box"> 
 +            Box 01 - This is some text to make sure that the content gets really tall. This is some text to make sur that the content gets really tall. 
 +        </div> 
 +        <div class="box"> 
 +            Box 02 - My height will follow Box 01. 
 +        </div> 
 +    </div> 
 + 
 +    <p>Try to resize the browser window to see the flexible layout.</p> 
 +    <p> 
 +        <strong>Note:</strong>Flexbox is not supported in Internet Explorer 10 or earlier versions. 
 +    </p> 
 + 
 +</body> 
 + 
 +</html> 
 +</code> 
 +\\ 
 +\\ 
 +=====Navigation Menu===== 
 +하이퍼링크 목록과 ''float''속성을 사용하여 가로 배치 메뉴를 만듭니다.\\ 
 +====예제==== 
 +<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>Navigation menu with float property</title> 
 +    <style> 
 +        ul { 
 +            list-style-type: none; 
 +            margin: 0; 
 +            padding: 0; 
 +            overflow: hidden; 
 +            background-color: #333; 
 +        } 
 + 
 +        li { 
 +            float: left; 
 +        } 
 + 
 +        li a { 
 +            display: inline-block; 
 +            color: yellow; 
 +            text-align: center; 
 +            padding: 14px 16px; 
 +            text-decoration: none; 
 +        } 
 + 
 +        li a:hover { 
 +            background-color: red; 
 +        } 
 + 
 +        .active { 
 +            background-color: blue; 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 +    <ul> 
 +        <li><a href="#home" class="active">Home</a></li> 
 +        <li><a href="#news">News</a></li> 
 +        <li><a href="#contact">Contact</a></li> 
 +        <li><a href="#about">About</a></li> 
 +    </ul> 
 +</body> 
 + 
 +</html> 
 +</code> 
 +\\ 
 +\\ 
 +=====Web Layout Example===== 
 +''float''속성을 사용하여 웹 페이지 전체 레이아웃 작업을 하는 것도 일반적입니다.\\ 
 +====예제==== 
 +<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>Web page Layout using float property</title> 
 +    <style> 
 +        * { 
 +            box-sizing: border-box; 
 +        } 
 + 
 +        .header, 
 +        .footer { 
 +            background-color: grey; 
 +            color: white; 
 +            padding: 15px; 
 +        } 
 + 
 +        .column { 
 +            padding: 15px; 
 +            float: left; 
 +        } 
 + 
 +        .clearfix::after { 
 +            content: ""; 
 +            clear: both; 
 +            display: table; 
 +        } 
 + 
 +        .menu { 
 +            width: 25%; 
 +        } 
 + 
 +        .content { 
 +            width: 75%; 
 +        } 
 + 
 +        .menu ul { 
 +            list-style-type: none; 
 +            margin: 0; 
 +            padding: 0; 
 +        } 
 + 
 +        .menu li { 
 +            padding: 8px; 
 +            margin-bottom: 8px; 
 +            background-color: #33b5e5; 
 +            color: #ffffff; 
 +        } 
 + 
 +        .menu li:hover { 
 +            background-color: #0099cc; 
 +        } 
 +    </style> 
 +</head> 
 + 
 +<body> 
 + 
 +    <div class="header"> 
 +        <h1>Chania</h1> 
 +    </div> 
 + 
 +    <div class="clearfix"> 
 +        <div class="column menu"> 
 +            <ul> 
 +                <li>The Flight</li> 
 +                <li>The City</li> 
 +                <li>The Island</li> 
 +                <li>The Food</li> 
 +            </ul> 
 +        </div> 
 + 
 +        <div class="column content"> 
 +            <h1>The City</h1> 
 +            <p> 
 +                Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city. 
 +            </p> 
 +            <p> 
 +                You will lern more about web layout an responsive web pages in a later chapter. 
 +            </p> 
 +        </div> 
 + 
 +    </div> 
 +    <div class="footer"> 
 +        <p>Footer Text</p> 
 +    </div> 
 +</body> 
 + 
 +</html> 
 +</code> 
 +\\ 
 +\\ 
 +=====All CSS Float Properties===== 
 +^ Property    ^ Description                                           ^ 
 +| box-sizing  | 요소의 너비와 높이가 계산되는 방법을 정의합니다. 패딩과 보더 포함 여부              | 
 +| clear       | 어떤 요소가 지워진 요소 옆에 그리고 어느 방향으로 플로트 되는지를 지정              | 
 +| float       | 요소가 플로트 되는 방법을 지정                                     | 
 +| overflow    | 콘텐츠가 요소의 박스에서 넘칠 경우 발생하는 작업을 지정                       | 
 +| overflow-x  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 좌측/우측 가장자리에서 수행할 작업을 지정  | 
 +| overflow-y  | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 상단/하단 가장자리에서 수행할 작업을 지정  | 
 + 
 + 
 + 
 + 
 {{tag>오션, CSS float examples  }} {{tag>오션, CSS float examples  }}
/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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki