본문으로 건너뛰기

5. 텍스트 스타일링

웹 페이지의 텍스트는 정보 전달의 핵심 요소입니다. CSS를 사용하여 텍스트의 외관을 제어하고, 가독성과 미적인 요소를 향상시킬 수 있습니다. 이 섹션에서는 폰트 설정과 타이포그래피, 텍스트 정렬 및 장식 효과를 다룹니다.

5.1 폰트 설정과 타이포그래피​

5.1.1 폰트 관련 속성​

  • font-family: 텍스트에 적용할 폰트를 지정합니다. 여러 폰트를 쉼표로 구분하여 설정할 수 있으며, 시스템에 해당 폰트가 없을 경우 대체 폰트를 사용합니다.

  • font-size: 텍스트의 크기를 지정합니다. px, em, rem, % 등 다양한 단위를 사용할 수 있습니다.

  • font-weight: 텍스트의 굵기를 설정합니다. 숫자 값(100~900) 또는 normal, bold와 같은 키워드를 사용할 수 있습니다.

  • font-style: 텍스트의 스타일을 기울임(italic)으로 지정할 수 있습니다.

  • font-variant: 텍스트의 소문자를 작은 대문자처럼 보이게 하는 등 특정 변형을 적용할 수 있습니다.

  • line-height: 줄 간격을 설정합니다. 가독성을 위해 폰트 크기에 비례하여 설정하는 것이 좋습니다.

    p {
      font-family: "Helvetica", "Arial", sans-serif;
      font-size: 2rem;
      font-weight: bold;
      font-style: italic;
      font-variant: small-caps;
      line-height: 1.5;
    }

5.1.2 웹 폰트 사용​

웹 폰트를 사용하면 다양한 폰트를 웹 페이지에서 활용할 수 있습니다. Google Fonts 같은 서비스에서 무료로 웹 폰트를 제공하며, 이를 CSS에 적용할 수 있습니다.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
  font-family: "Roboto", sans-serif;
}

5.2 텍스트 정렬 및 장식 효과​

  • text-align: 텍스트를 좌측, 중앙, 우측 또는 양쪽 정렬로 배치할 수 있습니다.

  • text-transform: 텍스트를 모두 대문자로 또는 소문자로 변환하거나, 단어의 첫 글자만 대문자로 변경할 수 있습니다.

  • letter-spacing: 글자 간의 간격을 설정하여 가독성을 조절할 수 있습니다.

  • word-spacing: 단어 간의 간격을 조절할 수 있습니다.

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

p.uppercase {
  text-transform: uppercase;
}

p.capitalize {
  text-transform: capitalize;
}

h1 {
  letter-spacing: 0.05em;
}

p {
  word-spacing: 0.1em;
}

이 섹션에서는 텍스트의 스타일링과 관련된 다양한 CSS 속성을 다루었습니다. 이러한 속성들을 활용하면 텍스트의 가독성을 높이고 웹 페이지의 전반적인 사용자 경험을 향상시킬 수 있습니다.

5.3 왜? 폰트 사이즈에는 rem을 쓸까?​

rem 단위는 루트 요소(root element, 보통 <html>)의 폰트 크기를 기준으로 상대적인 크기를 지정합니다.

    1. 유연성: 번만 html 요소의 기본 폰트 크기를 정의해두면, 나머지 요소들은 이 값을 기준으로 크기가 결정되므로, 전체 웹 페이지의 폰트 크기를 쉽게 조정할 수 있습니다.
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1rem; /* 16px */
}
    1. 일관성: rem을 사용하면 폰트 크기나 다른 크기 속성들 간에 일관성을 유지할 수 있습니다. 만약 px 단위를 사용하면 부모 요소나 다른 곳에서 발생하는 상대적인 변화에 영향을 받지 않기 때문에, 특정 상황에서는 일관성이 떨어질 수 있습니다.
    1. 접근성: rem 단위를 사용하면 사용자가 브라우저 설정에서 기본 폰트 크기를 변경할 때 이를 반영할 수 있습니다. 예를 들어, 사용자가 접근성 향상을 위해 브라우저 기본 폰트 크기를 20px로 설정했다면, rem 단위를 사용한 폰트 크기도 이에 따라 비율대로 조정됩니다.
html {
  font-size: 100%; /* 사용자의 기본 폰트 크기에 따라 달라짐 */
}

이는 고정적인 px 값보다 접근성이 뛰어나며, 다양한 사용자 환경에서 가독성을 개선하는 데 도움이 됩니다.

요약하자면, rem 단위를 사용하면 유연성 있는 레이아웃을 구현하고, 일관성 있는 스타일을 유지하며, 접근성 측면에서도 우수한 결과를 얻을 수 있습니다.