색상과 글꼴로 읽기 쉽게 만들기

지난 강의에서는 자기소개 HTML에 외부 CSS 파일을 연결하고 선택자로 요소를 선택했습니다. 이번에는 연결된 CSS 파일에서 색상과 글꼴을 조절해 제목과 본문을 쉽게 구분해 보겠습니다.

배경색과 글자색 지정하기

CSS 파일을 열어 body에 다음 속성을 추가하세요. 이미 body 규칙이 있다면 새 규칙을 만들기보다 그 안에 속성을 추가해도 됩니다.

body {
  background-color: #f5f7fa;
  color: #1f2937;
}

background-color는 배경색을, color는 글자색을 지정합니다. #으로 시작하는 값은 색상을 나타내는 16진수 표기입니다. 여기서는 밝은 배경에 어두운 글자를 사용했습니다. body에 지정한 글자색은 보통 자식 요소에도 상속되므로 페이지 전체의 기본 글자색으로 사용할 수 있습니다.

파일을 저장하고 브라우저에서 페이지를 새로고침해 보세요. 배경과 글자가 구분되는지 확인합니다. 변화가 없다면 HTML의 <link>가 CSS 파일을 가리키는지, 파일을 저장했는지 먼저 살펴보세요.

글꼴과 본문 조절하기

body 규칙에 다음 속성도 추가하세요.

body {
  background-color: #f5f7fa;
  color: #1f2937;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

• font-family는 사용할 글꼴 계열을 지정합니다. 브라우저는 앞에 적힌 글꼴부터 사용할 수 있는지 확인하고, 사용할 수 없으면 뒤의 sans-serif 계열을 사용합니다. 한글은 사용 환경에 따라 다른 글꼴로 표시될 수 있습니다.
• font-size: 16px는 본문의 기본 글자 크기를 지정합니다.
• line-height: 1.6은 줄 높이를 글자 크기의 1.6배로 지정합니다. 여러 줄로 이어지는 소개 글에서 줄 사이를 구분하기 쉽게 해 줍니다.

저장 후 소개 문단을 읽어 보세요. 줄이 답답하거나 지나치게 벌어져 보이면 line-height 값을 조금씩 바꾸어 비교해 보세요.

제목에 위계 만들기

제목이 본문보다 크고 굵으면 독자가 페이지의 구조를 쉽게 파악할 수 있습니다. 자기소개 페이지에 사용하는 제목 요소에 맞춰 다음 규칙을 추가하세요.

h1 {
  color: #173b6c;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: #173b6c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

font-weight는 글자 굵기를 지정합니다. 700은 일반적으로 굵은 글씨를 뜻하지만 실제 모양은 글꼴에 따라 다를 수 있습니다. rem은 최상위 요소인 html의 글자 크기를 기준으로 합니다. 예를 들어 그 크기가 16px이면 2rem은 32px입니다. 제목의 줄 높이를 본문보다 작게 지정해 제목이 여러 줄일 때 지나치게 벌어지지 않도록 했습니다.

앞 강의에서 제목에 클래스 선택자를 사용했다면 해당 규칙에 속성을 추가해도 됩니다. 같은 요소에 적용되는 기존 규칙이 있다면 어느 규칙이 최종 적용되는지 함께 확인하세요.

대비 확인하기

색상이 마음에 드는 것과 글자가 잘 읽히는 것은 다를 수 있습니다. 본문과 제목을 실제 배경 위에서 살펴보고, 흐릿하게 보이면 글자색을 더 어둡게 하거나 배경을 더 밝게 조정해 보세요. 링크처럼 별도 색상이 적용된 글자도 확인합니다.

눈으로 살펴본 뒤 브라우저 개발자 도구의 색상 대비 검사 기능이나 접근성 대비 검사 도구로 확인할 수 있습니다. 일반 텍스트는 배경과의 명도 대비가 최소 4.5:1인지 확인하는 것이 좋습니다. 굵거나 큰 텍스트에는 다른 기준이 적용될 수 있습니다.

직접 연습하기

1. 소개 문단과 관심사 목록을 읽어 보고 줄 높이가 적당한지 확인하세요.
2. h1과 h2의 크기를 각각 조금씩 바꾸어 어느 쪽이 페이지 제목이고 어느 쪽이 구역 제목인지 쉽게 구분되는지 살펴보세요.
3. 제목 색상을 다른 어두운 색으로 바꾸고 배경과의 대비를 확인하세요. 읽기 어려우면 다시 조정합니다.
4. CSS 파일을 저장하고 새로고침한 뒤, 제목과 본문의 크기·굵기·줄 간격이 의도대로 적용됐는지 확인하세요.

이제 색상과 글꼴로 내용의 위계를 만들었습니다. 다음 강의에서는 각 영역의 안팎 여백과 테두리를 조절해 페이지의 간격을 정리합니다.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 02 폴더를 열면 이 단계의 파일을 확인할 수 있습니다.

완성 화면 열기 · CSS 파일 보기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>지민의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <h1>안녕하세요, 지민입니다</h1>
      <p>작은 웹페이지를 만들며 배우는 기록입니다.</p>
    </header>
    <section class="intro">
      <h2>저를 소개합니다</h2>
      <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
      <p>오늘의 목표는 CSS로 읽기 좋은 자기소개 페이지를 완성하는 것입니다.</p>
    </section>
    <section class="interests">
      <h2>관심사</h2>
      <ul>
        <li>웹 만들기</li>
        <li>산책과 사진</li>
        <li>배운 내용을 짧게 기록하기</li>
      </ul>
    </section>
    <footer id="contact">
      <a href="mailto:hello@example.com">연락하기</a>
      <p>예제용 주소입니다. 내 페이지에서는 실제 연락 방법으로 바꾸세요.</p>
    </footer>
  </main>
</body>
</html>

body {
  background-color: #f5f7fa;
  color: #1f2937;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  color: #173b6c;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: #173b6c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.intro {
  background-color: lightyellow;
}

실행으로 본 결과

배경과 글자색을 바꾸고 제목·본문의 크기와 줄 간격을 구분했습니다.