텍스트 및 서체

텍스트는 웹의 핵심 구성요소 중 하나입니다.

웹사이트를 만들 때 텍스트에 스타일을 지정할 필요는 없습니다. HTML에는 실제로 꽤 적절한 기본 스타일이 있습니다.

하지만 텍스트가 웹사이트의 대부분을 차지할 가능성이 높으므로 디자인을 꾸미는 것이 좋습니다. 몇 가지 기본 속성을 변경하면 사용자의 읽기 환경을 크게 개선할 수 있습니다.

이 모듈에서는 맞춤 글꼴을 웹페이지로 가져올 수 있는 @font-face 규칙부터 시작합니다. 이렇게 하면 사용자가 설치한 글꼴과 관계없이 필요한 정확한 서체를 사용할 수 있습니다.

그런 다음 font-family, font-style, font-weight, font-size를 비롯한 필수 CSS 글꼴 속성을 살펴봅니다. 이러한 기본 사항을 통해 스타일과 가독성을 위해 텍스트를 조작할 수 있습니다.

또한 text-indentword-spacing와 같은 단락별 속성도 살펴본 후, 가변 글꼴 및 가상 요소와 같은 고급 주제로 마무리하여 서체 설정을 더욱 세부적으로 조정해 보겠습니다.

이러한 CSS 기법을 이해하고 적용하는 데 도움이 되는 실용적인 예시와 팁이 제공됩니다.

@font-face 규칙

@font-face CSS at-rule은 웹 디자인에 중요한 역할을 하며, 맞춤 글꼴을 지정하고 사용하여 텍스트를 표시할 수 있습니다. @font-face의 장점은 다양성입니다. 원격 서버 또는 사용자 기기에 설치된 글꼴에서 글꼴을 가져올 수 있습니다.

구문

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

기술어

ascent-override
상승 측정항목을 맞춤설정하여 기준선 위의 공간에 영향을 줍니다.
descent-override
하강 측정항목을 조정하여 기준 아래의 공간에 영향을 미칩니다.
font-display
다운로드 상태에 따라 글꼴의 표시 동작을 제어합니다.
font-family
글꼴 관련 속성 내에 사용할 글꼴의 이름을 지정합니다.
font-stretch
허용되는 수평 확장을 설정합니다. 단일 값 또는 범위로 지정됩니다.
font-style
기울기 스타일의 각도 범위를 지원하는 글꼴 스타일을 정의합니다.
font-weight
사용 가능한 글꼴 두께 또는 두께 범위를 결정합니다.
font-feature-settings
OpenType 글꼴 기능에 대한 액세스를 사용 설정합니다.
font-variation-settings
변수 글꼴 설정을 미세하게 제어합니다.
line-gap-override
글꼴의 기본 줄 간격을 재정의합니다.
size-adjust
글꼴의 윤곽선과 측정항목에 배율을 적용합니다.
src
로컬 또는 원격에서 글꼴 소스를 정의합니다. 이는 @font-face 규칙에 필요합니다. src 내에서 url()local()를 결합하는 것은 가능한 경우 로컬 글꼴을 사용하여 원격 글꼴 파일로 대체하는 일반적인 전략입니다. 브라우저는 선언 순서에 따라 리소스의 우선순위를 지정하므로 일반적으로 local()url() 앞에 있어야 합니다.
unicode-range
이 글꼴을 사용해야 하는 문자를 제한합니다.

설명

@font-face를 사용하면 디자이너가 맞춤 서체를 사용할 수 있으므로 '웹에 적합한' 글꼴의 제약을 피할 수 있습니다. local() 함수의 사용자 기기에서 글꼴을 검색하는 기능은 인터넷 연결에 꼭 의존하지 않는 원활한 환경을 제공합니다.

글꼴 MIME 유형

방식 MIME 유형
TrueType font/ttf
OpenType font/otf
웹 오픈 글꼴 형식 font/woff
웹 오픈 글꼴 형식 2 font/woff2

@font-face와 font-family의 차이점

CSS에서 @font-facefont-family는 종종 혼동되지만 서로 다른 목적으로 사용됩니다.

