박스모델을 공부한 후부터 지금까지 사이트 레이아웃을 만드는데 필요한 중요한 속성들을 계속 살펴보고 있습니다.
이번에 다룰 float 속성도 레이아웃을 잡는데 쓰이는 속성으로 기본 개념은 단순하지만 기본 개념만으로는 동작방식을 예측하기 힘든 경우가 있어서 케이스별로 정리해서 이해할 필요가 있습니다.
저도 천천히 공부하는 입장이고 경험적이고 실험적인 설명도 있으므로 혹시 틀린점이 있다면 댓글 부탁드립니다.
float 속성
float의 뜻은 "뜨다", "흐르다" 뭐 이런 뜻입니다. 단어의 의미가 이 속성과 딱 매치된다고 말은 못하겠습니다. 그래도 단어의 뜻으로 이 속성을 설명해 보자면 이렇습니다.
"float 속성을 갖는 요소는 html 문서에서 공간은 차지하되 다른 요소의 배치에 영향을 안주는 요소가 된다."
이건 좀 주관적인 설명이니 참고만 하시길 바랍니다. 이렇게 float 속성을 갖는 요소는 html 내에서 공간은 차지하되 붕 떠 있다고 보시면 됩니다.
어쨌든 이 정도로는 설명이 매우 부족합니다. 예제를 보면서 케이스별로 살펴보겠습니다.
위 html 문서를 기본으로 하여 css 코드만 바꿔보면서 테스트해보겠습니다. (아직 css 파일에 아무런 스타일도 적용하지 않았습니다. div 태그 요소 두 개가 있습니다. div 속성은 display 속성 기본값이 block이므로 한 줄을 혼자 차지합니다.)
- float 속성이 없을 때
마진(margin)을 0으로 두고 테두리를 주었습니다. 여기까지는 쉽습니다.
- 앞에 요소가 float 속성을 가질 때
id가 A인 요소에 float:left 속성을 주겠습니다.
자, 이 부분이 중요합니다. float:left 속성을 주는 것은 이렇게 명령하는 것과 같습니다.
Hello라는 내용(content)만큼만 공간을 차지하고 다른 요소에 대해서 상대적으로 왼쪽(left)으로 배치되고 붕~ 떠있어라(무시되어라)! 다시말해 다른 요소들이 float 속성을 지닌 태그요소의 존재를 무시하는 것입니다.
그러면 다음에 배치될 id가 B인 태그가 Hello만큼의 공간을 제외하고 바로 옆으로 배치됩니다. 원래 div 태그는 display 속성이 block이므로 한 줄을 혼자 차지하는 것이 정상입니다. 하지만 위 두 요소는 나란히 배치되었죠? 위 코드에서 앞에 요소가 float 속성을 가짐과 동시에 붕떠버려서(무시되어?) block속성값을 가진 다음 요소가 앞에 요소를 무시한채 나란히 배치될 수 있는 것이죠.(물론 이미 차지하고 있는 공간은 제외하구요.)
- 두 요소가 모두 float 속성을 가질 때
내용(content)만큼의 공간만 차지한 채로 나란히 배치됩니다. div 태그인데 말이죠.. 지금 살펴본 성질을 이용해서 block 속성을 가진 요소의 옆에 다른 요소들을 배치할 수 있습니다.
- 그림 옆에 다른 요소 배치하기
이미지 옆에 글씨가 배치되는 경우를 본 적이 있을 겁니다. 이미지를 삽입하기 위한 img 태그는 display : inline; 이 기본 속성이므로 다른 inline 속성을 가진 요소들과 한줄에 나란히 배치됩니다. 문제는 이미지와 글씨를 같이 배치해도 한 줄 이상 배치할 수 없다는 것입니다.
이 문제를 해결하려면 img 태그요소에 float 속성을 주면 됩니다.
img 태그에 float 속성을 주었으므로 이미지 만큼의 공간을 차지하되 붕 ~ 떠있게 된다.(다른 요소들에 의해 무시됨) 따라서 문자열들이 이미지 공간만 제외한 채로 상대적으로 오른쪽에 배치되며 이미지의 존재가 무시된 채로 배치된다. (원래는 이전 그림처럼 한 줄 안에 이미지와 문자열이 나란히 배치되어야 함)
- clear 속성
float는 left나 right 속성값을 가질 수 있는데 왼쪽 또는 오른쪽에 배치됩니다. 이 속성은 상대적인 속성으로 다음과 같이 동작합니다.
left 속성값을 가지는 요소의 다음에 오는 요소들은 상대적으로 오른쪽에 배치되고 right 속성값을 갖는 요소의 다음에 오는 요소들은 상대적으로 왼쪽에 배치됩니다.
참고 : img 태그에 float:right 속성을 주고 div 태그로 다시 감쌌는데 데도 역시 계속해서 무시되네요. 원래 p태그는 block 속성이므로 div 태그와 한 줄에 배치되지 않는게 정상이죠.. 이 부분도 알아두세요.
이 때 만약 p 태그가 원래처럼 동작하도록 하려면 clear 속성을 주면 됩니다.
clear:right; 속성을 가진 요소는 float:right; 속성의 영향을 받지 않습니다. 따라서 위와 같은 결과가 나옵니다.
clear:left를 설정하면 float:left 속성의 영향을 받지않고 clear:both:라고 하면 모든 float 속성의 영향을 받지 않습니다.
따라서 보통은 clear:right나 clear:left 대신 clear:both를 사용합니다.
float 속성은 아쉽게도 center라는 속성값이 없습니다. 만약 center 값이 있다면 이 경우 상대적 배치를 어떻게 할까요? 아마도 제 짐작으로는 그런 의미에서 center 라는 속성값이 없는 것 같습니다. 중앙정렬을 하는 방법은 보통 margin을 이용하여 하는데 이 부분은 나중에 다시 정리하겠습니다.