4. CSS 글꼴 관련 스타

CSS에서 글꼴과 관련된 스타일을 설정하는 방법은 웹 페이지의 디자인과 가독성에 큰 영향을 미칩니다.
이번 글에서는 글꼴을 설정하고, 크기와 굵기를 조절하는 방법을 살펴보겠습니다.

1. 글꼴 설정: font-family

font-family 속성은 텍스트의 글꼴을 지정하는 데 사용됩니다. 여러 글꼴을 쉼표로 구분하여 지정할 수 있으며, 지정한 글꼴이 없을 경우를 대비해 대체 글꼴을 나열하는 것이 좋습니다.

예제 코드와 설명

#ff1 {
    font-family: 궁서체;
    font-size: 24px;
}

#ff2 {
    font-family: 고딕체;
}

#ff3 {
    font-family: 'Courier New', Courier, monospace;
}

#ff4 {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

• font-family: 궁서체;: 텍스트를 '궁서체'로 표시합니다.
• font-family: 'Courier New', Courier, monospace;: 여러 글꼴을 지정하여, 첫 번째 글꼴이 없는 경우 다음 글꼴로 대체합니다.
• font-family: "Noto Sans KR", sans-serif;: 웹폰트인 "Noto Sans KR"을 사용하며, 이 글꼴이 없을 경우 기본 sans-serif 글꼴로 표시합니다.

실습 예제

<p id="ff1">글꼴 테스트</p>
<p id="ff2">글꼴 테스트</p>
<p id="ff3">글꼴 테스트</p>
<p id="ff4">글꼴테스트 Font Style Test</p>

• 각 텍스트는 설정된 글꼴에 따라 표시됩니다.

웹폰트 사용

웹폰트를 사용하면 다양한 글꼴을 쉽게 적용할 수 있습니다. 예를 들어, Google Fonts를 이용해 원하는 글꼴을 사용할 수 있습니다.

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

• 이 코드는 "Noto Sans KR" 웹폰트를 불러오는 코드입니다. 웹 페이지에 포함하여 사용할 수 있습니다.

2. 글꼴 크기 설정: font-size

font-size 속성은 글꼴의 크기를 설정하는 데 사용됩니다. 크기는 px, em, rem 등 다양한 단위로 지정할 수 있습니다.

예제 코드와 설명

#ff1 {
    font-size: 24px;
}

• font-size: 24px;: 글꼴 크기를 24픽셀로 설정합니다.

3. 글꼴 굵기 설정: font-weight

font-weight 속성은 글꼴의 굵기를 조절하는 데 사용됩니다. 기본적으로 normal, bold, lighter, bolder 등이 있으며, 숫자 값(100~900)을 사용하여 세밀하게 조정할 수도 있습니다.

예제 코드와 설명

#fw1 { font-weight: bold; }
#fw2 { font-weight: 900; }
#fw3 { font-weight: 100; }

• font-weight: bold;: 텍스트를 굵게 표시합니다.
• font-weight: 900;: 텍스트를 매우 굵게 표시합니다.
• font-weight: 100;: 텍스트를 매우 얇게 표시합니다.

실습 예제

<ul>
    <li>원래굵기</li>
    <li id="fw1">굵은 글꼴로 변경</li>
    <li id="fw2">원래 굵기보다 더 굵게</li>
    <li id="fw3">원래 굵기보다 더 얇게</li>
</ul>

• 각 항목은 설정된 font-weight 속성에 따라 굵기가 다르게 표시됩니다.