CSS 팟캐스트 - 036: 텍스트 및 서체
텍스트는 웹의 핵심 구성 요소 중 하나입니다.
웹사이트를 만들 때 텍스트의 스타일을 지정할 필요는 없습니다. HTML에는 실제로 상당히 합리적인 기본 스타일이 있습니다.
그러나 텍스트가 웹사이트의 대부분을 차지할 가능성이 높으므로 스타일을 추가하여 꾸미는 것이 좋습니다. 몇 가지 기본 속성을 변경하면 사용자의 읽기 환경을 크게 개선할 수 있습니다.
이 모듈에서는 font-family, font-style, font-weight, font-size과 같은 기본적인 CSS 글꼴 속성을 먼저 살펴보겠습니다. 그런 다음 text-indent 및 word-spacing와 같이 텍스트 단락에 영향을 미치는 속성을 살펴보겠습니다. 마지막으로 가변 글꼴 및 유사 요소와 같은 고급 주제를 살펴봅니다.
글꼴 변경
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 속성은 small-caps 및 slashed-zero과 같은 글꼴 변형을 선택할 수 있는 여러 CSS 속성의 약식 표현입니다. 약식 표현에 포함되는 CSS 속성은 font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric입니다. 각 속성의 링크에서 각 속성의 사용법을 자세히 알아보세요.
학습 내용 확인하기
웹 서체에 관한 지식 테스트
다음 중 font-family 일반 대체 키워드로 사용할 수 있는 키워드는 무엇인가요?
serifmonospaceitalicitalic은(는) font-style에 유효한 키워드이며 font-family이(가) 아닙니다.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 기본 텍스트 및 글꼴 스타일 지정