====== CSS Float Examples ====== * description : CSS Float Examples * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-16 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_float_examples.asp|CSS Layout - Float Examples]] \\ \\ ======Grid of Boxes / Equal Width Boxes====== ''float''속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.\\ ==== Example ====

Grid of Boxes

Float boxes side by side:

Some text inside the box.

Some text inside the box.

Some text inside the box.

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.

====What is box-sizing?==== 3개의 플로팅 박스를 나란히 쉽게 만들 수 있습니다.\\ 하지만 각 박스의 너비를 늘리는 것(예, 패딩 또는 보더)을 추가할 경우, 박스 배치는 어긋납니다.\\ ''%%box-sizing%%'' 속성을 사용하면 박스의 전체 너비(및 높이)에 패딩과 보더를 포함하여\\ 패딩이 상자 내부에 유지되고 깨지지 않도록 할 수 있습니다.\\ ====''box-sizing'' 속성은 해당 박스의 총 너비 (그리고 높이)에 패딩과 보더를 포함하게 하여, 박스 내부에 패딩이 위치하게 하여 박스 배치가 어긋나지 않습니다.==== \\ =====Images Side By Side===== 박스의 그리드는 이미지를 나란히 보여주는 것에도 사용할 수 있습니다.\\ ====예제==== Images Side By Side

Images Side by Side

Float images side by side

Italy
Forest
Mountains

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.

\\ \\ =====Equal Height Boxes===== 이전의 예제에서, 동일한 너비로 박스들을 나란히 배치하는 방법을 확인하였습니다. 그러나, 동일한 높이로 플로팅 박스들을 만드는 것은 쉽지 않습니다.\\ 하지만, quick fix는 고정 높이를 설정하는 것을 아래 예제에서 살펴보겠습니다.\\ ====예제==== Equal Height Boxes

Equal Height Boxes

Floating boxes with equal heights

Box01

Some content, some content, some content

Box02

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

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.

Go back to the tutorial and find another solution, if this is not what you want.

\\ 하지만, 이렇게 하는 것은 매우 유연하지 않습니다. 박스들 내부에 항상 동일한 양의 콘텐츠가 있다는 것을 보장할 수 있는 경우에는 괜찮습니다.\\ 하지만 많은 경우 콘텐츠가 동일하지 않습니다. 상기 예제를 휴대폰에서 시도하면, 두 번째 박스의 콘텐츠가 박스 외부에 표시되는 것을 확인할 수 있습니다.\\ 자동으로 가장 긴 박스만큼 길게 박스를 늘릴 수 있는 CSS3 Flexbox가 이런 경우에 유용합니다.\\ \\ ====예제==== Flexible Boxes
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.
Box 02 - My height will follow Box 01.

Try to resize the browser window to see the flexible layout.

Note:Flexbox is not supported in Internet Explorer 10 or earlier versions.

\\ \\ =====Navigation Menu===== 하이퍼링크 목록과 ''float''속성을 사용하여 가로 배치 메뉴를 만듭니다.\\ ====예제==== Navigation menu with float property \\ \\ =====Web Layout Example===== ''float''속성을 사용하여 웹 페이지 전체 레이아웃 작업을 하는 것도 일반적입니다.\\ ====예제==== Web page Layout using float property

Chania

  • The Flight
  • The City
  • The Island
  • The Food

The City

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.

You will lern more about web layout an responsive web pages in a later chapter.

Footer Text

 \\ \\ =====All CSS Float Properties===== ^ Property ^ Description ^ | box-sizing | 요소의 너비와 높이가 계산되는 방법을 정의합니다. 패딩과 보더 포함 여부 | | clear | 어떤 요소가 지워진 요소 옆에 그리고 어느 방향으로 플로트 되는지를 지정 | | float | 요소가 플로트 되는 방법을 지정 | | overflow | 콘텐츠가 요소의 박스에서 넘칠 경우 발생하는 작업을 지정 | | overflow-x | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 좌측/우측 가장자리에서 수행할 작업을 지정 | | overflow-y | 콘텐츠가 요소의 콘텐츠 영역에서 넘칠 경우 콘텐츠의 상단/하단 가장자리에서 수행할 작업을 지정 | {{tag>오션, CSS float examples }}