📖 한국경영교육연구소 AI ACADEMY · 용어·통역 사전
박스 모델 (box model)
💬 쉬운 뜻
웹의 모든 요소는 사실 네모난 '상자'예요. 그 상자는 안에서 밖으로 내용 → 안쪽 여백(패딩) → 테두리(보더) → 바깥 여백(마진) 순서로 4겹이 겹쳐 있어요. 이 구조를 알면 '왜 자꾸 밀리지?', '왜 간격이 이상하지?'가 한 번에 이해됩니다.
⌨️ 이럴 땐 이렇게 입력
- 이 버튼이 너무 빽빽해. 글자랑 테두리 사이가 좁으니까 안쪽 여백(padding)을 키워줘. 바깥 간격(margin)은 그대로 둬.
- 카드들이 서로 너무 붙어 있어. 카드끼리의 바깥 여백(margin)만 늘려서 사이를 띄워줘. 안쪽 여백은 건드리지 마.
🔮 AI가 이렇게 답하면 = 이런 뜻
AI가 "padding은 테두리 안쪽 내용과의 여백, margin은 테두리 바깥 다른 요소와의 거리예요"라고 답하면 = 지금 간격 문제를 '상자 안쪽'을 키워서 풀지, '상자끼리 거리'를 띄워서 풀지부터 정하라는 뜻입니다.
➡️ 다음엔 이렇게
간격이 이상하면 먼저 '내용과 테두리 사이가 좁은 건지(→padding), 옆 요소와 너무 붙은 건지(→margin)'를 구분해서 말하고, 그래도 안 맞으면 "테두리(border) 두께도 간격에 포함되니 box-sizing: border-box로 맞춰줘"라고 한 줄 덧붙이세요.
한국경영교육연구소 · AI ACADEMY — 외부강사 김지백 · 시연 교실 홈