Fundamental text and font styling

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

19/190

안녕하세요! CSS의 세계로 한 걸음 더 깊이 들어오신 것을 환영합니다.

이번 시간에는 CSS로 텍스트와 폰트를 스타일링하는 기초를 완벽하게 마스터하는 여정을 시작하겠습니다. 폰트 굵기, 글꼴(family), 스타일 설정은 물론, 폰트 단축(shorthand) 속성, 텍스트 정렬, 그림자 효과, 그리고 줄 간격과 자간 설정까지 텍스트를 아름답게 꾸미는 모든 핵심 원리를 아주 상세하게 다뤄볼 거예요.

제 실무 경험을 듬뿍 담은 꿀팁들도 중간중간 알려드릴 테니 집중해 주세요! 자, 시작해 볼까요?

기본 텍스트 및 폰트 스타일링 (Fundamental text and font styling)

이전 페이지 (Overview: CSS text styling) | 다음 페이지 (Styling lists)


사전 준비 지식:	HTML로 콘텐츠 구조화하기 및 CSS 스타일링 기초.
학습 목표:	글꼴 모음(font families), 폰트 스택(font stacks), 그리고 웹 안전 폰트(web-safe fonts)의 개념 이해하기. 폰트의 색상, 굵기, 크기, 스타일 설정하기. 텍스트 정렬, 변환(transform), 장식(decoration) 설정하기. 줄 높이(line height) 설정하기. 다른 여러 가지 폰트/텍스트 스타일링 속성들이 존재함을 알고, 스스로 탐구해 보기.

사전 준비 지식:

HTML로 콘텐츠 구조화하기 및 CSS 스타일링 기초.

학습 목표:

글꼴 모음(font families), 폰트 스택(font stacks), 그리고 웹 안전 폰트(web-safe fonts)의 개념 이해하기.
폰트의 색상, 굵기, 크기, 스타일 설정하기.
텍스트 정렬, 변환(transform), 장식(decoration) 설정하기.
줄 높이(line height) 설정하기.
다른 여러 가지 폰트/텍스트 스타일링 속성들이 존재함을 알고, 스스로 탐구해 보기.

CSS에서 텍스트 스타일링이란 무엇을 의미할까요? (What is involved in styling text in CSS?)

요소 안의 텍스트는 해당 요소의 콘텐츠 박스(content box) 안쪽에 배치됩니다. 텍스트는 콘텐츠 영역의 왼쪽 위(아랍어 등 RTL 언어의 경우 오른쪽 위)에서 시작하여 줄의 끝을 향해 자연스럽게 흘러갑니다. 끝에 도달하면 다음 줄로 넘어가서 다시 끝을 향해 흐르죠. 이 패턴은 박스 안에 모든 콘텐츠가 배치될 때까지 반복됩니다. 텍스트 콘텐츠는 기본적으로 일련의 '인라인(inline)' 요소들처럼 작동합니다. 서로 인접한 줄에 나란히 배치되며, 줄의 끝에 도달하거나 우리가 <br> 태그를 사용해 수동으로 줄바꿈을 강제하지 않는 한 줄바꿈을 생성하지 않습니다.

📝 참고사항 (Note):
만약 위 문단이 조금 헷갈린다면 걱정하지 마세요. 계속 진행하기 전에 박스 모델(Box model) 문서를 다시 살펴보고 이론을 가볍게 복습하시면 됩니다!

텍스트를 스타일링하는 데 사용되는 CSS 속성들은 크게 두 가지 범주로 나눌 수 있으며, 이 글에서도 이를 나누어 살펴볼 것입니다:

폰트 스타일 (Font styles): 텍스트의 '글꼴' 자체에 영향을 주는 속성들입니다. 예를 들어 어떤 폰트가 적용될지, 크기는 얼마인지, 굵게 할지, 이탤릭체로 할지 등을 결정합니다.
텍스트 레이아웃 스타일 (Text layout styles): 텍스트의 간격이나 기타 레이아웃 특징에 영향을 주는 속성들입니다. 줄 간격이나 글자 간격을 조절하고, 콘텐츠 박스 내에서 텍스트를 어떻게 정렬할지 조작할 수 있습니다.

