2.1 font-family 속성
폰트는 웹 디자인에서 중요한 역할을 해서, 텍스트의 가독성과 시각적 매력에 영향을 줘.
폰트 패밀리는 웹페이지에서 사용할 수 있는 폰트의 스타일과 특성을 정의해.
CSS에서는 폰트를 일반적으로 세 가지 주요 패밀리로 나누어: serif, sans-serif, monospace. 각각을 자세히 살펴보자.
font-family 속성
font-family 속성은 폰트 패밀리를 지정하는 데 사용돼. 여러 폰트를 지정할 수 있고, 이것들은 쉼표로 구분해서
브라우저가 첫 번째 폰트를 사용할 수 없을 때 다음 폰트를 사용할 수 있게 돼.
여러 폰트 사용 예제
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
사용 예제:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>이 텍스트는 Helvetica Neue, Helvetica 또는 Arial 폰트를 사용해 표시돼.</p>
</body>
2.2 serif 폰트 패밀리
세리프 폰트 (serif)는 글자와 기호의 끝에 작은 선이나 획이 추가된 게 특징이야.
이런 폰트는 텍스트에 좀 더 전통적이고 공식적인 느낌을 줘.
serif 폰트 예제:
- Times New Roman
- Georgia
- Garamond
- Baskerville
사용 예제:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 sans-serif 폰트 패밀리
산세리프 폰트 (sans-serif)는 글자와 기호의 끝에 작은 선이 없어. 이런 폰트는
좀 더 현대적이고 미니멀한 느낌을 줘, 그리고 특히 스크린에서 읽기 쉬워서 웹 디자인에 자주 사용돼.
sans-serif 폰트 예제:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 monospace 폰트 패밀리
모노스페이스 폰트 (monospace)는 모든 기호의 폭이 동일해. 이런 폰트는
코드나 기술 문서, 테이블처럼 수직으로 정렬이 중요한 곳에서 자주 사용돼.
monospace 폰트 예제:
- Courier New
- Consolas
- Monaco
- Lucida Console
사용 예제:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
웹페이지에서의 인식과 다양한 스타일을 개선하기 위해 종종 다른 폰트 패밀리를 조합해 사용해. 예를 들어, 헤딩은 serif 폰트로,
본문 텍스트는 sans-serif 폰트로 설정할 수 있어. 코드 같은 경우에는 항상 monospace로 설정하지.
GO TO FULL VERSION