CSS 배치 모델(Placement Model)

웹문서를 작성하면서 요소를 적당한 위치에 놓기위해 고심을 하곤합니다. 이에 대한 전반적인 내용을 소개합니다.

배치 모델 소개

요소의 배치에 쓰이는 CSS 배치 모델은 정적, 절대, 고정, 상대, 플로트, 상대적 플로트 배치이다. 이 배치 모델은 여섯 가지 박스 모델과 관련이 있지만 대응되거나 같은 개념은 아니다.

• 정적 배치 모델 : 인라인, 인라인 블록, 블록, 테이블 박스의 배치에 사용한다.
• 절대 위치 모델, 고정 배치 모델 : 절대 위치 박스 배치에 사용하는데, 이때 어느 요소든 절대 위치 박스일 수 있다.
• 플로트 배치 모델 : 플로트 박스의 배치에 사용하는데, 마찬가지로 어느 요소든 절대 위치 박스일 수 있다.
• 상대 위치 모델 : 절대 위치 박스를 제외한 모든 박스의 상대 위치에 사용한다.
• 상대적 플로트 배치 모델 : 플로트 박스의 상대 위치에 사용한다.

배치 속성값

• position: static : 요소에 적용된 배치가 해제되어 원래 흐름에 따라 표시된다. static은 position 속성의 기본값이다.
• position: relative : 원래 흐름 안에서 원래 위치로부터 떨어진 위치에 요소가 배치된다.
• position: absolute : 원래 흐름 안의 원래 위치나 기준 요소로부터 떨어진 위치에 요소가 배치된다.
• position: fixed : 브라우저 창으로부터 떨어진 위치에 요소가 배치된다.
• left, top, bottom, right : 위치 속성들을 이용해서 기준 위치에서 떨어진 곳에 배치가 가능하다.
• z-index : 특정 레이어에 요소를 배치할때 쌓이는 순서를 변경하고자 할때 사용한다. 숫자가 클수록 윗쪽에 배치된다.

고정배치는 IE6에서 지원되지 않고 IE7 이상 버전부터 지원된다.

기준 요소

배치 요소 상위에 배치 요소가 없으면 body 요소가 기준 요소다. body 요소에는 배치가 기본으로 적용되기 때문이다. 배치 요소를 기준 요소에 정렬하는 주 목적은 레이아웃 그룹을 만드는 것으로, 그 레이아웃 그룹에 배치리를 지정하면 그 안의 모든 자손 요소가 배치 요소든 아니든 한꺼번에 이동한다.

배치 부모 요소를 만들려면 원래 흐름에서 벗어나지 않는 position: relative를 지정한다. 이는 원래 위치와 절대 위치를 연동하는 레이아웃을 만들 수 있다.

스택 콘텍스트

요소를 쌓을 순서를 지정하려면 CSS의 z-index 속성을 사용한다.

• 정적 요소는 문서에 작성한 순서대로 표현된다.
• 배치 요소는 문서에 작성한 순서와 상관없이 z-index 속성값이 가장 작은 요소부터 큰 요소 순으로 아래에서 위로 쌓인다. 배치 요소의 z-index 속성에 음수 값을 지정하면 그 배치 요소는 정적 요소와 배치를 지정하지 않은 플로트 요소의 뒤에 표시된다.

요소에 z-index 값을 지정하면 국소적이고 자체적인 스택 콘텍스트가 형성되며, 모든 자손 요소(정적/플로트/배치)가 그 스택 콘텍스트 안에 렌더링된다.

• z-index: auto 값을 지정하거나 배치 속성을 지정하지 않은 요소에 z-index 속성을 지정하면 스택 콘텍스트는 형성되지 않는다.
• z-index: 0, z-index: -1, z-index:9999등과 같이 수치 값을 지정해야 스텍 콘텍스트가 생성된다.

각 스택 콘텍스트는 요소와 내용이 하나로 묶여 있어서, 부모 요소나 형제 요소가 자식 요소와 자식 요소 사이의 레이어에 낄 수 없다. 영향력이 제한적인 각 스택 콘텍스트는 내부 스택 계층이 0으로 설정되므로, 자손 요소는 0 계층을 기준으로 쌓이는데, 이 사실은 아주 중요하다.

z-index에 지정한 값은 문서 전체를 기준으로 한 계층이 아니다. z-index 속성에 수치를 지정한 기준 요소를 기준으로 한 상대적 계층에 배치된다. 문서의 루트 요소인 html 요소는 루트 스택 콘텍스트를 형성한다.

