1. styles.css 열기

web-practice/portfolio/css/styles.css를 엽니다. 리셋(03편)과 @import 또는 <link>로 연결된 tokens.css(04편) 아래에 이어서 작성합니다.

2. 기본 타이포그래피 규칙 작성

/* web-practice/portfolio/css/styles.css */
/* ...03편 리셋 유지... */
 
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
}
 
h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
 
h1 {
  font-size: var(--text-3xl);
}
 
h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}
 
h3 {
  font-size: var(--text-lg);
}
 
p {
  margin-bottom: var(--space-4);
}
 
.logo {
  font-size: var(--text-lg);
  font-weight: 700;
}

3. 히어로 제목만 더 크게 조정

시안은 히어로 제목(.hero h1)만 본문 제목보다 크게 잡습니다. 모바일에서는 한 단계 낮춥니다.

.hero h1 {
  font-size: var(--text-3xl);
}
 
.hero p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
 
@media (max-width: 767px) {
  .hero h1 {
    font-size: var(--text-2xl);
  }
}

4. 다른 페이지 요소에도 스케일 연결

프로젝트 카드 제목과 폼 도움말 문구도 시안의 스케일을 따라야 합니다.

.project-card h2 {
  font-size: var(--text-lg);
}
 
.contact-form label {
  font-weight: 700;
}
 
.contact-form .help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

카드 제목은 <h2>입니다(카드마다 제목 하나뿐이므로 h3가 아니라 h2를 씁니다). .project-card h2는 앞서 정의한 전역 h2(--text-2xl)보다 작은 값으로 카드 안에서만 덮어씁니다. 도움말 문구는 modern_html이 <p id="email-help" class="help"> 형태로 이미 넣어 둔 요소이므로 .contact-form .help로 고릅니다.

5. 실행

파일을 저장하고 index.html을 브라우저로 엽니다(VS Code Live Server 또는 파일 더블클릭).

6. 확인

• 로고 “Zeno Kim”이 --text-lg 크기에 굵게 보입니다.
• 히어로 제목 웹을 만드는 개발자, Zeno Kim입니다.가 페이지에서 가장 큰 글자로 보입니다.
• projects.html·contact.html의 페이지 제목(<h1>프로젝트</h1>, <h1>연락</h1>)이 전역 h1 크기(--text-3xl)로 크게 보입니다.
• 브라우저 폭을 767px 이하로 줄이면 히어로 제목이 한 단계 작아집니다.
• 개발자 도구 Elements 패널에서 body를 선택해 Computed 탭에 font-family가 var(--font-sans) 값(Pretendard 등)으로 계산됐는지 확인합니다.
• projects.html의 카드 제목이 --text-lg 크기로 보이고, contact.html의 폼 도움말 문구(답장을 받을 주소를 적어 주세요. 등)가 본문보다 한 단계 작게 보입니다.