📝 참고사항 (Note):
요소 안의 텍스트는 모두 '하나의 단일 개체'로서 영향을 받는다는 점을 명심하세요. 텍스트의 일부분만 선택해서 스타일을 지정하고 싶다면, 그 부분을 적절한 요소(예: <span>이나 <strong>)로 감싸거나, 텍스트 전용 가상 요소(pseudo-element)를 사용해야 합니다. 예를 들어, 요소 텍스트의 첫 번째 글자만 선택하는 ::first-letter, 첫 번째 줄만 선택하는 ::first-line, 또는 사용자가 마우스로 드래그해서 하이라이트한 텍스트를 선택하는 ::selection 등이 있습니다.

폰트 (Fonts)

이제 폰트(글꼴)를 스타일링하는 속성들을 바로 살펴보도록 하죠. 다음 예제들에서는 아래의 HTML 샘플 코드에 여러 CSS 속성들을 적용해 볼 것입니다:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

색상 (Color)

color 속성은 선택된 요소의 전경(foreground) 콘텐츠 색상을 설정합니다. 주로 텍스트 색상을 의미하지만, text-decoration 속성으로 넣은 밑줄(underline)이나 윗줄(overline) 같은 요소들의 색상에도 적용됩니다.

color 속성에는 CSS 색상 단위(CSS color unit) 중 어떤 것이든 사용할 수 있습니다. 예를 들어보죠:

p {
  color: red;
}

이 코드는 브라우저의 기본 색상인 검은색 대신, 문단(<p>)의 텍스트 색상을 빨간색으로 바꿉니다.

글꼴 모음 (Font families)

텍스트에 다른 글꼴을 적용하려면 font-family 속성을 사용합니다. 이 속성을 통해 브라우저가 선택된 요소에 적용할 폰트(또는 폰트들의 목록)를 지정할 수 있습니다. 브라우저는 웹사이트에 접속한 기기(컴퓨터, 스마트폰 등)에 해당 폰트가 설치되어 있을 때만 그 폰트를 적용합니다. 만약 없다면, 브라우저의 기본 폰트를 대신 사용하게 되죠. 간단한 예시는 다음과 같습니다:

p {
  font-family: "Arial";
}

이렇게 하면 페이지의 모든 문단이 거의 모든 컴퓨터에 깔려있는 Arial 폰트로 표시될 것입니다.

📝 참고사항 (Note):
Scrimba의 웹 안전 폰트(Web-safe fonts) MDN 학습 파트너라는 인터랙티브 가이드를 통해 폰트가 왜 중요한지, 웹 안전 폰트가 무엇인지, CSS에서 폰트를 어떻게 지정하는지 확인하고 지식을 테스트하는 도전을 해보실 수 있습니다.

웹 안전 폰트 (Web safe fonts)

폰트의 '가용성(availability)'에 관해 이야기하자면, 거의 모든 운영체제(OS)에 기본적으로 탑재되어 있어 안심하고 사용할 수 있는 폰트들이 있습니다. 우리는 이를 웹 안전 폰트(web safe fonts)라고 부릅니다.

웹 개발자로서 우리는 텍스트를 표시하는 데 어떤 폰트를 쓸지 구체적으로 제어하고 싶어 합니다. 하지만 웹 페이지를 보는 사용자의 컴퓨터에 어떤 폰트가 설치되어 있는지 완벽하게 알 방법은 없습니다. 그래도 다행인 것은, 웹 안전 폰트들은 가장 많이 쓰이는 운영체제(Windows, macOS, 주요 Linux 배포판, Android, iOS) 대부분에 깔려있다고 믿고 사용할 수 있다는 점입니다.

운영체제가 발전함에 따라 실제 웹 안전 폰트의 목록도 변하겠지만, 적어도 현재로서는 아래의 폰트들을 웹 안전 폰트라고 여겨도 무방합니다. (이들 중 다수는 90년대 후반과 2000년대 초반 마이크로소프트의 Core fonts for the Web 이니셔티브 덕분에 널리 보급되었습니다.)

