한국어

유럽

아시아

← 레벨 1 – 빌더

수업 8/12 ⏱ 30 분

상자 및 간격

CSS의 가장 큰 비밀을 알아보세요. 페이지의 모든 것이 상자야. 그리고 그것들을 옮기는 법을 배우세요.

보여줄게: 모든 것이 상자야

웹 디자인의 가장 큰 비밀은 다음과 같어. 페이지의 모든 항목은 직사각형 상자야. 제목, 단락, 이미지, 메뉴 – 이 모든 것야. 그것을 보는 방법을 배우면 모든 CSS가 제자리에 고정돼.

모든 상자 주변에는 세 가지 종류의 공간이 있어.

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘
.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

보여줄게: 전문가 빌드와 같은 페이지

실제 웹사이트에서 본 적이 있을 것야. 콘텐츠가 전체 와이드 화면에 걸쳐 펼쳐지지 않고 중앙의 편안한 열에 유지돼. 세 줄의 CSS가 이를 수행해.

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto마법의 공식야. 상단과 하단은 0이고 측면은 “자동으로 동일”해. 이는 중앙에 있음을 의미해. 전 세계 거의 모든 웹사이트가 이 규칙을 사용해.

그리고 이미지도 페이지 밖으로 흘러나오지 않도록 길들이자:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

네 차례 💪

이 작업은 모든 프로젝트에 동일해. 모든 웹사이트에 공통적으로 적용되는 작업야.

  1. 콘텐츠를 중앙에 배치해.max-width+margin: 0 auto지배하다main.
  2. 이미지를 길들이세요img예제에서 규칙을 따르세요.
  3. 지난 강의에서 배운 배지를 개선해. 추가margin그래서 숨쉴 공간이 좀 있어요.
  4. 페이지에 숨을 불어넣으세요: 추가body { line-height: 1.6; }– 텍스트 줄이 멋지게 펼쳐집니다.
완벽한 솔루션(모든 프로젝트에 적용 가능)이것을 다음에 추가하해`style.css`: 
body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

그리고 네 배지에(네 배지로 불릴 수도 있음).news,.favorite,.tip, 또는.win), 다음 줄을 추가해.

  margin: 20px 0;
💡
**상자를 표시해 보세요!** 잠시 동안 CSS에 다음 규칙을 추가해.* { 테두리: 1px 단색 빨간색; }– 별표는 "완전히 모든 것"을 의미해. 갑자기 페이지의 모든 상자가 표시돼. 그런 다음 다시 삭제하되 그 보기를 기억해. 이것이 브라우저가 페이지를 보는 방식야.
✅
**직접 확인해:** 콘텐츠는 편안한 중앙 열에 있고, 사진은 모서리가 둥글고 어디에도 흘러내리지 않으며, 텍스트도 쉽게 읽을 수 있어. 브라우저 창을 축소하면 콘텐츠가 조정돼. 네 웹 사이트가 갑자기 더 좋아 보야.

이번 수업에서 배울 점

© 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관