![[CSS]: 폰트(font)](/images/htmlcss_logo.png){kind=logo}
Table of Contents
CSS Font 완벽 가이드
CSS에서 폰트(font)는 웹 페이지의 가독성을 높이고 스타일을 조정하는 중요한 요소이다. 이 글에서는 CSS에서 글꼴을 다루는 방법과 관련 속성들을 정리해보겠다.
1. CSS에서 글꼴을 지정하는 방법
✅ 기본 글꼴 지정 (font-family)
font-family 속성은 요소의 글꼴을 지정하는 데 사용된다.
p {
font-family: Arial, Helvetica, sans-serif;
}
- 기본적으로 여러 개의 글꼴을 지정할 수 있으며, 앞의 글꼴이 지원되지 않을 경우 다음 글꼴이 적용된다.
- 마지막에는 일반적인 글꼴 계열(
sans-serif,serif,monospace등)을 지정하는 것이 좋다.
✅ 웹 폰트 사용 (@font-face)
웹 폰트를 사용하면 특정 폰트를 사용자에게 다운로드하여 사용할 수 있다.
@font-face {
font-family: 'CustomFont';
src: url('CustomFont.woff2') format('woff2');
}
h1 {
font-family: 'CustomFont', sans-serif;
}
✅ Google Fonts 사용
Google Fonts에서 제공하는 무료 웹 폰트를 쉽게 적용할 수 있다.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}
2. 글꼴 관련 주요 CSS 속성
✅ font-size (글꼴 크기)
font-size 속성은 글꼴의 크기를 지정한다.
p {
font-size: 16px; /* 픽셀 단위 */
font-size: 1.2em; /* 부모 요소의 크기 기준 */
font-size: 120%; /* 기본 크기의 120% */
}
px: 고정 크기 지정em: 부모 요소의 글꼴 크기에 상대적인 값%: 기본 글꼴 크기를 기준으로 백분율 지정rem: 루트 요소(html)의 글꼴 크기를 기준으로 상대적인 값
✅ font-weight (글꼴 두께)
font-weight 속성은 글꼴의 굵기를 조정한다.
h1 {
font-weight: bold;
}
💡 normal, bold, lighter, bolder 또는 100~900 사이의 숫자로 설정할 수 있다.
p {
font-weight: 400; /* 일반 */
font-weight: 700; /* 굵게 */
}
✅ font-style (글꼴 스타일)
font-style 속성은 이탤릭(기울임꼴) 스타일을 적용한다.
p {
font-style: italic; /* 기울임꼴 */
font-style: oblique; /* 기울어진 스타일 */
}
✅ text-transform (대소문자 변환)
text-transform 속성은 텍스트의 대소문자 변환을 지정한다.
p.uppercase {
text-transform: uppercase; /* 대문자 변환 */
}
p.lowercase {
text-transform: lowercase; /* 소문자 변환 */
}
p.capitalize {
text-transform: capitalize; /* 첫 글자만 대문자 */
}
✅ letter-spacing (글자 간격)
글자 간의 간격을 조정하는 속성이다.
p {
letter-spacing: 2px;
}
✅ word-spacing (단어 간격)
단어 간의 간격을 조정하는 속성이다.
p {
word-spacing: 5px;
}
✅ line-height (줄 간격)
줄 간격을 조정하여 가독성을 향상시킬 수 있다.
p {
line-height: 1.5; /* 배수 지정 */
line-height: 20px; /* 픽셀 지정 */
}
3. font 단축 속성 (Shorthand Property)
font 속성을 사용하면 여러 글꼴 속성을 한 번에 지정할 수 있다.
p {
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}
위 예제는 다음과 같다:
font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 16px;line-height: 1.5;font-family: Arial, sans-serif;
💡 font 속성을 사용할 때 font-size와 font-family는 필수로 지정해야 한다.
결론
CSS의 폰트 속성을 활용하면 가독성을 높이고 웹사이트의 디자인을 더욱 세련되게 만들 수 있다. 적절한 글꼴 크기와 스타일을 조합하여 사용자 경험을 개선해보자! ✨