레이아웃 (Layout)

레이아웃(Layout)은 웹 화면에서 요소의 위치와 크기, 간격, 서로의 배치 관계를 정하는 구성입니다. 제목과 본문을 어떤 순서로 놓을지, 여러 카드를 몇 열로 보여 줄지, 화면이 좁아질 때 어떻게 바꿀지를 다룹니다. 색상과 브랜드 표현을 포함한 디자인 전체 가운데 배치에 해당하며, 화면에 보이는 순서와 문서가 읽히는 순서는 구분해 확인합니다.

문서 흐름과 요소 사이의 관계

MDN의 CSS 레이아웃 소개는 요소의 기본 위치, 주변 요소, 부모 컨테이너, 브라우저 화면을 기준으로 배치를 조절한다고 설명합니다. 요소를 어디에 놓을지는 고정된 좌표 하나로만 정해지지 않습니다. 본문 폭이 넓어지거나 옆의 영역이 사라지면 사용 가능한 공간도 달라집니다. 레이아웃을 정할 때는 이런 요소 사이의 관계도 함께 다룹니다.

별도의 CSS로 배치 방식을 바꾸지 않으면 요소는 일반 흐름(normal flow)에 따라 놓입니다. 가로쓰기를 하는 일반적인 문서에서 블록 요소는 앞 요소 아래에 새 줄로 이어지고, 인라인 요소는 같은 줄의 텍스트와 함께 놓이다가 공간이 부족하면 줄을 바꿉니다. 이런 기본 동작을 알면 문단이 길어졌을 때 다음 요소가 밀리거나 링크가 다음 줄로 넘어가는 이유를 설명할 수 있습니다.

필요한 배치에 따라 기본 흐름을 조절합니다. display는 요소가 배치에 참여하는 방식을 정하고, position은 위치 지정 방식을 바꿉니다. position: fixed로 위치를 고정한 요소는 일반 문단이 차례대로 쌓이는 경우와 다르게 동작합니다. 제목과 본문이 자연스럽게 이어질 부분과 별도로 고정할 부분을 구분하면, 모든 요소를 개별 좌표로 맞추지 않고도 구조를 표현할 수 있습니다.

박스 크기와 안팎의 간격

MDN의 박스 모델 설명은 요소의 박스를 콘텐츠, 패딩, 테두리, 마진의 네 영역으로 구분합니다. 콘텐츠는 글자나 이미지가 들어가는 부분이고, 패딩은 콘텐츠와 테두리 사이를 넓힙니다. 마진은 테두리 바깥에서 이웃 요소와의 거리를 만듭니다. 카드 안의 글자가 테두리에 붙은 문제와 카드끼리 너무 붙은 문제는 간격이 필요한 위치가 다릅니다.

박스 너비를 계산할 때는 box-sizing 설정이 영향을 줍니다. content-box인 블록 요소에서 지정한 width는 콘텐츠 영역의 너비를 가리키므로 패딩과 테두리가 바깥에 더해집니다. border-box에서는 지정한 너비에 패딩과 테두리까지 포함됩니다. 같은 너비 값을 넣어도 설정과 간격에 따라 실제로 차지하는 공간이 달라지므로, 옆 요소가 밀리는 현상은 너비 값만으로 판단하기 어렵습니다.

마진도 언제나 숫자를 단순히 더한 거리로 나타나지는 않습니다. 인접한 블록의 세로 마진은 조건에 따라 겹쳐지는 마진 상쇄가 일어납니다. 같은 MDN 문서는 상쇄가 일어나면 마진이 박스 사이에서 공유된다고 설명합니다. 요소 사이 간격이 예상과 다르면 어느 영역의 간격인지, 어떤 배치 방식에서 계산되는지를 구분합니다. 패딩과 마진을 같은 종류의 여백으로 취급하면 박스의 크기와 간격을 함께 바꾸게 될 수 있습니다.

화면 변화와 문서 읽기 순서

MDN의 레이아웃 소개는 Flexbox와 CSS Grid를 부모 안에서 자식 요소의 배치를 바꾸는 방법으로 설명합니다. 반응형 디자인은 기기의 화면 조건에 맞춰 배치를 바꾸는 설계이며, @media는 화면 너비 같은 조건에 따라 다른 규칙을 적용하는 데 쓰입니다. 넓은 화면에서 여러 열로 놓인 카드를 작은 화면에서 세로로 쌓는 구성처럼, 같은 콘텐츠에 다른 배치 규칙을 적용합니다.

CSS로 시각적 위치를 바꾸는 것과 문서 객체 모델(DOM)에 있는 요소 순서를 바꾸는 것은 다릅니다. 같은 MDN 문서는 일반 흐름에서 읽을 수 있는 잘 구성된 문서로 시작해야 화면 낭독기 같은 환경에서도 내용을 읽기 좋다고 설명합니다. 화면에서 먼저 보이는 안내가 문서상으로는 입력칸 뒤에 있다면, 시각적 인상과 읽는 순서가 달라질 수 있습니다. 배치를 조정할 때는 눈에 보이는 위치와 문서의 의미 있는 순서를 함께 확인합니다.

레이아웃을 확인할 때는 한 크기의 빈 화면보다 실제 내용이 들어간 상태가 중요합니다. 긴 제목과 여러 줄의 본문이 들어왔을 때 요소가 겹치는지, 화면을 줄이면 내용이 잘리거나 불필요한 가로 스크롤이 생기는지 살핍니다. 시각적 배치가 맞아도 문서를 읽는 순서가 자연스러운지는 별도로 확인합니다. 화면 크기와 콘텐츠 길이가 달라지는 조건을 함께 다뤄야 특정 예시에서만 맞는 배치와 여러 상황에서 유지되는 배치를 구분할 수 있습니다.