1
│ ─── ABOUT ME ──────────────────────────────────── │
2
│  끈기와 열정으로 성장하는 오성의입니다.              │
3
│                                                   │
4
│  ┌──────────────────────┬──────────────────────┐  │
5
│  │ 학력 및 교육사항       │ 인적사항              │  │
6
│  │ 22.10-22.10 | 수료   │ 이름  : 오성의        │  │
7
│  │ 20.02-22.10 | 졸업   │ 나이  : 1996.05.     │  │
8
│  │                      │ 거주지 : 서울시 서초구 │  │
9
│  │ 자격사항              │ 휴대폰 : 010.xxxx     │  │
10
│  │ 21.07 | 컴활 2급      │ 이메일 : xxx@xxx      │  │
11
│  └──────────────────────┴──────────────────────┘  │

1
// 데이터 전달 (부모)
2
<SectionTitle title="ABOUT ME" subtitle="끈기와 열정으로..." />
3

4
// 데이터 받기 (자식)
5
const SectionTitle = ({ title, subtitle }) => {
6
  return <h2>{title}</h2>  // "ABOUT ME"
7
}

1
// AboutMe 섹션 제목
2
<SectionTitle title="ABOUT ME" subtitle="끈기와 열정으로 성장하는 오성의입니다." />
3

4
// Projects 섹션 제목
5
<SectionTitle title="Projects" subtitle="끈기와 열정으로 성장하는 오성의입니다." />

1
// 컴포넌트 없이 작성하면 (반복이 많음)
2
<div className="info-row">
3
  <span className="info-row__label">이름 :</span>
4
  <span className="info-row__value">오성의</span>
5
</div>
6
<div className="info-row">
7
  <span className="info-row__label">나이 :</span>
8
  <span className="info-row__value">1996.05.</span>
9
</div>
10
// ... 5번 반복
11

12
// 컴포넌트로 만들면 (간결함)
13
<InfoRow label="이름" value="오성의" />
14
<InfoRow label="나이" value="1996.05." />
15
// ... 훨씬 짧고 읽기 쉬움

1
// JavaScript 주석 (JSX 밖에서)
2
const x = 1
3

4
return (
5
  <div>
6
    {/* JSX 주석 (JSX 안에서) */}
7
    <p>내용</p>
8
  </div>
9
)

1
/* src/index.css 에 추가 */
2

3
/* ── 섹션 공통 제목 ──────────────────────── */
4

5
.section-title {
6
  margin-bottom: 48px;
7
}
8

9
.section-title__row {
10
  display: flex;
11
  align-items: center;
12
  gap: 16px;
13
  margin-bottom: 8px;
14
}
15

16
/* 세로 검정 라인 */
17
.section-title__line {
18
  width: 2px;
19
  height: 36px;
20
  background-color: #000;
21
}
22

23
.section-title__text {
24
  font-size: 48px;
25
  font-weight: 700;
26
  color: #000;
27
}
28

29
.section-title__sub {
30
  font-size: 16px;
31
  color: #555555;
32
  padding-left: 18px;  /* 세로 라인 너비만큼 들여쓰기 */
33
}
34

35
/* ── About Me ────────────────────────────── */
36

37
.about {
38
  padding: 80px 24px;
39
}
40

41
/* 2단 그리드 */
42
.about-grid {
43
  display: grid;
44
  grid-template-columns: 1fr 1fr;  /* 왼쪽 50% : 오른쪽 50% */
45
  gap: 40px;
46
}
47

48
.about-block {
49
  margin-bottom: 32px;
50
}
51

52
/* 블록 소제목 */
53
.about-block__title {
54
  font-size: 18px;
55
  font-weight: 600;
56
  color: #333333;
57
  margin-bottom: 16px;
58
  padding-bottom: 8px;
59
  border-bottom: 1px solid #eeeeee;
60
}
61

62
/* 항목 한 줄 */
63
.about-block__item {
64
  display: flex;
65
  gap: 16px;
66
  padding: 12px 0;
67
  font-size: 16px;
68
  color: #747474;
69
  border-bottom: 1px solid #f5f5f5;
70
}
71

72
/* 날짜 부분 */
73
.about-block__date {
74
  color: #555555;
75
  white-space: nowrap;  /* 날짜가 줄바꿈되지 않게 */
76
  min-width: 100px;
77
}
78

79
/* ── 인적사항 행 ──────────────────────────── */
80

81
.info-row {
82
  display: flex;
83
  gap: 16px;
84
  padding: 8px 0;
85
  font-size: 16px;
86
  border-bottom: 1px solid #f5f5f5;
87
}
88

89
.info-row__label {
90
  width: 70px;
91
  color: #3a3a3a;
92
}
93

94
.info-row__value {
95
  color: #727272;
96
}