Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

텍스트 및 서체

CSS 팟캐스트 - 036: 텍스트 및 서체

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

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

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

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

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

또한 text-indent 및 word-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-face와 font-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을 대체로 사용하여 본문 요소에 적용합니다.

서체 변경

브라우저 지원

소스

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

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

참고: 브라우저가 font-family 선언에서 표시할 글꼴을 선택하더라도 목록에서 사용 가능한 첫 번째 글꼴에서 멈추지 않습니다. 대신 한 번에 한 문자씩 글꼴을 선택합니다. 특정 문자가 목록의 첫 번째 글꼴에 없는 경우 다음 글꼴로 이동합니다.

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

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

브라우저 지원

소스

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

참고: Q: italic와 oblique의 차이점은 무엇인가요? A: 이를 지원하는 글꼴에서 font-style: italic은 일반적으로 일반 서체의 스크러블 버전입니다. font-style: oblique은 일반 서체의 비스듬한 버전을 표시합니다.

텍스트 굵게 표시

브라우저 지원

소스

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

키워드 normal 및 bold는 각각 숫자 값 400 및 700와 같습니다.

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

참고: 대부분의 글꼴, 특히 '웹 안전' 글꼴은 두께 400(normal) 및 700(bold)만 지원합니다. @font-face 또는 @import를 사용하여 글꼴을 가져올 때 가져올 특정 두께를 선택할 수 있습니다. 여전히 비 가변 글꼴은 100단위의 font-weight 숫자 값만 지원합니다 (예: 100, 200, 300). 예를 들어 font-weight: 321를 사용하려면 변수 글꼴을 사용해야 합니다.

텍스트 크기 변경

브라우저 지원

소스

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

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

참고: Q: em와 rem의 차이점은 무엇인가요? A: CSS에서 em는 요소의 상위 요소에서 상속된 font-size를 나타냅니다. 예를 들어 font-size: 2em는 상위 요소의 font-size에 2를 곱한 것과 같습니다. rem도 비슷하지만 <html>와 같이 루트 요소에서 상속된 font-size를 나타냅니다.

줄 간격 변경

브라우저 지원

소스

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

문자 간격 변경

브라우저 지원

소스

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

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

단어 사이의 공백 변경

브라우저 지원

소스

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

`font` 약식

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

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

텍스트 대/소문자 변경

브라우저 지원

소스

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

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

브라우저 지원

소스

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 속성은 위의 모든 속성의 축약형입니다.

참고: text-underline-position를 사용하여 text-decoration: underline의 밑줄을 지정된 크기만큼 오프셋합니다. 이 속성은 overline 또는 line-through에는 작동하지 않습니다.

텍스트에 들여쓰기 추가

브라우저 지원

소스

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

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

브라우저 지원

소스

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

공백 제어

브라우저 지원

소스

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

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

단어 분리 방법 제어

브라우저 지원

소스

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

텍스트 정렬 변경

브라우저 지원

소스

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

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

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

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

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

텍스트 방향 변경

브라우저 지원

소스

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

주의: 일반적으로 direction 대신 HTML 속성 dir를 사용하는 것이 좋습니다. 자세한 내용은 이 StackOverflow 토론을 참고하세요.

텍스트 흐름 변경

브라우저 지원

소스

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

텍스트 방향 변경

브라우저 지원

소스

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

텍스트에 음영 추가

브라우저 지원

소스

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

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

가변 글꼴

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

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

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

유사 요소

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

브라우저 지원

소스

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

유사 요소 `::selection`개

브라우저 지원

소스

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

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

font-variant

브라우저 지원

소스

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

이해도 확인

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

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

serif

정답입니다.

monospace

정답입니다.

italic

다시 시도하세요. italic는 font-family이 아닌 font-style에 유효한 키워드입니다.

sci-fi

다시 시도하세요. 하지만 fantasy은 font-family의 유효한 일반 대체입니다.

sans-serif

정답입니다.

helvetica

다시 시도하세요. "Helvetica"는 일반 키워드가 아니며 특정 글꼴 모음을 나타냅니다.

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

text-capitalize: true;

다시 시도하세요.

text-case: capitalize;

다시 시도하세요.

text-transform: capitalize;

정답입니다.

font-style: capitals;

다시 시도하세요.

font-variant: capitalize;

다시 시도하세요.

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

참

다시 시도하세요. text-orientation: 한 줄의 글자 회전을 변경합니다.

거짓

정답입니다. text-orientation: 한 줄의 글자 회전을 변경합니다. text-align를 사용하여 텍스트를 왼쪽, 오른쪽, 가운데로 정렬하고 그 밖의 작업을 할 수 있습니다.

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

line-spacing

다시 시도하세요.

leading

다시 시도하세요. Leading은 서체에서 줄 사이의 공백을 나타내는 올바른 용어이지만 유효한 CSS 속성은 아닙니다.

baseline-distance

다시 시도하세요.

line-height

정답입니다.

리소스

글꼴 권장사항에서는 글꼴 가져오기, 글꼴 렌더링, 웹에서 글꼴을 사용하는 기타 권장사항을 설명합니다.
MDN 기본 텍스트 및 글꼴 스타일 지정

텍스트 및 서체

CSS 팟캐스트 - 036: 텍스트 및 서체

@font-face 규칙

구문

기술어

설명

글꼴 MIME 유형

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

서체 변경

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

텍스트 굵게 표시

텍스트 크기 변경

줄 간격 변경

문자 간격 변경

단어 사이의 공백 변경

font 약식

텍스트 대/소문자 변경

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

텍스트에 들여쓰기 추가

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

공백 제어

단어 분리 방법 제어

텍스트 정렬 변경

텍스트 방향 변경

텍스트 흐름 변경

텍스트 방향 변경

텍스트에 음영 추가

가변 글꼴

유사 요소

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

유사 요소 ::selection개

font-variant

이해도 확인

리소스

`@font-face` 규칙

`font` 약식

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

유사 요소 `::selection`개