[CSS3] Position : Float

이야기에 앞서

웹 문서가 포함하는 모든 요소의 위치를 잡는 포지셔닝(Positioning)은 사실 웹 디자인의 모든 것이라고 표현 할 수 있습니다. 집을 지을 때도 그에 맞는 Frame을 잘 설계를 해야 원하는 모양의 집을 잘 지을 수 있습니다. 웹사이트도 마찬가지 입니다. 만들고자하는 웹사이트의 Layout을 잘 잡아놔야 그 다음 세부적인 디자인을 쉽게 적용시킬 수 있습니다.

하지만 포지셔닝은 꽤 다양한 개념을 이해하고 그것을 복합적으로 잘 사용해야만 원하는 결과를 얻을 수 있을뿐더러, 현재의 기술로 포지셔닝을 하는데 있어서 부딪히는 한계와 버그들에 대한 이해도 필요합니다. 이 글에서는 포지셔닝을 통해 HTML 문법은 물론, 웹 디자인을 위한 기초 골격을 만드는 부분에 대한 개념까지 어느정도 확립할 수 있도록 돕고자 합니다.

포지셔닝을 하기 위해서는 태그의 Inline과 Block 속성에 대해 이해하고 있어야 합니다. 

포지셔닝을 연습하기에 가장 좋은 태그는 블록(Block) 속성을 가진 <div>입니다. Division의 약자이며, 영역 구분 혹은 내용을 포장하는 용도로 가장 적합합니다. <p> 태그는 단락 태그이기 때문에, 문장과 문장 사이를 구분짓기 위해 웹 브라우저의 기본값으로 하단에 여백을 발생시킵니다. 그래서 처음 CSS를 만지는 사람들은 도무지 알 수 없는 여백이 왜 생겼는지에 대해 혼란스러워 할 때가 있습니다. <div> 태그는 레이아웃을 위한 태그답게 이런 기본 여백이 없습니다.

포지셔닝의 가장 큰 목적?

포지셔닝의 가장 큰 목적은, 블록 속성을 가진 1개 이상의 객체를 원하는 위치에 정렬

예제 그림과 같이 박스를 정렬해서 전체적인 화면 레이아웃을 잡는 것이 1차적 목표입니다. 

여기서 4개의 박스들이 <div>로 하드코딩이 되어있습니다. 이렇듯, 큰 그림을 잡을 수 있는 것 만으로도 마크업 디자인의 반 이상을 파악했다고 볼 수 있습니다. 이런 구도를 잡기 위해 이해해야 하는 것들은 사실 매우 상식적인 수준이지만, 말보다 글로 표현 할 때는 애매모호한 부분이 있습니다. 만일 설명에서 잘 이해가 가지 않는 부분이 있다면, 지금 당장 완전히 이해하려고 집중하지 말고 가볍게 다음 설명으로 넘어가세요. 한번에 이해할 수 없던 것들은 이후의 설명들을 보면서 자연스레 파악할 수도 있습니다.

플롯(float) 속성으로 정렬

블록 속성을 가진 객체를 정렬하는 가장 기본적인 방법은, CSS의 float 속성을 이용하는 것입니다. float은 객체를 좌측 혹은 우측에 정렬시킬 수 있으며, 구문 작성은 다음과 같습니다.

div { float: left }

위 예문에서 div는 이제 화면 구성에서 좌측에 위치하고, 이후에 오는 다른 객체들은 우측에 위치하게 됩니다. float 속성은 좌, 우만 존재하고 중앙정렬은 없습니다. 중앙정렬은 다음과 같이 margin 속성을 사용해야 합니다. 중앙 정렬은 나중에 다시 설명합니다.

margin-left와 margin-right 값이 auto로 설정되면, 해당 객체는 화면의 중앙에 위치합니다. 

중앙 정렬이 되려면 반드시 객체가 너비 100% 이외의 값을 가지고 있어야 합니다. 너비 100%가 되면 화면을 꽉 채우기 때문에 중앙 정렬의 의미가 없어집니다.

플롯 속성이 선언되면 블록 요소를 가진 태그에 작은 변화가 생깁니다.  모든 블록 요소 태그는 너비 100% 값을 가지고 있습니다. 따라서 화면 폭 한 줄을 완전히 차지합니다. 여기에 플롯 속성이 선언되면, 좌측 혹은 우측에 다른 요소를 배치하기 위해 자신의 너비를 최소화 하게 됩니다. 이것은 아주 상식적인 부분입니다. 아래 그림을 통해 좀 더 쉽게 이해할 수 있습니다. 아래 그림에서 파란 색 div가 float: left의 속성을 가졌다고 가정하세요.