이름 (Name)	일반 유형 (Generic type)	비고 (Notes)
Arial	sans-serif	Arial은 아주 널리 보급되어 있지만, 모양이 거의 비슷하면서도 형태가 더 아름답다고 평가받는 Helvetica를 우선적인 대안으로 함께 추가해 두는 것이 실무의 모범 사례(best practice)입니다.
Courier New	monospace	일부 OS에는 Courier라는 대체(또는 이전) 버전이 있습니다. Courier New를 선호하는 대안으로 두되 둘 다 적어주는 것이 좋습니다.
Georgia	serif
Times New Roman	serif	일부 OS에는 Times라는 대체 버전이 있습니다. Times New Roman을 우선으로 하되 둘 다 명시하는 것이 좋습니다.
Trebuchet MS	sans-serif	모바일 OS에서는 널리 지원되지 않으므로 사용 시 주의가 필요합니다.
Verdana	sans-serif

📝 참고사항 (Note):
수많은 자료 중에서도 cssfontstack.com 웹사이트는 Windows와 macOS에서 사용할 수 있는 웹 안전 폰트 목록을 통계와 함께 제공하므로, 폰트 선택에 큰 도움을 줍니다.

💡 강사의 실무 팁! (웹 폰트 Web fonts)
"그럼 저 몇 개 안 되는 폰트만 써야 하나요? 예쁜 폰트 쓰고 싶은데요!"
당연히 아닙니다! 웹페이지를 불러올 때 사용자의 기기에 없는 커스텀 폰트를 인터넷에서 다운로드하게 만드는 방법이 바로 웹 폰트(Web fonts)입니다. (Google Fonts 등이 대표적이죠.) 아주 널리 쓰이는 방법이며, 이 모듈의 후반부인 별도의 문서에서 아주 자세히 다룰 예정이니 기대해 주세요!

기본 폰트 (Default fonts)

CSS는 폰트를 위해 5가지 '일반적인 이름(generic names)'을 정의해 두었습니다: serif, sans-serif, monospace, cursive, fantasy 입니다. 이들은 매우 포괄적인 개념이라서, 이 이름들을 썼을 때 실제로 화면에 나타나는 폰트의 모양은 브라우저마다, 운영체제마다 모두 다릅니다. 이 일반적인 이름들은 개발자가 지정한 폰트를 찾을 수 없을 때 브라우저가 최선을 다해 "그나마 비슷한 느낌의 폰트를 제공"하도록 하는 최후의 보루(worst case scenario) 역할을 합니다.

serif, sans-serif, monospace는 결과물이 꽤 예측 가능하고 무난합니다. 반면 cursive와 fantasy는 어떻게 보일지 예측하기 매우 힘드므로 사용 시 꼭 여러 환경에서 테스트해 볼 것을 권장합니다.

이 5가지 이름의 정의는 다음과 같습니다:

용어 (Term)	정의 (Definition)	예시 (Example)
`serif`	세리프(serif, 획의 끝부분에 있는 장식적인 삐침)가 있는 폰트. 주로 신문이나 책 본문에 많이 쓰입니다. (예: 바탕체, 명조체)	My big red elephant
`sans-serif`	세리프가 없는 폰트 (sans는 프랑스어로 '없다'는 뜻입니다). 모던하고 깔끔한 느낌을 주어 웹에서 가장 많이 쓰입니다. (예: 돋움체, 맑은 고딕)	My big red elephant
`monospace`	모든 글자의 가로 너비(폭)가 동일한 폰트. 코드를 작성할 때 들여쓰기를 맞추기 위해 주로 사용됩니다.	My big red elephant
`cursive`	손으로 쓴 것 같은 흘림체나 필기체를 모방한 폰트. 획이 이어져 있는 느낌을 줍니다.	My big red elephant
`fantasy`	독특하고 장식적인 요소가 강한 폰트. 제목 같은 곳에 제한적으로 씁니다.	My big red elephant

폰트 스택 (Font stacks)

여러분이 사용하려는 폰트가 사용자 기기에 무조건 있다고 보장할 수 없기 때문에 (심지어 웹 폰트조차 네트워크 오류로 로드에 실패할 수 있죠!), 브라우저가 선택할 수 있도록 여러 개의 폰트를 후보로 제공하는 폰트 스택(font stack)을 설정해야 합니다. 쉼표(,)로 여러 개의 폰트 이름을 구분하여 작성하면 됩니다. 예를 들어:

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

이런 경우, 브라우저는 리스트의 맨 앞부터 시작해서 해당 폰트가 사용자의 컴퓨터에 있는지 확인합니다. 만약 "Trebuchet MS"가 있다면 그걸 적용하고, 없다면 다음 후보인 "Verdana"를 찾습니다.

