div 블록요소를 가로 정렬하는 float 태그 사용 방법

오늘은 정말 중요한 요소를 배웠습니다. 레이아웃을 꾸미는데 가장 기본이 되는 div 블록 요소를 가로로 정렬하는 방법입니다. h1 이나 p태그, div 등의 태그는 모두 블록요소라고 합니다. 특별히 크기를 지정하지 않았어도 크기값을 가지며, 줄바꿈 현상이 일어나는 요소를 블록요소라고 하지요. 때문에 가로로 정렬하려면 또 다른 CSS 스타일 태그를 사용해야 합니다. 이 때 사용하는 요소가 바로 float 입니다. 크게 두 가지 속성이 있습니다.

float: left; → 왼쪽부터 가로로 정렬

float: right; → 오른쪽부터 가로로 정렬

이렇게 사용 되는것이 대부분이며, 각 요소를 사용하면 어떻게 되는지를 한번 살펴보겠습니다.

먼저 본문인 body 안쪽에 div 3개를 만들었습니다. 각각 클래스값을 부여했고, 공통되는 div의 스타일은 테두리 2px에 쭉 이어진 선 모양이고 선 색은 검정입니다. 크기는 100픽셀의 정사각형 모양이며 텍스트는 가운데 정렬이고 굵게 표현됩니다. 클래스 속성은 BOX1은 빨간색, 2는 노란색, 3은 초록색 입니다.

그러면 블록요소이기 때문에 당연히 이렇게 줄바꿈 현상이 일어나서 세로로 배치가 됩니다.

이제 div 스타일 안쪽에 float: left; 속성을 넣어보겠습니다.

보시는 것 처럼 이렇게 가로로 정렬이 되었습니다. 한 마디로, float 요소는 블록요소를 인라인 요소로 바꿔주는 것이라고 생각하시면 됩니다.

이번에는 left가 아닌, right로 변경해 보겠습니다.

변경했더니 이번에는 오른쪽부터 배치가 진행 됩니다. 이제 차이점을 확인할 수 있겠습니다.

이미지 바로 다음에 오는 텍스트 사용 시, 어떻게 처리가 되는지 살펴보겠습니다. 본문에 임의의 이미지를 마크업 하고 바로 텍스트를 넣었습니다. 이미지의 크기는 400x300 입니다.

이미지는 인라인 요소이긴 하지만 크기에 상관 없이 한 줄로 인식하기 때문에 이렇게 결과값을 얻을 수 있습니다.

만약 float 속성을 사용하게 된다면 어떻게 될까요?

보시는 것처럼 이미지의 크기에 맞게 텍스트 또한 가로로 정렬되서 나타나게 됩니다.

이렇게 float 속성이 적용된 상태에서도 padding 혹은 margin 요소가 그대로 사용 가능합니다. 여기에서는 이미지의 바로 오른쪽의 공간을 확장하는 padding-right 속성을 사용했고, 20픽셀만큼 더 커지도록 했습니다.

보시는 것처럼 주어진 값만큼 떨어져서 텍스트가 배치된 것을 확인할 수 있습니다.

h1 태그에도 그대로 float 요소를 써서 바로 오른쪽에 p태그로 작성한 텍스트가 오도록 할 수 있습니다. head의 style을 보시면 전체 선택자를 써서 위치를 초기화 시켰고, body 안쪽의 font에 대한 정의도 마크업 했습니다. 이건 반드시 해야하는건 아니고, 그냥 제가 좋아하는 진행방식이여서 이렇게 마크업 하고 나머지 선택자에 대해서도 스타일을 마크업 했습니다.

p태그 안쪽에 보시면 span 태그를 써서 중간에 50x50 이미지를 사용했는데 위치가 "짜증나는" 다음에 들어가게끔 했습니다. 그러나 실제 결과물을 살펴보시면 전혀 다릅니다.

지금은 우연찮게 맞아떨어져서 위치가 정상적으로 나왔지만, 실제로 다른곳에 배치해보세요. 그리고 지금은 가로의 크기값이 고정되어서 그런데 만약 가로 크기가 없으면 반응형으로 출력되므로 브라우저의 창 크기를 늘렸다 줄였다 해보시면 50x50 이미지가 딱 오른쪽에 붙어서 움직이는것을 확인할 수 있으며 그에 맞게 텍스트 또한 변하는것을 확인할 수 있습니다.

이번에는 box1과 3은 float: left; 속성을 부여하고, box2에만 right 로 속성을 넣었습니다. 결과를 살펴보겠습니다.

이렇게 나오게 됩니다. 하지만 BOX3 의 div만 float 값을 해제하고 싶습니다. 그러면 box3의 요소 중 float 항목만 지우면 해결이 될까요? 불행히도 지운다고해서 아래로 내려가지 않습니다. 아래로 내리고 싶을때는 clear: both; 속성을 부여해야 합니다.

이렇게 마크업을 하고 결과를 확인해 보겠습니다.

보시는 것 처럼 box1과 2만 한줄로 만들어지고, box3은 그 다음줄에 배치가 되는것을 확인할 수 있습니다. 이 방법을 응용해서 가장 기본이 되는 레이아웃을 만들 수 있을 것입니다.

가장 기본형태의 레이아웃 입니다. header 부분, 그리고 바로 아래에는 본문인 container 부분, 마지막 제일 아래는 footer 부분입니다. container도 두 div도 나뉘는데 왼쪽의 aside 부분, 그리고 내용이 들어갈 contents 부분 입니다. 이 모든 div를 감싸는 영역은 wrap 부분입니다. wrap 전체의 크기는 가로 1200px, 세로 700px 입니다. 그리고 각 div 영역에는 백그라운드 색을 넣었습니다. 결과를 확인해 보겠습니다.