1. 개요
뷰포트와 관련해 박스를 올바른 장소에 배치하는 방법을 살펴본다.
요소들이 나란히 표시되는 요소를 inline 요소, 다른 요소 아래에 표시되는 요소를 block 요소라 한다.
문서의 많은 요소에서 일반 흐름(normal flow)은 필요한 레이아웃을 정확히 생성하지만,
복잡한 레이아웃의 경우 이 기본 동작을 변경해야 할 때가 있다.
CSS에서 레이아웃을 지정하는 데 핵심적인 속성들은 다음과 같다.
display
floats
position
레이아웃을 구성할 때 display로 문서의 전체적인 뼈대와 주요 컴포넌트 구조를 잡고,
이 위에서 position으로 요소의 정확한 위치를 제어하고 오버레이(팝업 등)을 처리한다.
또 float은 이미지를 감싸는 등 세부적인 텍스트 흐름 제어가 필요할 때 사용된다.
2. display
CSS 상에서 페이지의 레이아웃을 구현하는 주요 방법은 display 속성에 포함된 어떤 값을 지정하는 것이다.
일반 흐름(normal float) 상의 모든 요소는 display 값을 가지고 있다.
p는 block, span은 inline이 기본 display 값이다.
block, inline 또는 inline-block과 같은 기본 속성값은 일반 흐름 속에서 요소가 동작하는 방식을 변경한다.
이러한 기본값은 개발자가 명시적으로 지정해서 변경이 가능한데,
HTML 요소들이 어떻게 보일지 신경쓰지 않고 해당 HTML 요소의 의미론적(시맨틱) 의의를 개발자가 선택할 수 있다는 의미이다.
예를 들어 블록 요소를 인라인 요소로 동작하게 하는 식이다.
하나의 display 속성으로 시작해 더 복잡한 레이아웃을 구성할 수도 있다(flex, grid).
이것은 부모 요소 내부의 자식 요소가 배치되는 방식을 변경한다.
3. floats
float 속성을 조절하여 block 요소가 어떤 요소의 한쪽 측면으로 밀려나게 할 수 있다.
이 속성이 적용된 요소는 일반 흐름(normal flow)에서 벗어나 마치 둥둥 떠다니는 것처럼 취급되고, 다른 요소들이 감싸는 방식으로 배치된다.
페이지의 기본 레이아웃을 구성하는 데에는 적합하지 않다. display로 해결하는 게 일반적이다.
보통 특정 요소의 위치를 관리하고 미세 조정하는 데 쓰인다
inline 요소에서 적용할 수 있고, 이 때는 요소가 floating box로 취급된다.
float 속성이 적용된 요소를 Floating Box라고 부르는데, 이 박스는 다음 특징을 가진다.
블록화: inline 요소였더라도 float이 적용되면 block 요소처럼 width, height, margin, padding 속성을 가질 수 있게 된다.
높이 문제: float된 요소는 부모 요소의 높이 계산에 포함되지 않는 경우가 많다. 이 문제를 해결하기 위해 clear 속성이나 clearfix 핵을 사용한다.
clear: both;는 해당 요소가 float된 요소 아래에 위치하도록 강제하여 레이아웃을 정돈한다.
4. position
다른 박스 내부에 있는 박스의 배치를 제어할 수 있다. 기본적으로 static 값을 가진다.
요소의 정확한 위치를 제어하는 데 쓰인다.
static을 제외한 다른 값을 지정하게 되면 요소가 일반 흐름(normal flow)에서 벗어나게 된다.
position은 요소가 일반 흐름을 따르게 할지, 다른 기준(뷰포트, 부모 요소)를 기준으로 배치하게 할지를 결정한다.
position은 다음 다섯 가지 값을 가진다.
static(기본값)
역할: 모든 요소의 기본 위치 지정 값
특징:
- 요소를 일반 흐름에 배치한다.
- top, right, bottom, left 속성이 아무런 영향도 미치지 못한다.
배치 기준: 문서의 흐름relative(상대적 위치)
역할: 요소를 일반 흐름에 따라 배치하나, 원래 위치를 기준으로 위치를 조정할 수 있다.
특징:
- top, right, bottom, left 속성이 적용된다.
- 요소가 이동하더라도 원래 차지하고 있던 공간은 그대로 유지되어 다른 요소들이 침범하지 않는다.
배치 기준: 요소의 원래 위치absolute(절대적 위치)
역할: 요소를 일반 흐름에서 완전히 제거하고 가장 가까운 position: static이 아닌 상위 요소를 기준으로 위치를 지정한다.
특징:
- top, right, bottom, left 속성이 적용된다.
- 요소가 일반 흐름에서 벗어나기 때문에 원래 차지하고 있던 공간이 사라진다. 따라서 다른 요소가 기존 공간을 채우게 된다.
- 만약 position: static이 아닌 상위 요소가 없다면 body를 기준으로 한다.
배치 기준: 가장 가까운 position이 static이 아닌 상위 요소
팁: 부모 요소에 position: relative를 지정해서 absolute 요소를 특정 부모 안에 가두어 배치할 수 있다.fixed(고정된 위치)
역할: 요소를 일반 흐름에서 완전히 제거하고 뷰포트를 기준으로 위치를 지정한다.
특징:
- top, right, bottom, left 속성이 적용된다.
- 페이지가 스크롤되어도 요소는 항상 뷰포트의 같은 위치에 고정되어 나타난다.(ex. 내비게이션 바, 알림 배너)
배치 기준: 뷰포트(Viewport)sticky(끈적한 위치)
역할: 특정 임계값이 도달할 때까지는 relative처럼 동작하다가, 임계값에 도달하면 fixed처럼 동작하게 전환된다.
특징:
- 요소가 일반 흐름을 따르지만, top, right, bottom, left 중 하나가 지정되어야 한다.
- 스크롤하다가 요소가 지정된 위치(ex. top: 0;)에 닿으면 그 위치에 고정된다.
- 주로 사이드바나 헤더에 사용된다.
배치 기준: 스크롤 위치
5. table-layout
HTML 테이블의 일부 스타일을 문서에서 지정할 수 있다.
display:table을 사용해 테이블 관련 속성을 비 테이블 요소에서 사용할 수 있다.
초창기 기본적인 CSS조차 브라우저가 안정적으로 지원하지 못하던 시절, 개발자는 궁여지책으로 전체 웹 페이지 레이아웃을 구성할 때 table-layout을 사용하곤 했다.
원하는 효과는 있었으나, 유연하지 않고 문서가 무거워졌으며 디버깅도 어렵고 시맨틱하지도 않다는 큰 단점들이 있었고, flex와 grid에 대체되었다.
현재 최신 프로젝트에는 사용되지 않는 레거시 기법이며, 극히 일부 구형 브라우저를 지원할 때 이 기법을 사용한다.
6. 다단 레이아웃
컨텐츠를 여러 개의 열(column)으로 나누어 배치하기 위해 고안되었다.
현재는 display의 flex, grid에 밀려 대세는 아니지만, 신문 기사나 잡지 등 텍스트 기반의 긴 컨텐츠 레이아웃을 구성할 때 제한적으로 사용된다.
column- 으로 시작하는 속성을 이용해서 레이아웃을 구성할 수 있다.