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을 대체 글꼴로 사용하여 본문 요소에 적용합니다.
서체 변경
font-family
을 사용하여 텍스트의 서체를 변경합니다.
font-family
속성은 특정 또는 일반 글꼴 패밀리를 참조하는 쉼표로 구분된 문자열 목록을 허용합니다. 특정 글꼴 모음은 'Helvetica', 'EB Garamond', 'Times New Roman'과 같은 따옴표로 묶인 문자열입니다. 일반 글꼴 모음은 serif
, sans-serif
, monospace
와 같은 키워드입니다 (MDN에서 전체 옵션 목록 확인). 브라우저에는 제공된 목록에서 사용 가능한 첫 번째 서체가 표시됩니다.
font-family
을 사용하는 경우 사용자의 브라우저에 선호하는 글꼴이 없는 경우를 대비하여 일반 글꼴 모음을 하나 이상 지정해야 합니다. 일반적으로 대체 일반 글꼴 모음은 선호하는 글꼴과 유사해야 합니다. font-family: "Helvetica"
(산세리프 글꼴 모음)를 사용하는 경우 대체는 sans-serif
로 일치시켜야 합니다.
이탤릭체 및 기울임체 글꼴 사용
font-style
을 사용하여 텍스트를 기울임꼴로 표시할지 여부를 설정합니다. font-style
는 normal
, italic
, oblique
키워드 중 하나를 허용합니다.
텍스트를 굵게 표시
font-weight
를 사용하여 텍스트의 '굵기'를 설정합니다. 이 속성은 키워드 값 (normal
, bold
), 상대 키워드 값 (lighter
, bolder
), 숫자 값 (100
~900
)을 허용합니다.
normal
및 bold
키워드는 각각 숫자 값 400
및 700
과 동일합니다.
lighter
및 bolder
키워드는 상위 요소를 기준으로 계산됩니다. 이 값이 결정되는 방식을 보여주는 유용한 차트는 MDN의 상대 가중치의 의미를 참고하세요.
텍스트 크기 변경
font-size
를 사용하여 텍스트 요소의 크기를 제어합니다. 이 속성은 길이 값, 백분율, 일부 키워드 값을 허용합니다.
길이 및 백분율 값 외에도 font-size
는 일부 절대 키워드 값 (xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
)과 몇 개의 상대 키워드 값 (smaller
, larger
)을 허용합니다. 상대 값은 상위 요소의 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-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-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
값은 텍스트를 정리하고 텍스트가 블록의 왼쪽과 오른쪽 가장자리에 모두 정렬되도록 단어 간격을 자동으로 변경합니다.
텍스트 줄바꿈 방식 제어
text-wrap
를 사용하여 요소 내 텍스트의 줄바꿈 방식을 변경합니다.
이 속성에 허용되는 키워드에는 wrap
, nowrap
, balance
, stable
이 포함됩니다. 기본값은 wrap
이며, 일반 공백과 단어 끊김을 따라 여러 줄에 텍스트를 래핑하여 오버플로를 최소화합니다.
nowrap
키워드를 사용하여 정확히 반대로 작동하도록 하여 텍스트가 여러 줄에 걸쳐 표시되지 않도록 할 수 있습니다. 이렇게 하면 오버플로가 발생할 수 있습니다.
예를 들어 제목이나 헤드라인을 작성할 때 각 줄에 동일한 양의 텍스트를 표시하려면 balance
키워드를 사용합니다. 성능을 개선하기 위해 브라우저는 텍스트가 6줄 이하인 요소에만 이 값을 적용합니다.
stable
키워드는 wrap
와 유사하게 작동하지만 contenteditable 텍스트와 함께 사용됩니다. text-wrap: stable
가 설정되면 수정 중인 콘텐츠 위의 줄이 프로세스에서 이동하지 않습니다.
명확한 중단점이 없는 긴 문자열은 컨테이너를 오버플로할 수 있습니다.
이 유형의 텍스트가 끊어지는 방식을 제어하려면 overflow-wrap
를 사용하세요.
이 속성에 사용할 수 있는 키워드는 normal
, break-word
, anywhere
입니다. 기본 설정은 normal
이며 공백이나 자연스러운 끊김 지점이 포함되지 않는 한 텍스트가 다음 줄로 끊어지지 않습니다.
anywhere
및 break-word
값은 오버플로를 방지하기 위해 문자열 내 어디에나 중단점을 추가합니다. 키워드는 내재적 또는 명시적 min-content
크기에 반응하는 방식이 다릅니다. anywhere
키워드를 사용하면 가능한 모든 소프트 브레이킹 기회가 허용됩니다. break-word
값은 가장 긴 단어만큼 텍스트를 길게 만들지 않습니다.
텍스트 방향 변경
direction
를 사용하여 텍스트 방향을 ltr
(왼쪽에서 오른쪽, 기본값) 또는 rtl
(오른쪽에서 왼쪽)으로 설정합니다. 아랍어, 히브리어, 페르시아어와 같은 일부 언어는 오른쪽에서 왼쪽으로 작성되므로 direction: rtl
를 사용해야 합니다. 영어 및 기타 모든 왼쪽에서 오른쪽으로 쓰는 언어의 경우 direction: ltr
를 사용하세요.
텍스트 흐름 변경
writing-mode
를 사용하여 텍스트가 흐르고 정렬되는 방식을 변경합니다. 기본값은 horizontal-tb
이지만 가로로 흐르게 하려는 텍스트에 대해 writing-mode
을 vertical-lr
또는 vertical-rl
로 설정할 수도 있습니다.
텍스트 방향 변경
text-orientation
을 사용하여 텍스트의 문자 방향을 지정합니다. 이 속성에 유효한 값은 mixed
및 upright
입니다. 이 속성은 writing-mode
가 horizontal-tb
이외의 다른 항목으로 설정된 경우에만 관련이 있습니다.
텍스트에 그림자 추가
text-shadow
를 사용하여 텍스트에 그림자를 추가합니다. 이 속성은 길이 3개 (x-offset
, y-offset
, blur-radius
)와 색상을 사용합니다.
자세한 내용은 그림자에 관한 모듈의 text-shadow
섹션을 참고하세요.
가변 글꼴
일반적으로 '일반' 글꼴은 굵게, 기울임꼴, 압축 등 서체의 버전에 따라 다른 파일을 가져와야 합니다. 가변 글꼴은 하나의 파일에 다양한 서체 변형을 포함할 수 있는 글꼴입니다.
자세한 내용은 가변 글꼴에 관한 도움말을 참고하세요.
의사 요소
::first-letter
및 ::first-line
가상 요소
::first-letter
및 ::first-line
의사 요소는 각각 텍스트 요소의 첫 글자와 첫 번째 줄을 타겟팅합니다.
::selection
의사 요소
::selection
가상 요소를 사용하여 사용자가 선택한 텍스트의 모양을 변경합니다.
이 가상 요소를 사용할 때는 color
, background-color
, text-decoration
, text-shadow
, stroke-color
, fill-color
, stroke-width
와 같은 특정 CSS 속성만 사용할 수 있습니다.
font-variant
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
baseline-distance
line-height
리소스
- 글꼴 권장사항에서는 글꼴 가져오기, 글꼴 렌더링, 웹에서 글꼴 사용에 관한 기타 권장사항을 설명합니다.
- MDN 기본 텍스트 및 글꼴 스타일 지정