박스 모델과 간격
CSS의 핵심 개념! Content, Padding, Border, Margin으로 이루어진 박스 모델을 이해하고, max-width와 섹션 여백 규칙까지 배웁니다.
박스 모델 레이어
모든 HTML 요소는 이 4가지 레이어로 구성되어 있어요. 마치 양파 껍질처럼 안에서 밖으로 감싸고 있습니다.
레이어를 선택하세요
다이어그램에서 각 영역을 클릭하면
자세한 설명을 볼 수 있습니다.
box-sizing: 크기 계산 방식
🎁 선물 상자를 생각해보세요. "200px 상자"라고 하면, 상자 전체 크기일까요, 아니면 내용물만의 크기일까요?
패딩과 테두리가 바깥으로 더해져요
패딩과 테두리가 안쪽으로 들어가요
💡 바이브코딩 팁
Tailwind CSS를 사용하면 이미 border-box가 기본이라 걱정 없어요!
다른 프로젝트에서는: "모든 요소에 box-sizing: border-box를 적용해줘"
여백 스케일
4px 단위로 통일하면 디자인이 정돈되어 보여요.
📏 여백 규칙
- • 버튼 패딩: 8~16px
- • 카드 패딩: 16~24px
- • 섹션 간격: 48~64px
마진 충돌
세로 마진은 합쳐지지 않고, 큰 값만 적용돼요.
예상과 다른 상황
해결 방법
- 한쪽만 마진 주기
- gap 사용 (Flex/Grid)
- 패딩으로 대체
💡 바이브코딩 팁
"카드 사이 간격을 gap으로 바꿔줘"
컨테이너 (Container)란?
책을 읽을 때 글이 페이지 끝까지 가면 눈이 피로하죠? 컨테이너는 콘텐츠의 너비를 적당히 제한해서 읽기 편하게 만들어주는 역할을 해요.
화면 너비 시뮬레이터
슬라이더를 움직여서 다양한 화면 크기에서 컨테이너가 어떻게 동작하는지 확인해보세요.
"콘텐츠 최대 너비를 1200px로 제한하고 가운데 정렬해줘"
컨테이너 종류
클릭하면 각 컨테이너의 상세 설명을 볼 수 있어요.
🖥️ 가장 많이 쓰이는 '표준' 컨테이너 너비예요. 네이버, 쿠팡 같은 대부분의 웹사이트가 이 정도 너비를 사용해요. 27인치 모니터에서도 양쪽에 적당한 여백이 생겨서 보기 편합니다. 어떤 너비를 써야 할지 모르겠다면, 이걸 선택하세요!
특대형 컨테이너
🖥️ 가장 많이 쓰이는 '표준' 컨테이너 너비예요. 네이버, 쿠팡 같은 대부분의 웹사이트가 이 정도 너비를 사용해요. 27인치 모니터에서도 양쪽에 적당한 여백이 생겨서 보기 편합니다. 어떤 너비를 써야 할지 모르겠다면, 이걸 선택하세요!
"컨테이너 너비를 1280px로 해줘"
섹션 패딩 (상하 여백)
섹션과 섹션 사이의 여백을 통일하면 페이지가 정돈되어 보여요.
기본 여백
"각 섹션에 상하 여백 48px 줘"
정렬 규칙
왼쪽 정렬과 가운데 정렬, 언제 어떤 걸 쓸까요?
왼쪽 정렬
책을 읽을 때처럼 왼쪽에서 시작하는 자연스러운 정렬이에요. 우리 눈은 왼쪽 → 오른쪽으로 읽는 데 익숙해요. 그래서 긴 글은 왼쪽 정렬이 훨씬 읽기 편합니다. '내용'을 전달하는 텍스트에는 왼쪽 정렬을 쓰세요.
가운데 정렬
시선을 중앙으로 모아 '주목'시키는 정렬이에요. 영화 포스터의 제목이 가운데 있는 것처럼요. 짧은 제목이나 버튼처럼 한눈에 봐야 하는 요소에 적합해요. 단, 3줄 이상의 긴 문장은 읽기 어려우니 피하세요!
"히어로 섹션 제목은 가운데 정렬로 해줘"
"블로그 본문은 왼쪽 정렬로 해줘"