3단계 — CSS, 보이는 모습

HTML 이 무엇 이라면, CSS 는 어떻게 보일지 입니다. 색·여백·정렬·반응형까지 모두 CSS 한 가지로 다뤄요.

박스 모델 — 모든 요소는 네 겹

화면의 모든 요소는 안에서 밖으로 네 겹입니다.

[ margin (바깥 여백) ]
  [ border (테두리) ]
    [ padding (안쪽 여백) ]
      [ content (내용) ]

.card {
  margin: 16px;
  padding: 12px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

이 네 겹을 머릿속에 그려 두면 모든 레이아웃 디버깅이 쉬워져요.

Flexbox — 한 줄·한 열 정렬

가로 또는 세로 한 방향 정렬은 Flexbox 가 정답입니다.

.row {
  display: flex;
  gap: 12px;          /* 사이 간격 */
  align-items: center; /* 세로 가운데 */
  justify-content: space-between; /* 좌우 끝으로 분산 */
}

gap, align-items, justify-content 셋만 알면 90% 의 레이아웃이 됩니다.

Grid — 2차원 레이아웃

행·열을 동시에 다루면 Grid:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 균등 */
  gap: 16px;
}

@media (max-width: 768px) {
  .cards { grid-template-columns: 1fr; } /* 모바일은 1열 */
}

직접 해 보기

위 index.html (2단계의) 의 <head> 안에 다음 한 줄을 넣어 보세요.

<style>
  body { font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; }
  h1 { color: #0ea5e9; }
</style>

새로고침하면 글이 가운데 모아지고 제목이 sky-blue 가 됩니다. CSS 의 첫 효과.

더 깊이

CSS 노트
Tailwind CSS 노트 — 클래스로 박는 CSS

다음 단계

4단계에서는 페이지를 움직이는 JavaScript 를 만나요.