CSS Typography

CSS 타이포그래피(Typography)

폰트 설정: font-family, font-size, font-weight (Font Settings: font-family, font-size, font-weight)

역사적 배경 (Historical Background)

CSS는 1996년 첫 버전에서 기본적인 폰트 설정 기능을 도입하였습니다. 폰트 설정은 웹 페이지의 텍스트 표현을 세밀하게 조정하는 데 핵심적인 역할을 하며, CSS2에서는 font-family, font-size, font-weight와 같은 속성이 추가되었습니다. 이 속성들은 다양한 폰트 스타일을 적용하고 사용자에게 최적의 읽기 경험을 제공합니다.

개념 및 원리 (Concept and Principles)

  • font-family: 텍스트의 폰트를 설정합니다. 기본적으로 여러 폰트를 쉼표로 구분하여 나열할 수 있으며, 첫 번째 폰트가 사용 불가능할 경우 다음 폰트가 대체로 사용됩니다.
body {
  font-family: 'Arial', sans-serif;
}

이 코드는 Arial 폰트를 사용하고, Arial이 사용 불가능할 경우 sans-serif 계열의 폰트를 대체로 사용합니다.

  • font-size: 텍스트의 크기를 설정합니다. 픽셀(px), 포인트(pt), 엠(em), 백분율(%) 등 다양한 단위를 사용할 수 있습니다.
h1 {
  font-size: 2em;
}

이 코드는 <h1> 요소의 글꼴 크기를 부모 요소의 글꼴 크기의 2배로 설정합니다.

  • font-weight: 텍스트의 굵기를 설정합니다. 일반적으로 normal, bold, bolder, lighter와 숫자 값(100, 200, …, 900)으로 설정할 수 있습니다.
p {
  font-weight: bold;
}

이 코드는 <p> 요소의 텍스트를 굵게 표시합니다.

텍스트 정렬: text-align, text-indent (Text Alignment: text-align, text-indent)

역사적 배경 (Historical Background)

텍스트 정렬 관련 속성은 CSS1에서 도입되었으며, 텍스트를 화면이나 컨테이너 내에서 적절히 배치하는 데 사용됩니다. text-align은 텍스트의 수평 정렬을, text-indent는 첫 줄의 들여쓰기를 조정합니다.

개념 및 원리 (Concept and Principles)

  • text-align: 텍스트의 수평 정렬을 설정합니다. left, right, center, justify 등의 값을 사용할 수 있습니다.
h2 {
  text-align: center;
}

이 코드는 <h2> 요소의 텍스트를 수평으로 중앙 정렬합니다.

  • text-indent: 텍스트의 첫 줄을 들여쓰는 양을 설정합니다. 일반적으로 픽셀(px)이나 엠(em) 단위로 설정합니다.
p {
  text-indent: 30px;
}

이 코드는 <p> 요소의 첫 줄을 30픽셀만큼 들여쓰게 합니다.

텍스트 장식: text-decoration, text-transform (Text Decoration: text-decoration, text-transform)

역사적 배경 (Historical Background)

text-decorationtext-transform 속성은 CSS1에서 도입되었습니다. 이 속성들은 텍스트에 시각적 장식을 추가하거나, 텍스트의 변형을 제어하는 데 사용됩니다.

개념 및 원리 (Concept and Principles)

  • text-decoration: 텍스트에 장식을 추가합니다. none, underline, overline, line-through 등의 값을 사용할 수 있습니다.
a {
  text-decoration: underline;
}

이 코드는 링크(<a>) 텍스트에 밑줄을 추가합니다.

  • text-transform: 텍스트의 대소문자를 변환합니다. uppercase, lowercase, capitalize, none 등의 값을 사용할 수 있습니다.
h3 {
  text-transform: uppercase;
}

이 코드는 <h3> 요소의 텍스트를 모두 대문자로 변환합니다.

줄 간격과 글자 간격: line-height, letter-spacing (Line Height and Letter Spacing: line-height, letter-spacing)

역사적 배경 (Historical Background)

line-heightletter-spacing은 CSS1에서 도입되었으며, 텍스트의 가독성을 높이는 데 중요한 역할을 합니다. line-height는 줄 간격을, letter-spacing은 글자 간격을 조정합니다.

개념 및 원리 (Concept and Principles)

  • line-height: 텍스트 줄 간격을 설정합니다. 픽셀(px), 엠(em), 비율(숫자) 등 다양한 단위로 설정할 수 있습니다.
p {
  line-height: 1.5;
}

이 코드는 <p> 요소의 줄 간격을 1.5배로 설정합니다.

  • letter-spacing: 텍스트의 글자 간격을 설정합니다. 픽셀(px), 엠(em) 단위로 설정할 수 있습니다.
h1 {
  letter-spacing: 2px;
}

이 코드는 <h1> 요소의 글자 간격을 2픽셀로 설정합니다.

웹 폰트 사용: @font-face, Google Fonts (Using Web Fonts: @font-face, Google Fonts)

역사적 배경 (Historical Background)

웹 폰트는 CSS2에서 @font-face 규칙으로 도입되었으며, 웹 페이지에서 다양한 폰트를 사용할 수 있도록 해줍니다. Google Fonts는 2010년에 시작되어, 다양한 무료 웹 폰트를 제공하여 웹 디자인에 큰 영향을 미쳤습니다.

개념 및 원리 (Concept and Principles)

  • @font-face: 웹 폰트를 정의하여 사용합니다. 웹 폰트 파일을 서버에 호스팅하고, CSS를 통해 해당 폰트를 웹 페이지에 적용할 수 있습니다.
@font-face {
  font-family: 'MyWebFont';
  src: url('mywebfont.woff2') format('woff2'),
       url('mywebfont.woff') format('woff');
}

body {
  font-family: 'MyWebFont', sans-serif;
}

이 코드는 MyWebFont라는 웹 폰트를 정의하고, body 요소에 적용합니다.

  • Google Fonts: Google에서 제공하는 무료 웹 폰트를 사용하여 웹 페이지에 적용합니다. Google Fonts 웹사이트에서 원하는 폰트를 선택하고, 제공된 링크를 HTML <head>에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Google Fonts Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <h1>구글 폰트 예제</h1>
  <p>이 텍스트는 Roboto 폰트로 표시됩니다.</p>
</body>
</html>

이 코드는 Google Fonts에서 Roboto 폰트를 로드하고, body 요소에 적용합니다.

종합 예제 (Comprehensive Example)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 타이포그래피 예제</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      line-height: 1.6;
    }

    h1 {
      font-size: 2em;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    p {
      font-size: 1em;
      font-weight: normal;
      text-indent: 20px;
      text-decoration: none;
      margin: 20px 0;
    }

    .highlight {
      background-color: yellow;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>CSS 타이포그래피 예제</h1>
  <p>이 문장은 기본적인 타이포그래피 스타일을 포함하고 있습니다. <span class="highlight">강조된 부분</span>도 포함되어 있습니다.</p>
</body>
</html>

이 예제는 다양한 타이포그래피 속성을 활용하여 웹 페이지의 텍스트 스타일을 설정하는 방법을 보여줍니다. 각 속성은 텍스트의 가독성을 높이고, 디자인의 일관성을 유지하는 데 도움을 줍니다.

Leave a Reply

Your email address will not be published. Required fields are marked *