앞서 설명한 대로 @font-face는 웹 애플리케이션에서 사용할 맞춤 글꼴을 정의하는 데 사용되는 규칙입니다. 브라우저에 글꼴을 다운로드할 위치와 로드하는 동안 글꼴을 표시하는 방법 (font-display 속성 사용)을 알리고 다운로드할 문자 하위 집합을 지정합니다 (unicode-range 사용).

반면 font-family는 CSS 규칙 내에서 특정 글꼴 또는 글꼴 목록을 요소에 할당하는 데 사용되는 CSS 속성입니다. font-family 아래에 나열된 글꼴은 웹에 적합한 글꼴, 시스템 글꼴 또는 @font-face로 정의된 맞춤 글꼴일 수 있습니다.

요약하면 @font-face는 글꼴을 선언하고 이름을 지정하며 font-family는 선언된 이 글꼴을 HTML 요소에 적용합니다.

다음은 둘 다 사용하는 예입니다.

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

이 예에서 @font-face는 'CustomFont'를 정의하고 브라우저에 이를 찾을 위치를 알려줍니다. 그런 다음 font-family 속성이 'CustomFont'를 사용할 수 없는 경우 Arial을 대체로 사용하여 본문 요소에 적용합니다.

서체 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

font-family를 사용하여 텍스트의 서체를 변경합니다.

font-family 속성은 특정 또는 일반 글꼴 패밀리를 참조하는 쉼표로 구분된 문자열 목록을 허용합니다. 특정 글꼴 모음은 'Helvetica', 'EB Garamond' 또는 'Times New Roman'과 같은 따옴표로 묶인 문자열입니다. 일반 글꼴 모음은 serif, sans-serif, monospace와 같은 키워드입니다(MDN에서 옵션의 전체 목록 참고). 브라우저는 제공된 목록에서 사용 가능한 첫 번째 서체를 표시합니다.

font-family를 사용할 때는 사용자의 브라우저에 선호하는 글꼴이 없는 경우를 대비해 하나 이상의 일반 글꼴 모음을 지정해야 합니다. 일반적으로 대체 일반 글꼴 모음은 선호하는 글꼴과 유사해야 합니다. font-family: "Helvetica"(산세리프 글꼴 모음)을 사용하는 경우 일치하도록 대체 글꼴 모음은 sans-serif여야 합니다.

기울임꼴 및 기울어진 글꼴 사용

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

font-style를 사용하여 텍스트를 기울임꼴로 표시할지 여부를 설정합니다. font-stylenormal, italic, oblique 키워드 중 하나를 허용합니다.

텍스트 굵게 표시

브라우저 지원

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

font-weight를 사용하여 텍스트의 '굵기'를 설정합니다. 이 속성은 키워드 값(normal, bold), 상대 키워드 값(lighter, bolder), 숫자 값(100~900)을 허용합니다.

키워드 normalbold는 각각 숫자 값 400700와 같습니다.

키워드 lighterbolder는 상위 요소를 기준으로 계산됩니다. 이 값이 결정되는 방식을 보여주는 편리한 차트는 MDN의 상대 가중치의 의미를 참고하세요.

텍스트 크기 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

font-size를 사용하여 텍스트 요소의 크기를 제어합니다. 이 속성은 길이 값, 비율, 몇 가지 키워드 값을 허용합니다.

길이 및 비율 값 외에도 font-size에는 일부 절대적인 키워드 값 (xx-small, x-small, small, medium, large, x-large, xx-large)과 몇 개의 상대 키워드 값 (smaller, larger)이 허용됩니다. 상대 값은 상위 요소의 font-size에 대해 상대적입니다.

줄 간격 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

line-height를 사용하여 요소의 각 줄 높이를 지정합니다. 이 속성은 숫자, 길이, 비율 또는 normal 키워드를 허용합니다. 일반적으로 상속 문제를 방지하려면 길이 또는 비율 대신 숫자를 사용하는 것이 좋습니다.

문자 간격 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

letter-spacing를 사용하여 텍스트의 문자 간 가로 간격을 제어합니다. 이 속성은 em, px, rem과 같은 길이 값을 허용합니다.