💡 강사의 실무 팁!
폰트 스택의 맨 마지막에는 반드시 sans-serif나 serif 같은 일반(generic) 폰트 이름을 적어두는 것이 매우 훌륭한 습관입니다! 이렇게 하면 앞에 적어둔 특정 폰트가 전부 실패하더라도, 브라우저가 최소한 비슷한 '분위기'의 시스템 기본 폰트로 렌더링해 줄 수 있기 때문입니다. 만약 이걸 생략하면 브라우저가 전혀 엉뚱한 스타일(예: 명조체)을 렌더링해버릴 수도 있습니다.

⚠️ 주의사항 (Warning):
폰트 이름에 공백(띄어쓰기)이 포함되어 있다면(예: Trebuchet MS), 이름 전체를 큰따옴표나 작은따옴표로 감싸주어야 합니다. 공백뿐만 아니라 하이픈(-) 외의 기호나 숫자가 포함된 경우에도 따옴표로 감싸는 것을 권장합니다.
반대로 sans-serif나 fantasy 같은 CSS 일반 키워드는 절대 따옴표로 감싸면 안 됩니다. 따옴표로 감싸면 브라우저가 이를 CSS 키워드가 아니라 진짜 "sans-serif"라는 이름의 특정 폰트를 찾으라는 뜻으로 오해하기 때문입니다.

font-family 예제 실습

앞에서 본 Tommy the cat 예제에 산세리프(sans-serif) 폰트를 입혀볼까요?

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

이제 텍스트가 다음과 같이 깔끔하게 렌더링될 것입니다:

(브라우저 렌더링 화면: 빨간색 산세리프 폰트로 렌더링된 단락)

폰트 크기 (Font size)

이전 모듈의 CSS 값과 단위(CSS values and units) 글에서 길이와 크기 단위를 복습했습니다. font-size 속성을 사용해 폰트 크기를 설정할 때 대부분의 길이 단위와 백분율(%)을 사용할 수 있습니다. 하지만 텍스트 크기를 정할 때 실무에서 가장 흔하게 쓰이는 단위는 다음 세 가지입니다:

px (픽셀): 텍스트의 높이를 픽셀 수치로 정확하게 지정합니다. 이는 절대 단위(absolute unit)로, 어떤 상황에서든 거의 항상 똑같은 크기의 픽셀로 계산되어 화면에 그려집니다.
em (엠): 1em은 '현재 스타일링 중인 요소의 부모 요소에 설정된 폰트 크기'와 같습니다. (더 정확히 말하면 부모 폰트의 대문자 'M'의 너비를 의미합니다.) 요소가 깊게 중첩될수록 em 단위가 곱해지기 때문에 크기를 계산하기가 상당히 까다로워질 수 있습니다. 하지만 익숙해지면 전체 웹사이트의 폰트부터 여백까지 em으로 비례하게 맞출 수 있어 아주 강력합니다.
rem (렘): em과 똑같이 작동하지만, 부모 요소가 아니라 문서의 루트 요소(root element, 즉 <html>)의 폰트 크기를 기준으로 삼습니다. 그래서 중첩에 상관없이 수학적 계산이 훨씬 훨씬 쉬워집니다!

요소의 font-size는 기본적으로 부모 요소로부터 '상속'됩니다. 이 상속의 시작점은 문서의 뿌리인 <html> 요소이며, 브라우저들은 기본적으로 루트 요소의 font-size를 16px로 설정해 둡니다. 그래서 별도로 크기를 건드리지 않은 <p> 태그 안의 글자들은 최종적으로 16px 크기로 보이게 되죠. 반면 <h1> 같은 요소는 브라우저가 기본적으로 2em이라는 크기를 줍니다. 부모(16px)의 2배이므로, 최종 크기는 32px이 되는 것입니다.

중첩된 요소들의 폰트 크기를 em으로 다루기 시작하면 수학 계산이 골치 아파집니다. 예를 들어, <article> 요소의 font-size를 1.5em (16 * 1.5 = 24px)으로 설정해 두었는데, 그 안의 <p> 요소 폰트 크기를 딱 20px로 만들고 싶다면 em 값을 어떻게 줘야 할까요?

<article>
  <p>My paragraph</p>
  </article>

