CSS 기본 — 선택자와 박스 모델

이 토픽을 마치면

CSS가 HTML에 어떻게 스타일을 입히는지 이해하고, 선택자로 원하는 요소를 골라 디자인을 바꿀 수 있습니다.

CSS는 디자인 담당입니다

HTML이 웹페이지의 뼈대라면, CSS(Cascading Style Sheets)는 옷입니다. 색상, 크기, 간격, 배치 — 눈에 보이는 모든 디자인을 CSS가 담당합니다.

html

<!-- HTML 파일 안에서 CSS를 적용하는 가장 간단한 방법 -->
<style>
  h1 {
    color: navy;
    font-size: 24px;
  }
  p {
    color: #333;
    line-height: 1.6;
  }
</style>

<h1>제목입니다</h1>
<p>이 문단에 스타일이 적용됩니다.</p>

h1 { ... } — 이것이 CSS 규칙입니다. h1이 선택자(어떤 요소에?), 중괄호 안이 선언(어떤 스타일을?)입니다.

선택자의 종류

CSS에서 가장 중요한 질문은 "어떤 요소를 골라서 스타일을 입힐 것인가"입니다. 이것을 결정하는 것이 선택자입니다.

css

/* 태그 선택자 — 해당 태그 전체 */
p { color: gray; }

/* 클래스 선택자 — 점(.)으로 시작, 여러 요소에 재사용 */
.highlight { background-color: yellow; }

/* ID 선택자 — 샵(#)으로 시작, 페이지에 하나만 */
#main-title { font-size: 32px; }

/* 자식 선택자 — 특정 요소 안의 요소만 */
.card p { font-size: 14px; }

html

<h1 id="main-title">큰 제목</h1>
<p class="highlight">강조된 문단</p>
<p>일반 문단</p>

실무에서 가장 많이 쓰는 것은 클래스 선택자(.)입니다. 하나의 스타일을 여러 요소에 재사용할 수 있기 때문입니다.

박스 모델

브라우저는 모든 HTML 요소를 박스(상자) 로 취급합니다. 이 박스는 안쪽부터 4개의 층으로 구성됩니다:

text

┌─────────────────────────── margin (외부 간격) ──┐
│  ┌──────────────────────── border (테두리) ───┐  │
│  │  ┌───────────────────── padding (내부 간격) │  │
│  │  │                                        │  │
│  │  │         content (실제 내용)              │  │
│  │  │                                        │  │
│  │  └────────────────────────────────────────┘  │
│  └──────────────────────────────────────────────┘
└──────────────────────────────────────────────────┘

css

.card {
  width: 300px;          /* content 너비 */
  padding: 16px;         /* 내용과 테두리 사이 간격 */
  border: 1px solid #ddd; /* 테두리 */
  margin: 20px;          /* 다른 요소와의 간격 */
}

"왜 width를 300px로 했는데 실제로는 더 넓지?" — padding과 border가 더해지기 때문입니다. 이걸 방지하려면 box-sizing: border-box;를 쓰면 padding과 border가 width 안에 포함됩니다. 거의 모든 프로젝트에서 기본으로 설정합니다.

→ 바이오에 적용: DevBench — 웹 기초