한 줄 요약
아무 설정을 하지 않으면 웹페이지의 요소는 위에서 아래로, 물이 흐르듯 차례대로 쌓입니다.
비유로 이해하기
웹페이지는 레고판처럼 아무 데나 꽂는 게 아니라, 컵에 물을 따르듯 위에서부터 차례로 채워집니다. 이 기본 규칙을 ‘흐름(Flow)’이라고 부릅니다.
흐름 안에는 두 종류의 요소가 있어요. 한 줄을 통째로 차지하는 블록 요소(문단, 제목, div)는 벽돌처럼 아래로 쌓이고, 문장 속 단어처럼 옆으로 이어지는 인라인 요소(span, a, strong)는 글자처럼 줄을 따라 흐릅니다.
비교해 보기
- 블록 요소 = 벽돌: 폭을 줄여도 다음 벽돌은 항상 아랫줄에 놓입니다.
- 인라인 요소 = 글자: 문장 안에서 옆으로 이어지고, 줄이 넘치면 자연스럽게 다음 줄로 넘어갑니다.
직접 실행해 보기
왼쪽 코드를 고치면 오른쪽 결과가 바로 바뀝니다. .box에 width: 200px;를 넣어 보세요. 폭이 줄어도 두 번째 블록은 옆으로 오지 않습니다.
GenerateBlocks에서는
GenerateBlocks의 컨테이너(Element 블록)는 기본적으로 블록 요소라서 아래로 쌓입니다. 옆으로 나란히 놓고 싶다면 다음 편들에서 배울 Flex나 Grid로 ‘흐름 규칙’을 바꿔 줘야 합니다.
참고: MDN: Introduction to CSS layout · Josh W. Comeau: Understanding Layout Algorithms