정답은 20 / 24를 계산해서 약 0.83333333em을 줘야 합니다. 정말 복잡하죠?

💡 강사의 실무 팁! (rem을 사랑하세요!)
이런 계산의 고통에서 벗어나기 위해, 현대 웹 프론트엔드 실무에서는 폰트 크기 지정에 압도적으로 rem을 선호합니다. 루트(html)가 16px이라면 언제 어디서나 1rem = 16px, 2rem = 32px로 일정하기 때문이죠! em은 아이콘 크기나 컴포넌트 내부 여백을 폰트 크기에 비례하게 맞출 때만 제한적으로 사용하는 것을 추천합니다.

폰트 스타일, 굵기, 텍스트 변환 및 장식 (Font style, font weight, text transform, and text decoration)

CSS는 텍스트의 시각적 무게감이나 강조를 변경하기 위한 네 가지 아주 유용한 속성을 제공합니다.

font-style: 이탤릭체(기울임)를 켜거나 끕니다. 자주 쓰이는 값은 다음과 같습니다.
- normal: 이탤릭체를 해제하고 일반 텍스트로 되돌립니다.
- italic: 폰트 자체에 내장된 이탤릭체 디자인을 사용합니다.
- oblique: 내장된 이탤릭체가 없을 때 일반 폰트를 강제로 기울여서(slant) 흉내 냅니다.
font-weight: 폰트의 굵기를 설정합니다. 다양한 굵기 변형(light, normal, bold, extrabold 등)이 지원되는 폰트라면 여러 값을 쓸 수 있지만, 가장 많이 쓰는 것은 normal과 bold입니다.
- normal, bold: 일반 굵기, 두꺼운 굵기.
- lighter, bolder: 부모 요소의 굵기를 기준으로 한 단계 얇게 하거나 두껍게 합니다.
- 100 – 900: 숫자로 세밀하게 굵기를 조정합니다. (예: 400은 normal, 700은 bold와 같습니다.)
text-transform: 텍스트의 대/소문자를 시각적으로 변환합니다. (HTML 원본 텍스트는 건드리지 않아요!)
- none: 변환을 방지합니다.
- uppercase: 모든 글자를 대문자로 만듭니다.
- lowercase: 모든 글자를 소문자로 만듭니다.
- capitalize: 각 단어의 첫 글자만 대문자로 만듭니다.
text-decoration: 텍스트에 장식 선을 긋습니다. 실무에서는 보통 <a> 태그의 기본 밑줄을 없앨 때 none으로 가장 많이 씁니다.
- none: 적용된 장식을 지웁니다.
- underline: 밑줄을 긋습니다.
- overline: 윗줄을 긋습니다.
- line-through: 취소선(중앙선)을 긋습니다.

💡 강사의 실무 팁!
버튼이나 배지의 텍스트를 모두 대문자로 보여주고 싶을 때, HTML에 일일이 대문자로 타이핑하지 마세요! 스크린 리더기가 약어로 오해해서 알파벳을 하나하나 끊어 읽을 수 있습니다. HTML은 정상적으로 소문자 혼용으로 적고, CSS에서 text-transform: uppercase;를 적용하는 것이 훌륭한 웹 표준 방식입니다!

여러 장식을 한꺼번에 적용하고 싶다면 text-decoration: underline overline 처럼 띄어쓰기로 여러 값을 줄 수도 있습니다. 또한 선의 모양(실선, 물결 등)이나 색상도 조작할 수 있으니(예: text-decoration: line-through red wavy) 다양하게 실험해 보세요!

이번에는 예제에 스타일을 추가해 볼까요?

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem; /* html이 10px이니 50px이 됩니다 */
  text-transform: capitalize; /* 첫 글자들을 대문자로! */
}

h1 + p {
  font-weight: bold; /* 제목 바로 밑 첫 문단을 굵게! */
}