스택 콘텍스트 순서

스택 콘텍스트는 다음 순서대로 아래에서 위로(즉, 화면 뒤쪽에서 앞쪽으로) 레이어로 표시된다.

1. 스택 콘텍스트 요소의 배경색, 이미지, 테두리
2. 음수 z-index 값을 지정하고 배치를 지정한 자손 요소
3. 배치를 지정하지 않은 자손 블록 요소
4. 배치를 지정하지 않은 자손 플로트 요소
5. 배치를 지정하지 않은 자손 인라인 요소
6. z-index:auto나 z-index:0를 지정하고 배치를 지정한 자손 요소
7. 양수 z-index 값을 지정하고 배치를 지정한 자손 요소

수치 z-index 값을 지정한 배치 요소는 각기 별도의 국소적 스택 콘텍스트 형성하므로 2,6,7 요소는 가각 자체적인 스택 콘텍스트를 렌더링한다.

요소와 내용 묶기

요소에 위치가 지정되어 있지 않다면 블록과 블록이 겹칠때 내용이 겹쳐지지 않는다. 정적 블록 요소끼리 겹치면 두 요소의 배경은 겹치지만 그 안의 인라인 내용은 겹치지 않는다는 것이다. 인라인 요소는 블록 안에 있는 것이 아니라 블록 위에 있다는 것을 생각하면 이해가 된다.

배치를 지정한 요소는 내용과 한 덩어리라서 외부 요소가 그 안의 정적 자손 요소, 인라인 내용, 배경과 겹치는 것은 불가능하다.

배치 요소별 특징

정적 배치 (static)

요소를 원래 위치에 배치하려면 position: static을 지정한다. 이 값은 기본값이므로 요소는 자동으로 원래 위치에 렌더링된다. 블록 요소들은 세로방향으로 쌓이고 인라인 요소들은 블록 요소안에서 가로로 쌓인다.

정적 요소의 너비/높이, 패딩, 테두리, 마진에 따라 그 뒤에 있는 요소의 시작 위치가 정해진다.

절대 위치 (absolute)

요소를 절대 위치 박스로 렌더링하려면 position: absolute를 지정하고 크기를 지정하려면 width 속성과 height 속성을 지정한다. 부모 요소가 아니라 기준 요소를 기준으로 배치하려면 width와 height에 백분율을 지정한다. 요소를 배치하려면 부모 요소에 position: relative, position: absolute, position: fiexd 중 하나를 지정한다. 부모 요소 중 어느 것에도 배치를 지정하지 않으면 브라우저는 body 요소를 기준 요소로 인식한다.

• 절대 요소는 기준 요소를 기준으로 정밀한 위치를 설정할 수 있으며, 크기 지정, 자동 축소, 자동 확대가 가능하다.
• 절대 요소는 원래 위치 위의 레이어에 절대 위치 박스로 렌더링되는데, 이것은 블록 박스와 흡사하다.
• 플로트 요소와는 달리, 절대 요소는 흐름을 따르지 않는다.
• 절대 요소의 위치는 다른 요소나 내용의 위치에 영햐을 주거나 받지 않는다. 이 때문에 절대 요소가 다른 요소나 내용과 겹치는 문제가 생길 수도 있다.
• 모든 자식 요소가 절대 위치로 지정되면 원래 위치에서 벗어나 부모 요소 안에 내용이 전혀 없으므로 height 속성을 지정하지 않은 부모 요소의 높이는 0이 된다.
• 절대 위치를 사용한 레이아웃은 디자인할 때보다 너무 크거나 작은 화면이나 폰트를 사용하는 기기에서 크기가 제대로 조정되지 않는다.

IE6은 자동 확대 절대 요소를 자동 축소로 표시한다. 그리고 IE7 이하 버전은 절대 요소를 중앙에 맞추는 것이 불가능하다.

고정 배치 (fixed)

요소를 고정 배치 요소로 바꾸려면 position: fixed를 지정한다. 고정 배치는 절대 위치와 원리가 같지만, 요소가 브라우저 창을 기준으로 배치되며 브라우저 창이 스크롤돼도 요소는 스크롤되지 않고 그대로 있다.

• 고정 요소는 브라우저 창을 기준으로 한 위치를 정밀하게 설정할 수 있다.
• 스크롤되지 않으므로 메뉴, 툴바, 버튼 같은 컨트롤을 고정된 위치에 표시할때 유용하다.

