12강. 글꼴·색상·CSS 변수

이번 강의의 결과물은 일관된 글꼴, 행간, 색상, 간격 값을 이름으로 관리하는 포트폴리오 테마입니다.

?1. 이번 강의에서 해결할 문제

같은 파란색과 간격 값을 여러 규칙에 직접 반복하면 디자인을 바꿀 때 누락이 생깁니다. 읽기 편한 기본 글자 규칙을 정하고 반복되는 디자인 값을 CSS 사용자 정의 속성으로 관리합니다.

✓학습 목표

• 같은 파란색과 간격 값을 여러 규칙에 직접 반복하면 디자인을 바꿀 때 누락이 생깁니다. 읽기 편한 기본 글자 규칙을 정하고 반복되는 디자인 값을 CSS 사용자 정의 속성으로 관리합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• font-family: 사용할 글꼴 후보를 순서대로 지정합니다.
• font-size: 글자 크기입니다. rem은 루트 요소의 글자 크기를 기준으로 합니다.
• line-height: 줄 사이 높이입니다. 단위 없는 값은 현재 글자 크기에 비례합니다.
• color: 글자색, background-color: 배경색입니다.
• 사용자 정의 속성: --color-primary처럼 작성자가 이름 붙인 값입니다.
• var(--color-primary): 저장한 값을 다른 속성에서 사용합니다.

:root {
  --color-primary: #1d4ed8;
}

:root에 공통 값을 선언하면 문서 전체에서 사용할 수 있습니다. W3C 표준은 사용자 정의 속성이 반복 값을 의미 있는 이름으로 관리하고 한 곳의 변경을 여러 사용처에 전달할 수 있게 한다고 설명합니다. CSS Custom Properties 표준

</>3. 코드 예시

파일명: web-basics/portfolio/css/style.css

:root {
  --color-text: #1e293b;
  --color-muted: #475569;
  --color-surface: #ffffff;
  --color-background: #f8fafc;
  --color-primary: #1d4ed8;
  --color-border: #cbd5e1;
  --space-small: 0.5rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

p {
  color: var(--color-muted);
}

a {
  color: var(--color-primary);
}

.project-card {
  padding: var(--space-large);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. :root에 선언한 사용자 정의 속성이 하위 요소로 상속됩니다.
2. 각 규칙의 var()가 해당 이름의 계산된 값을 가져옵니다.
3. 시스템 글꼴 목록은 사용자의 운영체제에서 사용 가능한 UI 글꼴을 순서대로 선택합니다.
4. 본문 line-height: 1.6은 글자 크기에 비례하는 줄 높이를 만들어 긴 문장을 읽기 쉽게 합니다.
5. rem 기반 간격은 루트 글자 크기와 함께 비례해 변합니다.
6. 기본 색상을 한 곳에서 바꾸면 이를 사용하는 링크와 카드가 함께 갱신됩니다.

색 조합은 취향만이 아니라 가독성 문제입니다. 작은 일반 텍스트는 전경과 배경이 충분히 구분되어야 하며, 색만으로 상태를 전달하지 않아야 합니다. W3C WCAG 대비 안내

!5. 자주 하는 실수

• 모든 글자 크기와 간격을 고정 px로만 작성함
• 줄 높이를 글자 크기와 같게 만들어 줄이 붙음
• 서로 다른 규칙에 같은 색상 값을 반복해서 작성함
• 변수 이름을 --blue처럼 색 자체로만 지어 역할을 알기 어려움
• 낮은 대비의 회색 글자를 밝은 배경에 사용함
• 색상만으로 오류·성공·선택 상태를 구분함

✎6. 짧은 실습 과제

1. 자신의 CSS에서 반복되는 색상과 간격을 찾습니다.
2. 역할에 따라 --color-*, --space-* 변수로 옮깁니다.
3. 본문 글자 크기와 행간을 설정하고 긴 문단을 읽어 봅니다.
4. --color-primary 값 하나만 바꾸어 모든 사용처가 바뀌는지 확인합니다.
5. 개발자 도구에서 링크와 본문의 최종 색상을 확인합니다.
6. 브라우저 확대를 200%로 바꾸어 텍스트가 잘리거나 겹치지 않는지 확인합니다.

완료 기준은 주요 디자인 값을 CSS 한 곳에서 바꾸고, 해당 값을 사용하는 모든 요소에 일관되게 반영할 수 있는 것입니다.

?7. 이해 점검 질문 3개

1. 반복 색상을 사용자 정의 속성으로 관리하면 어떤 실수를 줄일 수 있나요?
2. 1rem은 무엇을 기준으로 계산되나요?
3. 색 조합을 선택할 때 예쁜지 여부 외에 무엇을 확인해야 하나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.