p {
  font-size: 1.5rem; /* 15px */
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

텍스트 그림자 (Text drop shadows)

text-shadow 속성을 사용하면 텍스트에 매력적인 그림자 효과를 줄 수 있습니다. 최대 4개의 값을 설정할 수 있습니다:

text-shadow: 4px 4px 5px red;

값의 의미는 순서대로 다음과 같습니다:
1. 수평(가로) 오프셋: 텍스트 원본에서 오른쪽으로 얼마나 떨어질지 정합니다. 음수면 왼쪽으로 이동합니다. (필수 값)
2. 수직(세로) 오프셋: 아래쪽으로 얼마나 떨어질지 정합니다. 음수면 위로 이동합니다. (필수 값)
3. 흐림 반경 (Blur radius): 값이 커질수록 그림자가 더 넓고 흐릿하게 번집니다. 생략하면 0(흐림 없음, 날카로운 그림자)이 됩니다.
4. 그림자 색상: 아무 색상이나 지정할 수 있습니다. 생략하면 글자의 현재 color 값을 따라갑니다.

다중 그림자 (Multiple shadows)

그림자 값들을 쉼표(,)로 구분해서 나열하면 텍스트 하나에 여러 겹의 그림자를 적용할 수 있습니다! 네온사인 효과나 입체적인 3D 텍스트를 만들 때 아주 유용하죠.

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

📝 참고사항 (Note):
텍스트 그림자에 대한 더 멋지고 신기한 예제들을 보고 싶으시다면 Sitepoint의 Moonlighting with CSS text-shadow 문서를 참고해 보세요!

텍스트 레이아웃 (Text layout)

이제 폰트의 시각적인 스타일을 넘어, 텍스트가 박스 안에서 어떻게 배치되는지를 결정하는 레이아웃 속성들을 알아보겠습니다.

텍스트 정렬 (Text alignment)

text-align 속성은 텍스트가 콘텐츠 박스 안에서 어떻게 정렬될지를 제어합니다. 워드 프로세서(한글이나 워드)에서 쓰는 정렬 기능과 똑같다고 보시면 됩니다.

left: 왼쪽 정렬.
right: 오른쪽 정렬.
center: 가운데 정렬.
justify: 양쪽 정렬. 모든 줄의 가로폭이 동일해지도록 단어 사이의 간격을 늘립니다.

💡 강사의 실무 팁! (양쪽 정렬의 위험성)
웹에서 justify(양쪽 정렬)를 사용할 때는 엄청나게 조심하셔야 합니다! 특히 영문이나 긴 단어가 많은 글에 적용하면 단어들 사이에 커다란 틈이 뻥뻥 뚫리는 현상(일명 '하얀 강물, rivers of white space')이 생겨서 가독성을 심각하게 해칩니다. 꼭 쓰셔야 한다면 hyphens 속성을 함께 켜서 긴 단어가 줄바꿈 될 때 하이픈(-)으로 적절히 끊어지도록 만들어주세요.

예를 들어 우리 예제의 <h1> 제목을 중앙 정렬해 보겠습니다.

h1 {
  text-align: center;
}

줄 높이 (Line height)

line-height 속성은 텍스트 한 줄의 '높이(간격)'를 설정합니다. 이 속성은 길이 단위(px, em 등)도 받을 수 있지만, 가장 추천하는 방식은 단위 없는(unitless) 숫자(배수)를 사용하는 것입니다.

단위 없이 숫자를 주면 현재 요소의 font-size에 그 숫자를 곱한 값이 줄 높이가 됩니다. 본문 텍스트는 줄과 줄 사이에 적절한 공간이 있을 때 훨씬 편안하게 읽힙니다. 보통 추천하는 줄 높이는 1.5에서 2 사이입니다. 폰트 크기의 1.6배로 줄 간격을 주려면 이렇게 작성합니다.

p {
  line-height: 1.6;
}

💡 강사의 실무 팁! (왜 단위를 안 쓰는 게 좋을까요?)
만약 line-height: 1.5em; 처럼 단위를 써서 부모에 지정해두면, 자식 요소는 계산이 '완료된 픽셀 값'을 상속받아버립니다. 자식 요소에서 폰트 크기를 엄청 크게 키우더라도 줄 간격은 부모의 작은 픽셀 값에 고정되어서 글자들이 위아래로 다 겹쳐버리는 대참사가 일어납니다! 반면에 1.5 처럼 단위 없이 적어주면 자식 요소가 각자 자신의 폰트 크기에 맞게 그때그때 1.5배를 다시 계산해서 완벽한 줄 간격을 유지하게 됩니다.

글자 및 단어 간격 (Letter and word spacing)

letter-spacing (자간)과 word-spacing (어간) 속성을 사용하면 글자 사이, 단어 사이의 여백을 미세하게 조절할 수 있습니다.

자주 쓰지는 않겠지만, 대문자 제목의 느낌을 모던하게 살리거나 밀도가 꽉 막힌 폰트의 가독성을 높일 때 유용합니다.

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

(첫 번째 줄의 글자와 단어 사이사이가 눈에 띄게 벌어질 것입니다.)

더 알아두면 좋은 훌륭한 속성들 (Other properties worth looking at)

위에서 배운 것들만으로도 웹페이지의 텍스트를 시작하기엔 충분합니다. 하지만 CSS에는 텍스트를 미세하게 조작할 수 있는 엄청난 속성들이 더 숨어있습니다! 위의 속성들이 손에 익었다면 아래 속성들도 꼭 한 번씩 MDN에서 찾아보고 테스트해 보시길 권장합니다.

추가 폰트 스타일:

font-variant: 스몰 캡스(small caps, 소문자 크기의 대문자) 등으로 전환할 수 있습니다.
그 외에도 OpenType 폰트의 세밀한 특징을 켜고 끄는 다양한 font-variant-* 속성들, 폰트의 렌더링을 최적화하는 text-rendering 등이 있습니다.

추가 텍스트 레이아웃 스타일:

text-indent: 단락의 첫 줄을 얼마나 들여쓰기할지(원고지처럼!) 정합니다.
text-overflow: 텍스트가 박스를 넘쳐흐를 때 잘리는 부분을 말줄임표(...) 등으로 처리합니다. 실무에서 정말 많이 씁니다!
white-space: HTML 코드 안에 있는 띄어쓰기나 줄바꿈(엔터)을 화면에 그대로 보여줄지 무시할지 결정합니다.
word-break, overflow-wrap: 단어가 너무 길어서 박스를 뚫고 나갈 때 강제로 단어를 쪼개어 줄바꿈을 할지 말지 결정합니다. 이것도 실무 레이아웃 붕괴를 막는 필수템입니다!

폰트 단축 속성 (Font shorthand)

이 수많은 폰트 속성들을 매번 한 줄씩 따로 적으려면 귀찮겠죠? CSS는 이 모든 걸 한 줄로 묶어버리는 단축 속성인 font를 제공합니다.

단, 작성할 때 순서를 지켜야 합니다:
font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family 순으로 적습니다.

이 중에서 font-size와 font-family는 무조건 필수로 들어가야 하며, font-size와 line-height를 같이 적고 싶다면 그 사이에 슬래시(/)를 꼭 넣어야 합니다.

자, 모든 게 들어간 종합 세트를 볼까요?

font: italic normal bold normal 3em/1.5 "Helvetica", "Arial", sans-serif;

(해석: 이탤릭체로, 볼드 굵기로, 사이즈는 3em이고 줄 간격은 1.5배이며, 폰트는 Helvetica나 Arial을 쓰겠다!)

텍스트 스타일링 실습하기 (Playing with styling text)

자, 이제 여러분의 차례입니다. 이번에는 정해진 연습 문제가 없습니다. MDN Playground 박스에서 지금까지 배운 폰트와 텍스트 레이아웃 속성들을 마음껏 이리저리 바꿔가며 놀아보세요. 여러분의 창의력을 뽐낼 시간입니다!

아래 코드 블록에서 "Play" 버튼을 눌러보세요.
비어있는 p { } 규칙 안에 다양한 선언을 추가해서 텍스트의 디자인을 완전히 뒤바꿔 보세요.

실수해도 괜찮습니다. 'Reset' 버튼을 누르면 언제든 처음으로 돌아가니까요!

<p>Some sample text for your delight</p>

p {
  /* 여기에 여러분만의 스타일을 마음껏 적어보세요! */
}

요약 (Summary)

이번 글을 통해 텍스트를 아름답게 꾸미며 즐거운 시간을 보내셨길 바랍니다! 다음 글에서는 HTML에서 굉장히 자주 쓰이는 리스트(<ul>, <ol>)를 어떻게 예쁘게 스타일링하는지 그 모든 노하우를 알려드리겠습니다. 기대해 주세요!

더 알아보기 (See also)

CSS font-family 속성의 모든 것 (외부 링크)
웹 안전 폰트 실습, Scrimba MDN 학습 파트너