레이아웃이 계속 세로로 나온다면!?

 

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 

 

01. 레이아웃 - float 

float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다.

float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다.

 

 

float을 사용한 레이아웃 형식

이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경 할 수 있습니다. 이 때 사용된 속성의 값을 살펴보자면 ,

float에는 2가지의 속성 값이 존재합니다.

 

속성 값	속성설명
left	요소를 왼쪽에 배치하고 나머지 콘테츠는 그 주변을 흐르도록 합니다.
right	요소를 오른쪽에 배치하고 나머지 콘테츠는 그 주변을 흐르도록 합니다.

먼저 left는 예제에서 selector2 사이드바에 적용된 float으로 볼 수 있습니다. 그래서 아래로 흐르고 있는 요소를 왼쪽으로 배치 시켜주게 되었고 right는 selector3 메인컨테츠에 적용된 float으로 볼 수 있습니다. 그래서 아래로 흐르던 메인컨테츠를 오른쪽으로 배치 시켜 줄 수 있었습니다. 레이아웃이 세로로 흐르던 요소를 가로로 정리 시켜 줄 수 있는 float 요소 였습니다.

 

그러나 float요소는 지금은 현재 잘 사용하지 않는 오래된 사용법이라고 합니다. 오래된 사용법 만큼 단점도 존재하고 있습니다.

 

float의 단점

요소의 높이가 다를 때 배열이 산만함

모양이 딱 떨어질 때는 문제가 되지 않을 수 있지만 구체적 위치를 지정하기에는 속성이 none, left, right만 존재해서 한정적이기 때문에 전체적으로 모양이 산만해질 수 있습니다.

 

 부모 요소가 늘어나지 않는다 

만약 자식 요소의 크기가 크게 되면 부모 요소도 그에 따라서 늘어나면 좋겠지만 float에서는 그게 자동으로 적용되지 않습니다. overflow를 다른 값으로 지정해줘도 되지만 매번 지정해주는 것도 불편합니다.

 

속성이 상속된다

float은 속성이 상속되어 다음 요소에도 적용이 되기 때문에 의도한 대로 구성하기 위해 clear라는 속성이 필요합니다. 이를 위한 방법에는 

 

1.바깥쪽 요소에 아무 태그나 넣고 clear 속성 적용
2. 바깥쪽 요소에 overflow : hidden 넣어주기
3. 바깥쪽 요소에 float 적용

 

이렇게 존재하는데 1번 같은 경우 매번 clear태그를 위해 코드 리소스를 낭비하게 되고 3번은 바깥 요소가 float이 적용되면 블록요소가 사라지게 되면서 width값을 100% 설정해 주어야 하기 때문에 대부분 2번을 가장 많이 사용하고 있습니다.

 

이처럼 간단한 레이아웃을 만들 떄는 float방식을 사용해도 무방하지만 다소 복잡한 레이아웃을 만들 때는 float방식은 한계가 있을 것 같습니다. 그러면 또 다른 레이아웃 방식에는 무엇이 있는지 다음에 정리해 보도록 하겠습니다.