[CSS] 글꼴, 폰트, 텍스트 스타일(Font)

728x90

CSS로 웹 페이지의 글자를 아름답게 만들기 🖋️

안녕하세요, 웹 디자인 애호가 여러분! ✨ 오늘은 웹 페이지의 글자 디자인을 완성시키는 CSS의 글꼴, 폰트, 텍스트 스타일에 대해 알아보는 시간을 가집니다. 글자의 스타일은 웹 페이지의 전반적인 느낌과 가독성을 결정짓는 중요한 요소입니다. 함께 디테일한 디자인의 세계로 빠져봅시다!

1. CSS에서 글꼴(Font Family) 지정하기

웹 페이지의 글꼴을 지정하려면 font-family 속성을 사용합니다. 여러 글꼴을 나열하여, 브라우저가 사용 가능한 글꼴을 순서대로 선택하게 할 수도 있습니다.

p {
    font-family: "Times New Roman", Times, serif;
}

2. 웹 폰트 사용하기

웹 폰트는 인터넷을 통해 다운로드되는 글꼴입니다. Google Fonts나 Adobe Fonts 같은 서비스를 통해 다양한 웹 폰트를 사용할 수 있습니다.

<!-- Google Fonts에서 가져온 링크 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

3. 텍스트의 크기와 스타일

font-size: 글자의 크기를 지정합니다. 픽셀(px), em, rem, % 등 다양한 단위를 사용할 수 있습니다.

p {
    font-size: 16px;
}

font-weight: 글자의 두께를 설정합니다. 값으로는 normal, bold, bolder, lighter 및 숫자 100~900까지 지정 가능합니다.

strong {
    font-weight: bold;
}

font-style: 글자의 스타일(일반, 이탤릭, 기울임)을 지정합니다.

em {
    font-style: italic;
}

text-transform: 텍스트를 대문자, 소문자, 첫 글자만 대문자 등으로 변환합니다.

h2 {
    text-transform: uppercase;
}

4. 텍스트 정렬과 줄 간격

text-align: 텍스트의 정렬 방식을 지정합니다. (left, right, center, justify 등)

p {
    text-align: center;
}

line-height: 텍스트의 줄 간격을 설정합니다.

p {
    line-height: 1.5;
}

마치며

글자의 디자인은 웹 페이지의 전체적인 무드와 메시지 전달에 중요한 역할을 합니다. CSS를 활용하여 텍스트 스타일을 섬세하게 조정함으로써, 방문자들에게 좋은 첫인상을 줄 수 있습니다. 다음 포스트에서는 더 다양한 디자인 요소를 함께 탐험하겠습니다. 지금까지 함께 해주셔서 감사합니다! 📜🖌️🎨