문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 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:27]
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> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
줄 200: 줄 195:
 하지만 많은 경우  콘텐츠가 동일하지 않습니다. 상기 예제를 휴대폰에서 시도하면, 두 번째 박스의 콘텐츠가 박스 외부에 표시되는 것을 확인할 수 있습니다.\\ 하지만 많은 경우  콘텐츠가 동일하지 않습니다. 상기 예제를 휴대폰에서 시도하면, 두 번째 박스의 콘텐츠가 박스 외부에 표시되는 것을 확인할 수 있습니다.\\
 자동으로 가장 긴 박스만큼 길게 박스를 늘릴 수 있는 CSS3 Flexbox가 이런 경우에 유용합니다.\\  자동으로 가장 긴 박스만큼 길게 박스를 늘릴 수 있는 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.1615854452.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