타이포그래피 테마 설정

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 15번째.

타이포그래피는 테마 설정과 디자인의 중요한 부분입니다. 모든 곳에 글꼴 스타일을 작성하는 대신, 이를 CSS 변수로 정의하고 사이트 전체에서 재사용할 수 있습니다. 이렇게 하면 스타일의 일관성을 유지할 수 있으며 나중에 변경하기가 더 쉬워집니다.

다음에 대한 변수를 정의할 수 있습니다:

글꼴 패밀리 (예: --font-family-base, --font-family-heading)

글꼴 크기 (예: --font-size-base, --font-size-h1)
줄 높이
자간

먼저, :root 요소에 타이포그래피 변수를 정의해 보겠습니다:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

이제 이 변수들을 텍스트 요소에 적용하세요:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

이 설정은 한 곳에서 변수 값을 변경하여 쉽게 수정할 수 있는 통합된 타이포그래피 시스템을 만듭니다.

챌린지

쉬움

제목과 본문 텍스트를 위한 별도의 변수를 사용하여 블로그 웹사이트의 타이포그래피 테마를 만드세요. 작업 내용:

다음에 대한 CSS 변수를 정의합니다:
- 제목의 글꼴 크기 (--h1-size 및 --h2-size)
- 본문 텍스트 색상 (--text-color) — 가독성을 위해 순수한 검정색이 아닌 다른 색상을 선택하세요
- 제목 텍스트 색상 ( --heading-color ) — 본문 텍스트와 구별되는 색상을 선택하세요
이 변수들을 적용하여 다음을 스타일링합니다:
- 본문 텍스트
- h1 및 h2 제목

CSS는 제목과 본문 텍스트 사이에 명확한 시각적 계층 구조를 만들어야 합니다.

치트 시트

글꼴 스타일을 한 번 정의하고 사이트 전체에서 재사용함으로써 일관된 타이포그래피 시스템을 구축하기 위해 CSS 변수를 사용하세요.

:root 요소에 타이포그래피 변수를 정의합니다:

:root {
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;
  --heading-color: #333;
  --text-color: #555;
}

var()를 사용하여 텍스트 요소에 변수를 적용합니다:

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

일반적인 타이포그래피 변수는 다음과 같습니다:

글꼴 패밀리(Font family) (기본 및 제목 글꼴)
글꼴 크기(Font sizes) (기본 크기 및 제목 크기)
줄 간격(Line height)
자간(Letter spacing)
색상(Colors) (텍스트 및 제목 색상)

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Typography Theming</title>
  <style>
    :root {
      /* Typography variables */
      --primary-font: "Georgia", serif;       /* for paragraphs */
      --secondary-font: "Arial", sans-serif; /* for headings */

    }

    body {
      font-family: var(--primary-font);
      color: #000000;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
      background-color: #f9f9f9;
    }

    h1, h2 {
      font-family: var(--secondary-font);
      color: #000000;
      margin-bottom: 0.5em;
    }

    h1 {
      font-size: 16px;
    }

    h2 {
      font-size: 16px;
    }

    p {
      margin-bottom: 1.2em;
    }

    .blog-post {
      max-width: 700px;
      margin: 0 auto;
      background: #fff;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="blog-post">
    <h1>The Beauty of Typography in Web Design</h1>
    <p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>

    <h2>Why Typography Matters</h2>
    <p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>

    <h2>Mobile-First Typography</h2>
    <p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
  </div>
</body>
</html>