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: "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-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
속성은 small-caps
및 slashed-zero
와 같은 글꼴 변형을 선택할 수 있는 여러 CSS 속성의 축약형입니다. 이 약식 표현에는 font-variant-alternates
, font-variant-caps
, font-variant-east-asian
, font-variant-ligatures
, font-variant-numeric
등의 CSS 속성이 포함됩니다. 각 속성의 링크에서 사용에 관한 자세한 내용을 확인하세요.
이해도 확인
웹에서 서체에 대한 지식 테스트
다음 중 font-family
일반적인 대체 키워드로 사용할 수 있는 키워드는 무엇인가요?
sci-fi
sans-serif
serif
monospace
helvetica
italic
각 단어의 첫 글자를 대문자로 변환하는 데 사용되는 문장은 무엇인가요? 예: This is a sentence.
➡ This Is A Sentence.
text-transform: capitalize;
font-style: capitals;
text-capitalize: true;
font-variant: capitalize;
text-case: capitalize;
참 또는 거짓: text-orientation
를 사용하여 텍스트를 왼쪽, 오른쪽 또는 가운데에 정렬합니다.
다음 중 텍스트 줄 사이의 간격을 변경하려면 어떤 CSS 속성을 사용해야 하나요?
line-height
line-spacing
baseline-distance
leading
리소스
- 글꼴 권장사항에서는 글꼴 가져오기, 글꼴 렌더링, 웹에서 글꼴을 사용하는 기타 권장사항을 설명합니다.
- MDN 기본 텍스트 및 글꼴 스타일 지정