block과 inline으로 콘텐트가 배치된 상태를 일반적인 흐름, 즉 노멀 플로우라고 부른다고 말씀 드렸습니다. 박스 형태의 요소가 block이냐 inline이냐에 따라서 줄바꿈이 일어나거나 연이어 배치가 되거나가 결정됩니다. 그런데 우리가 만들고자 하는 사이트는 노멀 플로우만으로 구성하기란 어렵습니다. 실습 예제로 만들어볼 djangoproject.com 에 들어가보겠습니다. 이러한 사이트를 만들기 위해서는 정교한 배치가 필요합니다.
일단 display 속성에 block, inline 혹은 inline-block 값을 주어 기본값이 무엇이든 간에 배치속성을 바꿀 수 있다는 것을 한번 더 짚고 넘어 가겠습니다. em 태그처럼 기본적으로 inline인 요소의 display 속성값에 block 을 줘 볼까요? 반대로 block 요소인 li를 inline 속성으로 바꾸어 한 줄로 배치되도록 해볼까요? 이때, 각각의 li는 width값을 가지지는 못하는데, 이런 한계를 극복하기 위한 inline-block은 inline 요소처럼 줄바꿈 없이 일렬로 배치되나, block 요소처럼 width와 height 값을 가질 수 있습니다. 네비게이션을 만들 때 많이 사용합니다.
하지만 어쨌든 요소 박스의 display 속성을 바꾼다고 해도 일반적인 흐름, 그러니까 normal flow로 배치되는 것은 달라지지 않습니다. 이 방식만으로는 복잡한 형태의 레이아웃을 구성하기는 힘든데요. 이 흐름에서 벗어나서 조금 더 복잡한 방식의 레이아웃도 가능하게 하는 두 가지 속성을 배워 보려고 합니다. 하나는 float 속성을 이용해 일반 흐름에서의 위치를 기준으로 떠있는 상태(float)로 박스를 배치하는 것이고, 다른 하나는 position 속성을 이용해 아예 특정한 위치로 박스를 이동하는 것입니다.
float부터 살펴보겠습니다. float는 영어로 '띄우다', '부유하다'라는 의미인데요. 일반적인 흐름에서 분리된 요소를 부모영역 기준으로 배치하는 속성입니다.
위키피디아 페이지 한번 보실까요. 사진을 둘러싸고 글이 흐르고 있죠. 이 기사가 브라우저에 있다고 하면, 사진은 주변 콘텐트, 그러니까 글과 어울릴 수 있도록 왼쪽으로 띄워져 있는 상황인 것입니다. 해당 콘텐트는 페이지 기본 레이아웃 흐름에서 벗어나고, 이후 등장하는 콘텐트는 주위를 감싸고 있습니다.
float 속성에 left 혹은 right 값을 줄 수 있는데, 한번 선택해 보겠습니다. 보시는 것처럼 그림과 글이 잘 어울리는 것을 볼 수 있죠.
float는 이렇게 이미지 같은 요소에 적용하는 것 외에 원하는 방식으로 레이아웃을 잡는 데에도 사용이 될 정도로 사용이 확장 되었습니다. 단이 3개 있는 3단 컬럼과 푸터가 이런 식으로 만들어진 사이트를 만들어 보겠습니다. 이런 식으로 float를 활용하면 쉽게 여러 개의 단을 만들 수 있습니다.
그런데 한 가지 문제가 있네요. footer는 아래로 내려가야 하는데 float된 칼럼들을 따라 흐르고 있습니다. float 속성이 영향을 받는 주변 요소가 적절하지 않은 상황이네요. 그러면 이때는 footer를 clear(해제)해줄 수 있습니다. 예를 들어 clear된 요소의 영향 때문에 레이아웃이 틀어져 있는 요소가 있다면, 이때 clear 속성에 float의 위치(left 혹은 right)를 값으로 주면 됩니다. clear: both; 라고 쓰면 left right 상관 없이 해제가 가능합니다.
앞으로 실습 예제를 통해서 좀 더 복잡한 레이아웃과 상황에서는 어떻게 대처해야 하는지를 살펴볼 것이니 지금은 일단 개념만 익혀두시면 좋겠습니다.
position 속성을 알아보겠습니다. position 속성은 여러 값을 가질 수 있는데요. 여기에 특정한 값을 사용하면 노멀플로우에서 벗어나 각각의 요소박스들을 정교하게 배치할 때 사용할 수 있습니다. 먼저, 원래 position 속성의 기본값은 static인 점을 참고해 주세요. 요소들이 노멀 플로우 내에서 배치가 됩니다. position 속성이 static이 아닌 경우에는 기준에 따라서 자신의 위치를 정하게 됩니다. 하나씩 살펴볼게요.
값이 relative일 때를 보겠습니다. position 값이 relative라면 노멀 플로우에 일단 위치하고 있고요. 여기서 top 속성과 left 속성에 적용된 속성값만큼 세로방향과 가로방향으로 이동하게 됩니다. 문서 전체 흐름 가운데 놓이게 되므로 relative 값이 적용되어도 전체 문서의 기본 흐름에는 변화가 없습니다.
값이 absolute일 때는 기본적인 흐름에서 완전히 벗어나 새로운 흐름을 시작합니다. 문서 전체의 흐름과는 별개의 흐름을 갖는 요소가 되므로 자신의 자리가 없어집니다. relative일 때와의 차이점을 아시겠죠?
fixed도 비슷하지만 무엇을 기준으로 하는가가 다릅니다. absolute는 거슬러 올라갔을 때 relative, absolute, fixed 가운데 하나의 속성을 갖는, 그러니까 static이 아닌 첫 번째 요소를 기준으로 합니다. 그래서 어떤 요소의 position 속성에 absolute 값을 주고 싶다면, 적절한 요소에 relative 값을 주는 것이 보통입니다.
fixed는 브라우저 창을 기준으로 위치가 선정된다는 점이 다릅니다. 스크롤을 내리거나 올리더라도 고정된 위치에 존재하게 되는 것이죠.
앞서 말씀드렸던 대로 normal flow에서 벗어나 원하는 곳에 위치시키는 두 번째 방법은 position에 absolute 혹은 fixed 값을 적용하는 것입니다.
원하는 대로 요소를 위치시킬 수 있으니 정말 편리하죠. 그래서 개발을 하다 보면 모든 요소를 정확히 치수를 재서 position: absolute로 모든 요소와 레이아웃을 처리하고 싶다는 마음이 들텐데요. 이 경우 여러 제약이 발생하기 때문에 오히려 더 불편한 경우가 많이 생깁니다. 웹페이지는 인쇄물이 아니라는 말 기억하시지요?
각각의 역할이 있는데, 이건 앞으로 실습을 하면서 조금 더 자세하게 익혀보도록 하겠습니다.