레이아웃과 반응형 웹 - 요소의 흐름을 지정하는 속성 float

2024/03/04

안녕하세요 lika-7 입니다.

이번시간에는 float 속성을 알아보겠습니다.

float 속성 이해하기

• css 의 float 속성은 어떤 요소를 웹 페이지의 기본 흐름에서 벗어나 그 다음 요소 위에 떠 있게 합니다.
• HTML요소는 화면에 렌더링 될 때 마크업 순서대로 위에서부터 아래로 나열되지만 float 속성을 사용하면 이러한 흐름과 상관 없이 요소를 배치할 수 있습니다.
• CSS의 float 속성은 주로 레이아웃을 조정하기 위해 사용됩니다.
• 요소를 왼쪽 또는 오른쪽으로 이동시키며 다른 내용이 주변에 흐르도록 할 수 있습니다.
• 주로 텍스트 주변에 이미지를 둘 때 사용되지만, 그 외에도 다양한 레이아웃 디자인에 활용될 수 있습니다.

<div class="image">
    <img src="https://www.theguru.co.kr/data/photos/20230521/art_16851952276686_667a8d.png" alt="예시 이미지">
  </div>
  <p>이 텍스트는 이미지의 주변으로 흐르게 됩니다. Float 속성을 사용하여 이미지를 왼쪽으로 이동시켰기 때문에 텍스트가 이미지의 우측으로 이동합니다.</p>
<style>
  img{
    float: left;
  }
</style>

 

floating layout

• 블록 요소를 가로로 정렬하여 레이아웃을 구성 할 때 주로 사용합니다.
• float 속성으로 만든 레이아웃을 플로팅 레이아웃이라고 합니다.

플로팅 레이아웃 블록 요소

<div class = "contrainer">
  <div class = "floating">플로팅 레이아웃</div>
  <div class = "floating">플로팅 레이아웃</div>
  <div class = "floating">플로팅 레이아웃</div>
  <div class = "floating">플로팅 레이아웃</div>
</div>
<style>
  .floating{
    float: left;
    border: solid 1px #ddd;
  }
</style>

• 위의 코드에서 <div>는 블록 요소지만 float 속성을 적용하면 인라인 요소처럼 내용만큼만 영역을 차지합니다

플로팅 레이아웃 인라인 요소

<div class = "contrainer">
  <span class = "floating">플로팅 레이아웃</span>
  <span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
</div>
<style>
  .floating{
    float: left;
		margin: 30px;
    border: solid 1px #ddd;
  }
</style>

• 인라인 요소인 <span>에 float 속성을 지정하면 block화 되어 margin이 적용되었습니다.

float 속성 해제

float으로 다양한 레이아웃을 만들수 있지만 이 요소들이 기본적 흐름을 벗어나 레이아웃을 깨뜨리기도 합니다.

• 대표적으로 자식 요소가 float 속성을 가지고 있으면 부모는 자식을 감싸지 못하고
  • 자식은 부모 영역을 이탈하게 됩니다.
• 위의 예시를 보면 부모 요소인 container가 자식 요소인 floating을 포함하지 못하여 높이가 0으로 설정되어 있습니다.
• 이러한 문제를 해결하기 위해 float을 해제 해야 합니다.
  • float 해제란 플로팅한 요소의 다음 요소가 float의 영향을 받지 않도록 한다는 것입니다.
• float 해제하는 방법은 보통 부모 요소의 높이를 자식 요소들의 float에 의해 영향을 받지 않도록 만즙니다.
  • 주로 Clearfix 기법이 사용됩니다.

가상 요소를 사용하는 방법

<div class = "container">
  <span class = "floating">플로팅 레이아웃</span>
  <span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
</div>
<style>
  .floating{
    float: left;
		margin: 30px;
    border: solid 1px #ddd;
  }
  .container::after {
    content: "";/* 가상 요소 생성 */
    display: block;/* 블록 레벨 요소로 만듦 */
    clear:both;/* float 해제 */
  }
</style>

• .container::after 선택자를 사용하여 부모 요소에 가상 요소를 추가하고, 이를 이용하여 clearfix를 구현했습니다. 그러면 부모 요소가 자식 요소의 float에 영향을 받지 않게 됩니다.
  • ::after를 이용하여 float속성의 형제요소를 만들어 clearfix를 설정하였습니다.

micro clearfix hack

클래스를 추가하여 자식요소의 영향을 해제합니다

<div class = "container clearfix">
  <span class = "floating">플로팅 레이아웃</span>
  <span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
	<span class = "floating">플로팅 레이아웃</span>
</div>
<style>
  .floating{
    float: left;
		margin: 30px;
    border: solid 1px #ddd;
  }
  .clearfix::after {
    content: "";/* 가상 요소 생성 */
    display: block;/* 블록 레벨 요소로 만듦 */
    clear:both;/* float 해제 */
  }
</style>

• 위의 예제에서는 클래스를 추가하여 자식 요소의 영향을 해제합니다
• 이를 이용하면 매번 스타일을 추가할 필요 없이 float을 간단하게 해제할 수 있습니다.