IE6 이하 버전은 고정 배치 요소를 절대 요소로 렌더링한다. IE7 이상에서는 고정 요소를 제대로 지원한다.

상대 위치 (relative)

원래 흐름 안의 스택 순서를 조정하려면 position: relative를 지정해서 상대 위치를 지정한다. 스택 순서를 다른 배치 요소를 기준으로 해서 설정하려면 z-index 속성을 지정한다.

• 상대 요소는 원래 흐름을 벗어나지 않으며 원래 흐름에서의 형태가 바뀌지 않은 채로 배치된다. 예를 들어, 인라인 요소가 자동 줄바꿈으로 여러 줄을 차지할 경우에도 그 인라인 요소를 상대 위치로 지정하면 이런 특이한 레이아웃이 그대로 유지된다. 이것은 절대 위치와 대조된다. 절대 위치로 지정하면 인라인 요소는 절대 위치 박스로 바뀌고 내용의 흐름이 절대 블록 박스로 바뀌어 결국 레이아웃이 변하고 만다.

IE7 이하 버전의 hasLayout 구현 방식 때문에, 배치 지정 블록 요소 안의 상대 위치 인라인 요소는 그 블록 요소 외부에 있는 요소보다 화면 앞쪽에 쌓이지 않는다. 이러한 오류로 인해 IE7은 그림처럼 상대 위치 인라인 span 요소를 절대 위치 p 요소보다 화면 앞쪽에 표시하지 못하고 있다. 왜냐하면 p 요소가 레이아웃 속성을 가지므로 인라인 span 요소는 말 그대로 p 요소 안에 들어 있기 때문이다. 다른 브라우저에는 이 문제점이 없으며, IE에서도 부모 블록 요소가 정적 블록 요소일 때처럼 레이아웃 속성을 갖지 않으면 이 문제가 생기지 않는다. IE8 버전에서는 이 문제가 해결되었다.

플로트 위치 (float)

요소를 원래 흐름에서 벗어나게 하고 부모 요소의 패딩 영역 안쪽이나 오른쪽 가장자리 위치의 화면 앞쪽에 배치하려면, float: left나 float: right를 지정한다. 요소에 지정돼 있는 플로트 규칙을 해제하려면 float: none을 지정한다.

• 플로트 요소는 블록 요소의 배경보다 화면 앞쪽에 있는 자체 레이어 안에 존재하며 원래 흐름의 인라인 내용과 나란히 표시된다.
• 플로트 요소는 블록 박스의 위치에는 영향을 주지 않고, 인라인 내용의 위치에만 영향을 준다.
• 플로트 요소는 다른 플로트 요소의 위치에 영향을 미치며, 다른 요소의 왼쪽이나 오른쪽에 나란히 표시되게 할 수도 있고 다른 플로트 요소나 인라인 내용 밑으로 밀려 내려가게 할 수도 있다.
• 플로트 요소에 세로나 가로 마진을 지정하면 부모 요소나 다른 플로트 요소에서 떨어진 위치에 표시된다.
• 플로트 요소는 다른 플로트 요소나 내용과 겹치지 않지만, 마진을 음수로 지정하면 겹칠 수도 있다.

상대적 플로트 배치

플로트 요소를 상대 위치로 지정하려면 position: relative를 지정한다. 상대 위치 플로트 요소는 배치를 지정한 레이어 안에 렌더링되므로 z-index 속성으로 플로트 요소나 다른 배치 요소를 기준으로 스택 순서를 지정할 수 있다. 상대 위치 플로트 요소는 배치 속성이 지정돼 있으므로, 그 요소를 기준으로 절대 자손 요소를 배치할 수 있다.

• 상대적 플로트 배치는 margin 속성을 지정해서 플로트 요소를 기준으로 한 인라인 내용의 위치를 설정할 수 있다. 그런 다음, 인라인 내용의 위치에 영향을 미치지 않고 플로트 요소의 위치를 설정하려면 left 속성과 top 속성을 지정한다. 이 방법을 사용하면 플로트 요소를 굉장히 유연하게 배치할 수 있다.
• 상대적 플로트 배치를 사용하지 않으면, 문서 안에서 작성 순서를 바꾸지 않는 이상 플로트 요소나 다른 배치 요소의 쌓기 순서를 설정할 수 없다.

플로트 요소에 사용 가능한 배치 속성값은 position:relative와 position:static뿐이다. 플로트 요소에 position:absolute나 position:fixed를 지정하면 브라우저마다 다르게 처리하므로 결과가 불확실하다.