4. CSS 글꼴 관련 스타일

CSS에서 텍스트의 스타일을 조정하는 것은 웹 디자인의 중요한 부분입니다.
이 글에서는 CSS를 이용해 글꼴을 설정하고, 글꼴의 크기와 굵기를 조절하는 방법에 대해 알아보겠습니다.

글꼴 설정: 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;
}

• #ff1은 궁서체 글꼴을 사용하며, 글씨 크기는 24px입니다.

• #ff2은 고딕체 글꼴을 사용합니다.

• #ff3은 Courier New 글꼴을 사용하며, 이는 고정폭 글꼴입니다.

• #ff4는 구글 웹폰트를 이용한 Noto Sans KR 글꼴을 사용합니다. 또한 글꼴의 크기, 굵기, 스타일이 지정되어 있습니다.

실습 예제

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

• 각 <p> 태그에 다른 글꼴이 적용됩니다. 웹폰트를 사용하고자 할 경우, 구글 웹 폰트 사이트에서 필요한 폰트를 검색해 사용할 수 있습니다.

글꼴 크기: font-size

font-size 속성은 글꼴의 크기를 조절합니다. 글꼴의 크기를 px(픽셀) 단위로 지정할 수 있으며, 반응형 웹 디자인에서는 em이나 rem 단위도 자주 사용됩니다.

예제 코드와 설명

#ff1 {
    font-size: 24px;
}

• #ff1은 글꼴 크기가 24px로 지정되어 있습니다. 이 속성을 사용해 텍스트의 크기를 변경할 수 있습니다.

실습 예제

<h3>font-size : 글꼴의 크기를 변경할 때 사용</h3>
<pre>선택자{font-size : 크기(px, em, rm)}</pre>

• font-size 속성으로 다양한 크기의 텍스트를 설정할 수 있습니다.

글꼴 굵기: font-weight

font-weight 속성은 글꼴의 굵기를 설정합니다. 굵기는 normal, bold, light 등의 키워드 또는 숫자 값(100~900)을 사용하여 설정할 수 있습니다.

예제 코드와 설명

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

• #fw1은 글꼴이 굵게(bold) 설정되어 있습니다.

• #fw2는 글꼴이 가장 굵은(900) 설정입니다.

• #fw3은 글꼴이 가장 얇게(100) 설정되어 있습니다.

실습 예제

<h1>font-weight : 글꼴의 굵기를 표현할 때 사용</h1>
<pre>선택자{font-weight : normal | bold | light}</pre>

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

• 이 예제에서 <li> 태그에 적용된 font-weight 속성을 통해 글씨의 굵기가 어떻게 변하는지 확인할 수 있습니다.