한 줄을 모두 차지하는 블록 속성 태그는 width: 100%를 기본으로 가지고 있습니다.

여기에 float 속성이 붙게되면, 다음에 올 객체를 위해 자신의 너비를 최소폭으로 바꿉니다.

float 속성이 없는 객체는 나머지 공간을 모두 차지하고, float 속성이 부여되면 자신의 너비가 최소 너비로 바뀐다는 점이 중요합니다.

float 속성이 부여되지 않의 객체에서의 문제

일단, 지금까지 알아 본 방식으로 2개의 객체를 나란히 정렬해 보겠습니다. 여기서부터는 여러분도 실제로 HTML과 CSS 파일을 준비해서 테스트 해보세요.

위 예문에서, 정상대로라면 파란 색 박스와 분홍 색 박스 사이에 7px의 여백이 있어야 합니다. margin-right: 7px을 선언했기 때문이죠. 하지만 결과값에는 간격이 생기지 않았습니다. 그리고 분홍색 박스의 내부 여백인 18px도 제대로 표현되지 않았습니다. 분홍 색 박스에 float 속성을 부여하지 않았기 때문에 발생하는 박스 모델 상의 문제입니다. 이런 문제를 해결하는 가장 쉬운 방법은, float 속성을 부여하지 않은 객체에 overflow: hidden 속성을 선언하는 것입니다.

본래 overflow: hidden 속성은, 내용물이 객체보다 클 경우, 넘치는 부분을 안보이게 해주는 역할을 하는데, 여기서는 float 속성이 없어서 제대로 표현되지 못하는 객체를 제대로 보여줍니다.

분혹 색 박스에 overflow: hidden 속성을 선언하면 이제 제대로 표현합니다. 만일 여러분이 float을 사용해서 객체를 정렬할 때, 뜻하지 않은 결과를 만나게 된다면 float 속성을 선언하지 않은 객체에 overflow: hidden 속성을 선언하면 됩니다. 이것이 문제를 해결하는 가장 쉬운 방법입니다.

분홍 색 박스에도 float 속성을 선언하게 되면, 더이상overflow: hidden 속성은 선언하지 않아도 됩니다. 대신 분홍 색 박스의 너비는 최소 너비로 바뀝니다.

float을 선언하지 않고 나머지 공간을 모두 채우든지, 아니면 float을 선언해서 최소 너비로 사용하든지는 여러분이 원하는 레이아웃의 구조에 따릅니다.

float 속성이 부여된 객체끼리의 문제

위에서는, float 속성이 없는 객체가 있을 때 발생하는 문제를 확인했습니다. 아쉽게도, float 속성이 모두 부여된 객체끼리도 또 다른 문제가 발생합니다. 사실 이런 문제들 때문에 웹 문서를 디자인하는 것이 쉽지 않습니다. 하지만 해결 방법이 없는 것도 아니니 하나하나 풀어 나가다보면 어느샌가 자유롭게 구조를 짤 수 있게 됩니다.

포장용 객체가 높이 값을 갖지 못하는 문제 해결

어떤 경우는 위와 같이 2개의 박스를 하나의 포장용 박스에 넣기도 합니다. 여기서 포장용 박스란 초록 색 박스에 해당하며, 배경 색이나 배경 이미지를 넣어 사용하기도 합니다. 예제 이미지처럼 만드려면 다음과 같은 코드로 작성합니다. (참고로, 이 코드는 원리상으로 보면 정상이지만, 결과는 제대로 표현되지 못합니다)

이 코드에는 box1과 box2 모두 float: left 속성을 가지고 있으므로 overflow: hidden 속성은 필요 없습니다. 문제가 되는 것은 box1과 box2를 포장하고 있는 wrap 박스입니다. 포장용 객체는, 자기가 품고 있는 객체들이 모두 float 속성을 가지고 있게되면, 정상적인 높이 값을 갖지 못하는 현상이 있습니다. 여기서는 포장용 객체인 wrap이 float 속성을 가지고 있는 box1과 box2를 품었기 때문에 높이 값을 갖지 못하는 결과를 Result 탭에서 보여주고 있습니다.

이런 문제를 해결하는 가장 쉬운 방법은, float 속성을 가진 객체의 부모 객체, 즉 포장용 객체인 wrap에 overflow: hidden 속성을 선언하는 것입니다. 부모 객체에 이 속성이 선언되면 그때부터 제대로 높이 값을 갖게 됩니다.