CSS

레이아웃을 만들 때 float 지정 방법과 해제 방법

이미사용 2023. 2. 25. 17:38
명언
-
728x90
반응형

float

블록 레벨 요소(Block-level Elements)는 원래 마크업을 할때 세로로 나열이 되지만, float을 이용하여 가로로 배치할수 있습니다.  

float은 레이아웃으 만들기 위한 필수 적인 속성 입니다.

 

우선 사진은 블록 레벨 요소 중 하나인 <div>에 색깔과 크기를 주어 아래와 같이 여러개의 박스를 만들었습니다.

이처럼 세로로  블록 레벨 요소는 세로로 나열이 되기 때문에 이것을 자연스럽게 배치하기 위해 float을 사용합니다 .

 

 

float의 속성값 에는 " left " 와 " right "가 있습니다. (자연스럽게 배치하고 싶은 요소에 넣으시면 됩니다.)

※left : 요소를 왼쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다.

 

 

※right : 요소를 오른쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다.


clear 

float된 블록 레벨 요소들의 바로 다음  블록 레벨 요소가 원래대로 아래에 배치 되도록 float해제시켜주는 아주 중요한 역활 입니다.

속성값: left,right,both가 있습니다, 하지만 left와 right는 사용 할경우가 거의 없으므로 both를 사용합니다.

 

left float된 블록 레벨 요소 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
right float된 블록 레벨 요소 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴
both float된 블록 레벨 요소중 어느 쪽도 채우지 않고 다시 한단으로 배치

 

flat을 사용한 위 사진들을 보면 마지막 록 레벨 요소<div id="footer">가 사라져있는것을 볼수 있습니다. 그 이유는 블록 레벨 요소<div id="footer">위에 있던 블록 레벨 요소<div id="article">float함으로 겹쳐져 있기 때문 입니다. 이것을 해제 시켜 다시 아래로 배치하기 위해 블록 레벨 요소<div id="footer">clear:both;를 넣어 줌으로써 아래 사진처럼 블록 레벨 요소<div id="footer">가 돌아 온것을 볼수 있습니다.

 

 

 

이후 모든 블록레벨요소를 자식으로 두고 있던 부모블록요소 <div id="wrap">margin: 0 auto; 를 넣어주면 모든 블록 레벨요소들이 중앙으로 가게되어 레이아웃 하나가 완성 됩니다.