리액트 프로젝트까지 무사히 생성하고 화면을 띄워보았다면, 이제 웹페이지의 뼈대를 이루는 HTML과 그 옷을 입히는 CSS의 세계로 진입할 차례다. 웹 디자인을 처음 공부할 때 초보자들이 가장 거세게 벽을 느끼는 순간이 바로 내가 원하는 대로 박스의 크기나 위치가 잡히지 않을 때다.
"코드상으로는 분명히 가로폭을 똑같이 줬는데 왜 오른쪽 박스는 아래로 떨어질까?", "마진(Margin)을 주었는데 왜 내가 생각한 것보다 훨씬 더 넓은 간격이 벌어질까?"
이 모든 의문의 정답은 바로 CSS의 근간을 이루는 '박스 모델(Box-Model)'의 원리를 정확히 이해했느냐에 달려 있다.
[소제목] CSS 박스 모델의 4가지 핵심 구성 요소
웹페이지에 존재하는 모든 HTML 요소는 눈에 보이든 보이지 않든 사각형 형태의 박스로 이루어져 있다. 이 박스는 안쪽부터 바깥쪽까지 총 4개의 계층으로 엄격하게 분리되어 설계되어 있다.
내용(Content): 텍스트나 이미지 등 실제 콘텐츠가 담기는 가장 핵심적인 내부 공간이다.
안쪽 여백(Padding): 내용과 테두리 사이의 간격으로, 박스 내부의 숨구멍 역할을 한다.
테두리(Border): 내용과 안쪽 여백을 감싸는 경계선이다.
바깥쪽 여백(Margin): 다른 요소와 떨어진 외부 간격으로, 요소와 요소 사이의 거리를 조절한다.
초보 시절에 가장 많이 겪는 착오는 박스의 전체 너비를 계산할 때 단순히 width 값만 생각한다는 점이다. 브라우저는 우리가 지정한 width에 좌우 padding과 border 두께까지 합산해서 실제 화면에 그려내기 때문에, 예상했던 크기보다 박스가 자꾸 커지거나 레이아웃이 깨지는 현상이 발생한다.
[소제목] 레이아웃 붕괴를 막아주는 box-sizing: border-box의 마법
이 복잡한 계산 때문에 실무에서는 레이아웃을 짤 때 국룰처럼 사용하는 필수 설정이 있다. 바로 box-sizing 속성이다.
기본값인
content-box상태에서는 너비를 지정하면 패딩과 테두리가 바깥으로 덧붙여지면서 전체 크기가 계산을 벗어나 커진다.반면 CSS 최상단(또는 모든 요소)에
box-sizing: border-box;를 적용하면, 우리가 지정한width값 안에 패딩과 테두리가 알아서 포함되어 계산된다.즉, 박스 크기를 300픽셀로 고정해 두고 패딩을 20픽셀을 주어도 전체 외형 크기가 300픽셀로 유지되므로 레이아웃이 삐뚤어질 일이 사라진다.
직접 코딩을 해보면 알겠지만, 이 설정 하나를 빼먹어서 매번 레이아웃이 사방으로 튀어나가는 고생을 하곤 한다. 따라서 프로젝트를 시작할 때 CSS 초기화(Reset) 과정에서 * { box-sizing: border-box; }를 선언해 두는 것이 정신 건강에 이롭다.
[소제목] 마진 병합(Margin Collapse) 현상 이해하기
박스 모델을 다룰 때 초보자들이 또 하나 크게 당황하는 지점이 바로 '마진 병합' 현상이다. 위쪽 박스에 아래쪽 마진을 50픽셀 주고, 바로 아래에 있는 박스에 위쪽 마진을 50픽셀 주면 두 박스 사이의 간격이 100픽셀이 될 것이라 예상하기 쉽다.
하지만 브라우저는 상하 마진이 서로 맞닿을 때 두 값이 더해지는 것이 아니라, 더 큰 값 하나만 적용해 버리는 마진 병합 현상을 일으킨다. 이 때문에 간격이 좁아 보이거나 의도치 않게 부모 요소 바깥으로 마진이 튀어나가는(Margin Collapsing) 버그 같은 상황을 마주하게 된다. 이럴 때는 플렉스박스(Flexbox)의 gap 속성을 활용하거나 패딩을 적절히 혼용하여 간격을 조절하는 실무적 요령이 필요하다.
[소제목] 초보자가 자주 하는 실수와 주의사항
레이아웃을 잡을 때 너비(width)와 높이(height)를 모든 요소에 고정값(px)으로 박아두는 것은 모바일 반응형 웹 디자인 시대에 가장 피해야 할 실수 중 하나다. 화면 크기가 줄어들었을 때 고정 크기 박스는 화면을 뚫고 나가거나 가로 스크롤을 유발한다.
또한, 마진을 이용해 요소를 억지로 중앙에 정렬하려고 좌우 숫자를 감으로 때려 넣는 행동도 지양해야 한다. 가로 정렬이 필요하다면 margin: 0 auto;를 쓰거나 최근 대세인 Flexbox 구조를 도입하는 것이 훨씬 안전하고 깔끔하다. 처음에는 박스들의 테두리에 배경색이나 얇은 선을 임시로 쳐가며 영역을 시각적으로 확인하는 습관을 들이면 레이아웃 실수를 눈에 띄게 줄일 수 있다.
핵심 요약:
모든 HTML 요소는 Content, Padding, Border, Margin으로 이루어진 박스 모델 구조를 가진다.
박스 크기 계산의 혼란을 막기 위해
box-sizing: border-box설정을 기본으로 적용하는 것이 실무의 정석이다.상하 마진이 겹칠 때 발생하는 마진 병합 현상을 이해하고, 고정 크기보다는 유연한 단위를 사용하는 습관을 들여야 한다.
다음 편 예고: 다음 편에서는 자바스크립트 비동기 처리와 콜백 지옥의 개념을 쉽게 잡는 방법을 다룬다.
이 글을 읽으면서 CSS 레이아웃을 짜다가 박스가 마음대로 움직이지 않아 답답했던 경험이 있다면 댓글로 편하게 공유해 주세요!
0 댓글