지정된 값은 문자 사이의 자연스러운 공백을 증가시킵니다. 다음 데모에서 개별 글자를 선택하여 레터박스의 크기와 letter-spacing로 변경되는 방식을 확인해 보세요.

단어 사이의 공백 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

word-spacing를 사용하여 텍스트에서 각 단어 사이의 간격을 늘리거나 줄입니다. 이 속성은 em, px, rem과 같은 길이 값을 허용합니다. 지정하는 길이는 일반적인 간격 외에도 추가 공간을 위한 것입니다. 즉, word-spacing: 0word-spacing: normal와 같습니다.

font 약식

font 속성의 약어를 사용하여 여러 글꼴 관련 속성을 한 번에 설정할 수 있습니다. 가능한 속성 목록은 font-family, font-size, font-stretch, font-style, font-variant, font-weight, line-height입니다.

이러한 속성을 정렬하는 방법에 관한 자세한 내용은 MDN의 font 도움말을 참고하세요.

텍스트 대/소문자 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

text-transform를 사용하여 기본 HTML을 변경하지 않고도 텍스트의 대소문자를 수정할 수 있습니다. 이 속성에는 uppercase, lowercase, capitalize 키워드 값을 사용할 수 있습니다.

텍스트에 밑줄, 윗줄, 취소선 추가

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

text-decoration를 사용하여 텍스트에 줄을 추가합니다. 가장 일반적으로 사용되는 것은 밑줄이지만 텍스트 위에 또는 텍스트 바로 옆에 선을 추가할 수도 있습니다.

text-decoration 속성은 아래에 설명된 보다 구체적인 속성의 약칭입니다.

text-decoration-line 속성은 underline, overline, line-through 키워드를 허용합니다. 여러 줄에 여러 키워드를 지정할 수도 있습니다.

text-decoration-color 속성은 text-decoration-line의 모든 장식의 색상을 설정합니다.

text-decoration-style 속성은 solid, double, dotted, dashed, wavy 키워드를 허용합니다.

text-decoration-thickness 속성은 모든 길이 값을 허용하며 text-decoration-line의 모든 장식의 획 너비를 설정합니다.

text-decoration 속성은 위의 모든 속성의 축약형입니다.

텍스트에 들여쓰기 추가

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

text-indent를 사용하여 텍스트 블록에 들여쓰기를 추가합니다. 이 속성은 길이(예: 10px, 2em) 또는 포함 블록 너비의 비율을 사용합니다.

오버플로 또는 숨겨진 콘텐츠 처리

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari 1.3.

소스

text-overflow를 사용하여 숨겨진 콘텐츠가 표시되는 방식을 지정합니다. 두 가지 옵션이 있습니다. 오버플로 지점에서 텍스트를 자르는 clip(기본값)과 오버플로 지점에 생략 기호(…)를 표시하는 ellipsis입니다.

공백 제어

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

white-space 속성은 요소의 공백을 처리하는 방법을 지정하는 데 사용됩니다. 자세한 내용은 MDN의 white-space 도움말을 참고하세요.

white-space: preASCII 아트 또는 신중하게 들여쓰기된 코드 블록을 렌더링하는 데 유용할 수 있습니다.

단어 분리 방법 제어

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

소스

word-break를 사용하여 단어가 줄 넘어갈 때 '깨지는' 방식을 변경합니다. 기본적으로 브라우저는 단어를 분할하지 않습니다. word-break에 키워드 값 break-all를 사용하면 필요한 경우 브라우저에 단어를 개별 문자에서 끊으라고 지시합니다.

텍스트 정렬 변경

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

text-align를 사용하여 블록 또는 표 셀 요소의 텍스트 가로 정렬을 지정합니다. 이 속성은 키워드 값 left, right, start, end, center, justify, match-parent을 허용합니다.

leftright 값은 각각 블록의 왼쪽과 오른쪽에 텍스트를 정렬합니다.

startend를 사용하여 현재 쓰기 모드에서 텍스트 줄의 시작과 끝 위치를 나타냅니다. 따라서 start는 영어로 left에 매핑되고 오른쪽에서 왼쪽(RTL)으로 작성되는 아랍어 스크립트로 right에 매핑됩니다. 논리적 정렬입니다. 논리적 속성 모듈에서 자세히 알아보세요.

