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 규칙은 웹 디자인에서 중요한 역할을 하므로 맞춤 글꼴을 지정하고 사용하여 텍스트를 표시할 수 있습니다. @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: "Helvetica" (sans-serif 글꼴 모음)을 사용하는 경우 일치하는 대체 글꼴은 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-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-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를 사용합니다.
텍스트 흐름 변경
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 섹션을 참고하세요.
가변 글꼴
일반적으로 '일반' 글꼴은 굵게, 기울임꼴 또는 압축과 같은 다양한 버전의 서체에 대해 서로 다른 파일을 가져와야 합니다. 가변 글꼴은 하나의 파일에 다양한 서체의 여러 변형을 포함할 수 있는 글꼴입니다.
자세한 내용은 가변 글꼴에 관한 도움말을 참고하세요.
유사 요소
::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 속성은 여러 CSS 속성의 약식 표현으로, small-caps 및 slashed-zero와 같은 글꼴 버전을 선택할 수 있습니다. 이 약식 표현에는 font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric 등의 CSS 속성이 포함됩니다. 사용에 관한 자세한 내용은 각 속성의 링크를 확인하세요.
이해도 확인
웹에서 서체에 관한 지식 테스트
다음 중 font-family 일반적인 대체 키워드로 사용할 수 있는 키워드는 무엇인가요?
serifmonospaceitalicitalic는 font-family이 아닌 font-style에 유효한 키워드입니다.sci-fifantasy는 font-family의 유효한 일반 대체 값입니다.sans-serifhelvetica"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는 선의 문자 회전을 변경합니다.다음 중 텍스트 줄 사이의 간격을 변경하려면 어떤 CSS 속성을 사용해야 하나요?
line-spacingleadingbaseline-distanceline-height리소스
- 글꼴 권장사항에서는 글꼴 가져오기, 글꼴 렌더링, 웹에서 글꼴을 사용하기 위한 기타 권장사항을 설명합니다.
- MDN 기본 텍스트 및 글꼴 스타일 지정