02. index.css — 기본 스타일 설정

이번 단계에서 할 일

모든 컴포넌트에 공통으로 적용되는 기본 스타일을 작성합니다.

왜 초기화가 필요한가요?

브라우저(Chrome, Firefox, Edge 등)마다 기본 스타일이 조금씩 다릅니다. 예를 들어 <h1> 태그의 기본 크기나 여백이 브라우저마다 다를 수 있습니다.

이 프로젝트는 reset-css 라이브러리로 초기화를 합니다. npm install 시 이미 설치되어 있으며, @import 로 불러옵니다.

1
npm install reset-css

index.css 전체 코드

1
/* ─── 1. 전체 초기화 (라이브러리) ─────────── */
2

3
@import "reset-css/reset.css";
4

5
/* ─── 2. 기본 폰트·색상 설정 ──────────────── */
6

7
body {
8
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
9
  background-color: #ffffff;
10
  color: #1e1e1e;
11
}
12

13
/* ─── 3. 링크 기본 스타일 제거 ────────────── */
14

15
/* <a> 태그의 파란색 밑줄을 없앱니다 */
16
a {
17
  text-decoration: none;
18
  color: inherit;
19
}
20

21
/* ─── 4. 목록 스타일 제거 ─────────────────── */
22

23
/* <ul> 태그의 점(•)을 없앱니다 */
24
ul {
25
  list-style: none;
26
}
27

28
/* ─── 5. 전체 레이아웃 너비 설정 ──────────── */
29

30
/* 콘텐츠를 가운데 정렬하고 좌우 여백 추가 */
31
.container {
32
  padding: 0 10vw;
33
  margin: 0 auto;
34
}

코드 설명

@import "reset-css/reset.css" 란?

외부 라이브러리를 불러오는 방법입니다. reset-css 는 브라우저마다 다른 기본 스타일을 모두 제거해줍니다.

직접 * { margin: 0; padding: 0; } 을 쓰는 것보다 더 완전하게 초기화됩니다.

.container — 레이아웃 가운데 정렬

1
.container {
2
  padding: 0 10vw;  /* 좌우 화면 너비의 10% 여백 */
3
  margin: 0 auto;   /* 가운데 정렬 */
4
}

• 10vw → 뷰포트 너비의 10% (화면 크기에 따라 자동으로 조정됨)
• margin: 0 auto → 남은 공간을 좌우로 균등하게 나눔 → 가운데!

App.jsx 에서 <div className="app container"> 로 이 클래스를 적용합니다.

color: inherit 란?

부모 요소의 색상을 그대로 물려받는다는 뜻입니다.

1
a {
2
  color: inherit; /* 부모의 color를 따름 */
3
}

<a> 태그는 기본적으로 파란색이지만, inherit을 쓰면 주변 텍스트 색과 같아집니다.

브라우저 확인

저장 후 브라우저에서 확인하면:

• 기본 여백이 사라집니다
• Nav, Hero 등의 텍스트가 왼쪽에 붙어 보입니다