center을 사용하여 텍스트를 블록 중앙에 정렬합니다.

justify 값은 텍스트를 정리하고 단어 간격을 자동으로 변경하여 텍스트가 블록의 왼쪽 및 오른쪽 가장자리와 정렬되도록 합니다.

텍스트 방향 변경

브라우저 지원

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

direction를 사용하여 텍스트 방향(ltr(왼쪽에서 오른쪽, 기본값) 또는 rtl(오른쪽에서 왼쪽))을 설정합니다. 아랍어, 히브리어, 페르시아어와 같은 일부 언어는 오른쪽에서 왼쪽으로 작성되므로 direction: rtl를 사용해야 합니다. 영어 및 기타 모든 왼쪽에서 오른쪽으로 쓰는 언어의 경우 direction: ltr를 사용하세요.

텍스트 흐름 변경

브라우저 지원

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1

소스

writing-mode를 사용하여 텍스트의 흐름과 정렬 방식을 변경합니다. 기본값은 horizontal-tb이지만 가로로 읽도록 하려는 텍스트의 경우 writing-modevertical-lr 또는 vertical-rl로 설정할 수 있습니다.

텍스트 방향 변경

브라우저 지원

  • Chrome: 48.
  • Edge: 79
  • Firefox: 41.
  • Safari: 14

소스

text-orientation을 사용하여 텍스트에서 문자의 방향을 지정합니다. 이 속성에 유효한 값은 mixedupright입니다. 이 속성은 writing-modehorizontal-tb 이외의 항목으로 설정된 경우에만 관련이 있습니다.

텍스트에 음영 추가

브라우저 지원

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1

소스

text-shadow 아이콘을 사용하여 텍스트에 그림자를 추가합니다. 이 속성은 세 가지 길이(x-offset, y-offset, blur-radius)와 색상을 예상합니다.

자세한 내용은 그림자 관련 모듈의 text-shadow 섹션을 참고하세요.

가변 글꼴

일반적으로 '일반' 글꼴은 굵게, 기울임꼴, 좁게 등 서체의 다양한 버전에 맞는 서로 다른 파일을 가져와야 합니다. 가변 글꼴은 한 파일에 서체의 다양한 변형을 포함할 수 있는 글꼴입니다.

너비와 두께의 무작위 조합으로 Roboto Flex

자세한 내용은 변수 글꼴에 관한 도움말을 참고하세요.

유사 요소

::first-letter::first-line 가상 요소

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

::first-letter::first-line 가상 요소는 각각 텍스트 요소의 첫 번째 문자와 첫 번째 줄을 타겟팅합니다.

유사 요소 ::selection

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1

소스

::selection 가상 요소를 사용하여 사용자가 선택한 텍스트의 모양을 변경합니다.

이 가상 요소를 사용할 때는 특정 CSS 속성(color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width)만 사용할 수 있습니다.

font-variant

브라우저 지원

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

소스

font-variant 속성은 small-capsslashed-zero와 같은 글꼴 변형을 선택할 수 있는 여러 CSS 속성의 축약형입니다. 이 약식 표현에는 font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric 등의 CSS 속성이 포함됩니다. 각 속성의 링크에서 사용에 관한 자세한 내용을 확인하세요.

이해도 확인

웹에서 서체에 대한 지식 테스트

다음 중 font-family 일반적인 대체 키워드로 사용할 수 있는 키워드는 무엇인가요?

monospace
italic
serif
helvetica
sans-serif
sci-fi

각 단어의 첫 글자를 대문자로 변환하는 데 사용되는 문장은 무엇인가요? 예: This is a sentence.This Is A Sentence.

text-transform: capitalize;
text-capitalize: true;
font-style: capitals;
text-case: capitalize;
font-variant: capitalize;

참 또는 거짓: text-orientation를 사용하여 텍스트를 왼쪽, 오른쪽 또는 가운데에 정렬합니다.

거짓

다음 중 텍스트 줄 사이의 간격을 변경하려면 어떤 CSS 속성을 사용해야 하나요?

line-height
baseline-distance
leading
line-spacing

리소스