본문으로 건너뛰기
실습하기

폰트(font)

웹 페이지의 폰트(Font, 글꼴)은 페이지의 가독성, 스타일, 브랜드 정체성에 큰 영향을 미칩니다.

CSS를 사용하면 웹 페이지의 폰트를 다양하게 설정할 수 있습니다.


font-family​

font-family는 웹 페이지의 텍스트에 사용될 폰트을 지정하는 CSS 속성입니다.


사용 방법​

font-family 사용법
element {
  font-family: 폰트1, 폰트2, ...;
}
font-family 사용 예시
body {
  font-family: 'Times New Roman', Times, serif;
}

  • 우선순위: 웹 브라우저는 font-family 속성에 나열된 순서대로 폰트를 사용합니다. 만약 첫 번째 폰트가 사용자의 시스템에 설치되어 있지 않다면 브라우저는 두 번째 폰트를 찾아보고, 그다음에는 세 번째 폰트를 찾습니다. 이런 식으로 사용 가능한 첫 번째 폰트를 사용합니다.

  • 기본 폰트: 특정 폰트가 사용자의 시스템에 없을 경우를 대비해서, font-family 마지막에는 항상 기본 폰트(예: serif, sans-serif, monospace 등)을 추가하는 것이 좋습니다. 기본 폰트는 브라우저와 폰트 설치 여부에 관계없이 사용 가능합니다.

  • 위 예시에서 웹 브라우저는 먼저 "Times New Roman" 폰트 사용을 시도합니다. 만약 이 폰트가 시스템에 없다면, "Times" 폰트 사용을 시도하고, 이것도 없으면 serif라는 기본 폰트를 사용합니다.


주요 기본 폰트​

웹 브라우저는 몇 가지 글꼴 카테고리에 대한 기본 폰트를 제공합니다.

주요 웹 브라우저 기본 폰트 카테고리 3가지는 다음과 같습니다.

  1. Serif:

    serif
    • 특징: 'serif'라는 용어는 글자의 끝에 작은 획 또는 발이 붙어 있는 글꼴 스타일을 뜻합니다.
    • 예시: Times New Roman, Georgia
    • 사용 예: 본문 텍스트, 특히 긴 문서나 기사에 주로 사용됩니다.

  1. sans-serif:

    sans-serif
    • 특징: 'sans'는 프랑스어로 '없음'을 의미하며, 'sans-serif' 글꼴은 글자의 끝에 작은 획 또는 발이 없는 글꼴 스타일을 뜻합니다. 이러한 글꼴은 모던하고 깔끔한 느낌을 주며, 웹 및 디지털 디자인에서 널리 사용됩니다.
    • 예시: Arial, Helvetica, Verdana
    • 사용 예: 웹서비스, 광고 카피, 로고 등에 주로 사용됩니다.

  1. monospace:

    monospace
    • 특징: 'monospace' 글꼴은 각 글자가 동일한 너비를 가지고 있는 글꼴 스타일을 뜻합니다. 이러한 글꼴은 코드 편집기나 기계에서 출력하는 텍스트에서 주로 사용됩니다.
    • 예시: Courier New, Consolas, Monospace
    • 사용 예: 코드 조각, 타자기 스타일의 디자인 요소에 주로 사용됩니다.

유의사항​

  • 폰트 이름에 공백이 있으면 큰 따옴표(" "), 또는 작은 따옴표(' ')로 묶어주는 것이 좋습니다.

    • 예: "Times New Roman"

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!