텍스트 및 서체

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
Web Open Font Format font/woff
Web Open Font Format 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을 대체 글꼴로 사용하여 본문 요소에 적용합니다.

서체 변경

Browser Support

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

Source

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

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

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

이탤릭체 및 기울임체 글꼴 사용

Browser Support

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

Source

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

텍스트를 굵게 표시

Browser Support

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

Source

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

normal 및 bold 키워드는 각각 숫자 값 400 및 700과 동일합니다.

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

텍스트 크기 변경

Browser Support

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

Source

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

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

줄 간격 변경

Browser Support

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

Source

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

문자 사이의 간격 변경

Browser Support

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

Source

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

지정된 값은 문자 사이의 자연스러운 공간을 늘립니다. 다음 데모에서 개별 글자를 선택하여 레터박스 크기를 확인하고 letter-spacing에 따라 어떻게 변하는지 확인해 보세요.

단어 간 간격 변경

Browser Support

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

Source

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 도움말을 참고하세요.

## 텍스트의 대소문자 변경

Browser Support

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

Source

[`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform)을 사용하여 기본 HTML을 변경하지 않고 텍스트의 대소문자를 수정합니다. 이 속성은 `uppercase`, `lowercase`, `capitalize` 키워드 값을 허용합니다.

텍스트에 밑줄, 윗줄, 관통선 추가하기

Browser Support

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

Source

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

텍스트에 들여쓰기 추가하기

Browser Support

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

Source

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

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

Browser Support

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

Source

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

공백 제어

Browser Support

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

Source

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

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

단어 끊김 방식 제어

Browser Support

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

Source

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

텍스트 정렬 변경

Browser Support

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

Source

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

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

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

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

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

텍스트 줄바꿈 방식 제어

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.4.

Source

text-wrap를 사용하여 요소 내 텍스트의 줄바꿈 방식을 변경합니다.

이 속성에 허용되는 키워드에는 wrap, nowrap, balance, stable이 포함됩니다. 기본값은 wrap이며, 일반 공백과 단어 끊김을 따라 여러 줄에 텍스트를 래핑하여 오버플로를 최소화합니다.

nowrap 키워드를 사용하여 정확히 반대로 작동하도록 하여 텍스트가 여러 줄에 걸쳐 표시되지 않도록 할 수 있습니다. 이렇게 하면 오버플로가 발생할 수 있습니다.

예를 들어 제목이나 헤드라인을 작성할 때 각 줄에 동일한 양의 텍스트를 표시하려면 balance 키워드를 사용합니다. 성능을 개선하기 위해 브라우저는 텍스트가 6줄 이하인 요소에만 이 값을 적용합니다.

stable 키워드는 wrap와 유사하게 작동하지만 contenteditable 텍스트와 함께 사용됩니다. text-wrap: stable가 설정되면 수정 중인 콘텐츠 위의 줄이 프로세스에서 이동하지 않습니다.

명확한 중단점이 없는 긴 문자열은 컨테이너를 오버플로할 수 있습니다. 이 유형의 텍스트가 끊어지는 방식을 제어하려면 overflow-wrap를 사용하세요.

Browser Support

  • Chrome: 23.
  • Edge: 18.
  • Firefox: 49.
  • Safari: 7.

Source

이 속성에 사용할 수 있는 키워드는 normal, break-word, anywhere입니다. 기본 설정은 normal이며 공백이나 자연스러운 끊김 지점이 포함되지 않는 한 텍스트가 다음 줄로 끊어지지 않습니다.

anywhere 및 break-word 값은 오버플로를 방지하기 위해 문자열 내 어디에나 중단점을 추가합니다. 키워드는 내재적 또는 명시적 min-content 크기에 반응하는 방식이 다릅니다. anywhere 키워드를 사용하면 가능한 모든 소프트 브레이킹 기회가 허용됩니다. break-word 값은 가장 긴 단어만큼 텍스트를 길게 만들지 않습니다.

텍스트 방향 변경

Browser Support

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

Source

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

텍스트 흐름 변경

Browser Support

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

Source

writing-mode를 사용하여 텍스트가 흐르고 정렬되는 방식을 변경합니다. 기본값은 horizontal-tb이지만 가로로 흐르게 하려는 텍스트에 대해 writing-mode을 vertical-lr 또는 vertical-rl로 설정할 수도 있습니다.

텍스트 방향 변경

Browser Support

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

Source

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

텍스트에 그림자 추가

Browser Support

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

Source

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

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

가변 글꼴

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

다양한 너비와 두께의 Roboto Flex

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

의사 요소

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

Browser Support

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

Source

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

::selection 의사 요소

Browser Support

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

Source

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

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

font-variant

Browser Support

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

Source

font-variant 속성은 small-caps 및 slashed-zero과 같은 글꼴 변형을 선택할 수 있는 여러 CSS 속성의 약어입니다. 이 단축키에 포함된 CSS 속성은 font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric입니다. 각 속성의 링크를 확인하여 사용에 대한 자세한 내용을 알아보세요.

이해도 확인

웹 타이포그래피에 대한 지식 테스트

다음 키워드 중 어떤 키워드를 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
다시 시도해 보세요. 리딩은 서체에서 줄 사이의 간격을 나타내는 올바른 용어이지만 유효한 CSS 속성은 아닙니다.
baseline-distance
다시 시도해 보세요.
line-height
정답입니다.

리소스