타이포그래피는 웹 디자인에서 중요한 역할을 하며, 폰트 설정과 텍스트 스타일링은 웹사이트의 가독성과 디자인 품질에 큰 영향을 미칩니다. 이 글에서는 CSS를 사용한 폰트 설정 및 텍스트 스타일링 방법과 웹 폰트를 활용하는 방법을 살펴보겠습니다.
1. 폰트 설정: font-family, font-size, font-weight
font-family: 텍스트에 사용할 폰트 종류를 지정하는 속성입니다. 다양한 폰트 패밀리를 쉼표로 구분하여 여러 대체 폰트를 제공하는 것이 일반적입니다. 예를 들어, 기본적으로 사용할 폰트가 없을 경우 시스템에서 다른 대체 폰트가 적용되도록 설정합니다.
body {
font-family: 'Arial', 'Helvetica', sans-serif; /* Arial을 우선 적용, 없으면 Helvetica, 그 다음 sans-serif 기본 폰트 */
}font-size: 텍스트의 크기를 설정하는 속성입니다. px, em, % 등의 단위로 크기를 지정할 수 있습니다.
p {
font-size: 16px; /* 텍스트 크기를 16px로 설정 */
}font-weight: 텍스트의 두께를 설정하는 속성입니다. 기본적으로 normal과 bold를 사용할 수 있으며, 숫자 값으로 세밀하게 두께를 설정할 수 있습니다(100부터 900까지).
h1 {
font-weight: bold; /* 두꺼운 텍스트 */
}
h2 {
font-weight: 600; /* 숫자로 두께를 세밀하게 지정 */
}2. 텍스트 스타일링: line-height, letter-spacing, text-align
line-height: 각 줄 사이의 간격(행간)을 설정하는 속성입니다. 텍스트의 가독성을 높이는 데 중요한 역할을 하며, 텍스트 크기와의 비율로 설정할 수 있습니다.
p {
line-height: 1.5; /* 행간을 폰트 크기의 1.5배로 설정 */
}letter-spacing: 텍스트의 글자 간격을 조정하는 속성입니다. 글자 간격을 늘리거나 줄여 텍스트가 더 넓게 또는 좁게 보이도록 할 수 있습니다.
h1 {
letter-spacing: 2px; /* 각 글자 사이의 간격을 2px로 설정 */
}text-align: 텍스트의 정렬을 설정하는 속성입니다. left, right, center, justify 등의 값으로 텍스트가 배치될 위치를 결정할 수 있습니다.
div {
text-align: center; /* 텍스트를 가운데 정렬 */
}3. 웹 폰트 사용하기: @font-face와 구글 폰트 적용법
웹 폰트를 사용하면 사용자의 컴퓨터에 설치된 폰트에 의존하지 않고도 특정 폰트를 웹사이트에서 사용할 수 있습니다. 두 가지 방법으로 웹 폰트를 사용할 수 있습니다: @font-face 규칙을 사용하거나, 구글 폰트와 같은 무료 웹 폰트를 적용하는 방법입니다.
@font-face: 서버에 있는 웹 폰트 파일을 불러와 사용할 수 있습니다. 폰트 파일의 URL을 지정하여 웹 페이지에 로드할 수 있습니다.
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
}
body {
font-family: 'MyCustomFont', sans-serif; /* 웹 폰트와 기본 폰트를 함께 사용 */
}구글 폰트 적용법: 구글 폰트는 무료로 제공되는 웹 폰트 라이브러리입니다. 폰트를 가져오기 위해 HTML 파일의 <head> 태그에 link를 추가한 후, CSS에서 폰트 패밀리를 지정할 수 있습니다.
HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">CSS:
body {
font-family: 'Roboto', sans-serif; /* 구글 폰트 적용 */
}이와 같이 폰트 설정과 텍스트 스타일링을 통해 웹사이트의 디자인 품질을 높일 수 있습니다. 또한 웹 폰트를 사용하여 더 다양한 디자인을 적용할 수 있습니다.
참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 14. 반응형 웹 디자인 - 뷰포트 설정 (0) | 2024.09.20 |
|---|---|
| [CSS] 13. 반응형 웹 디자인 - 미디어 쿼리 (0) | 2024.09.20 |
| [CSS] 12. 변형과 애니메이션(웹사이트에 동적 요소 추가하기) (0) | 2024.09.20 |
| [CSS] 11. 색상과 배경(색상 모델과 배경 속성) (0) | 2024.09.18 |
| [CSS] 9. 그리드(Grid) (0) | 2024.09.18 |
| [CSS] 8. Flexbox (0) | 2024.09.18 |
| [CSS] 7. float와 clear (0) | 2024.09.17 |
| [CSS] 6. 박스 모델 (Margin, Padding, Border, Content) (2) | 2024.09.16 |