문서 흐름은 웹 브라우저가 요소들을 문서의 순서와 배치 규칙에 따라 놓는 방식이다. 기본적인 가로쓰기 문서에서 제목과 문단 같은 [[블록 요소]]는 앞뒤 요소와 자리를 나누며 아래로 이어진다. 하이퍼링크와 강조처럼 글줄 안에 놓이는 인라인 요소는 문장을 따라 배치된다. [[CSS]]로 복잡한 위치를 지정하지 않아도 글을 읽을 수 있는 까닭은 이런 기본 배치가 있기 때문이다. 화면에서 위치를 바꾸기 전에 [[HTML 문서]]의 순서 자체가 자연스러운지 살필 필요가 있다. [[새로운 질서]]는 레이아웃이 내용 구조의 문제를 잠시 가리고 있지는 않은지 묻는다.

나란히 놓을 필요가 있는 항목이 생기면 그 무리에 맞는 배치 규칙을 적용할 수 있다. 짧은 이동 링크들을 한 방향으로 놓을 때는 플렉스 배치를 사용하고 두 방향의 격자가 필요하면 그리드를 살펴볼 수 있다. 문단까지 모두 별도의 배치 장치로 감쌀 필요는 없다. 절대 위치를 지정한 요소는 일반 흐름에서 빠지므로 내용이 늘어났을 때 다른 요소와 겹칠 수 있다. CSS를 잠시 비활성화해 읽는 순서를 살핀 뒤 필요한 무리의 배치만 바꾸면 억지로 좌표를 맞추는 일을 줄일 수 있다. 좋은 흐름은 내용과 화면의 변화에도 요소들이 자리를 조정할 수 있게 하며 [[반응형 디자인]]의 바탕이 된다.

## 기타 등등

- 서로 맞닿은 세로 여백은 언제나 덧셈되지 않는다. 일반 흐름에서 두 양수 여백이 겹쳐지면 더 큰 값이 남는 경우가 있다. [출처](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction)
- 블록이 흐르는 방향은 쓰기 방향의 영향을 받는다. 가로쓰기에서 익숙한 위아래 배치를 모든 언어와 문서의 고정 규칙으로 볼 수는 없다. [출처](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction)

#개념 #CSS #HTML