텍스트 스타일

🎯 학습 목표

이 강을 마치면 여러분은 글자의 크기·굵기·서체를 바꾸고, 줄 간격·정렬·밑줄까지 다루어 읽기 좋고 보기 좋은 글을 만들 수 있게 됩니다. 웹 페이지의 대부분은 글자로 이루어져 있으므로, 텍스트를 잘 다루는 것은 좋은 디자인의 기본 중의 기본입니다. 이번 강에서 자주 쓰는 텍스트 속성들을 한번에 정리합니다.

구체적으로는 세 가지를 배웁니다. 첫째, 글자의 크기·굵기·서체를 정하는 속성을 익힙니다. 둘째, 읽기 편함을 좌우하는 줄 간격을 살펴봅니다. 셋째, 정렬과 밑줄 등 텍스트 꾸미기를 파악합니다.

🔠 글자의 크기와 굵기 — font-size와 font-weight

이 섹션에서는 글자의 크기와 굵기를 다루는 속성을 살펴보겠습니다.

먼저 크기는 지난 강에서도 나온 font-size로 정합니다. font-size: 20px;처럼 크기와 단위를 적습니다. 다음으로 굵기는 font-weight로 정합니다. 값으로는 normal(보통)과 bold(굵게)를 주로 쓰고, 숫자로도 지정할 수 있습니다.

h1 {
  font-size: 32px;
  font-weight: bold;
}
p {
  font-size: 16px;
  font-weight: normal;
}

이렇게 하면 제목은 크고 굵게, 문단은 보통 크기와 굵기로 표시됩니다. 굵기를 숫자로 쓸 때는 100부터 900까지(100이 가장 가늘고 900이 가장 굵음) 지정할 수 있으며, 이 경우 font-weight: 700;이 대략 bold에 해당합니다. 크기와 굵기를 조절하는 것만으로도 글의 강약(위계)을 훨씬 뚜렷하게 만들 수 있습니다.

✍️ 서체 정하기 — font-family

이 섹션에서는 글자의 모양, 즉 서체(글꼴)를 정하는 font-family를 살펴보겠습니다.

font-family는 글자를 어떤 서체로 표시할지 정합니다. 그런데 여기에는 특별한 관례가 있습니다. 하나의 서체만 적는 것이 아니라, 여러 개를 우선순위대로 나열한다는 것입니다.

body {
  font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
}

이렇게 쉼표로 여러 서체를 적으면, 브라우저는 앞에서부터 차례로 시도합니다. 첫 번째 서체가 사용자 컴퓨터에 없으면 두 번째를, 그것도 없으면 세 번째를 씁니다. 이렇게 대비책을 나열하는 것을 글꼴 스택(font stack)이라 합니다. 사용자마다 설치된 글꼴이 다르기 때문에, 이런 대비가 필요한 것입니다.

맨 마지막에 적은 sans-serif는 특정 서체가 아니라 서체의 종류(계열)를 뜻합니다. sans-serif는 획의 끝에 장식이 없는 고딕 계열, serif는 장식이 있는 명조 계열입니다. 앞의 서체들이 모두 없어도 최소한 이 계열의 기본 글꼴로 표시하라는 최후의 안전장치입니다. 그래서 font-family의 맨 끝에는 이런 계열 이름을 적어 주는 것이 좋습니다.

📖 줄 간격 — line-height

이 섹션에서는 글의 읽기 편함을 크게 좌우하는 줄 간격을 살펴보겠습니다.

여러 줄로 된 글에서 줄과 줄 사이의 간격은 읽기 편함에 큰 영향을 줍니다. 줄이 너무 붙어 있으면 답답하고, 너무 벌어지면 산만합니다. 이 줄 간격을 정하는 것이 line-height입니다.

p {
  line-height: 1.6;
}

여기서 1.6은 글자 크기의 1.6배만큼 줄 높이를 준다는 뜻입니다. 이렇게 단위 없는 숫자로 적으면 글자 크기에 비례해 자동으로 적절한 간격이 잡혀 편리합니다. 본문 글의 경우 대략 1.5에서 1.7 사이가 읽기 좋다고 알려져 있습니다. 지난 강에서 '크기 값에는 단위를 붙인다'고 했는데, line-height는 대표적인 예외라 단위 없이 숫자만 쓰는 것이 권장됩니다. 사소해 보이지만, 적절한 줄 간격은 글의 가독성을 눈에 띄게 높여 줍니다.

🎯 정렬과 밑줄 — text-align과 text-decoration

이 섹션에서는 텍스트를 배치하고 꾸미는 두 속성을 살펴보겠습니다.

먼저 정렬은 text-align으로 정합니다. 값으로 left(왼쪽), center(가운데), right(오른쪽), justify(양쪽 맞춤)를 쓸 수 있습니다.

h1 { text-align: center; }  /* 제목 가운데 정렬 */
p  { text-align: left; }    /* 본문 왼쪽 정렬 */

제목은 가운데 정렬로 강조하고, 긴 본문은 왼쪽 정렬로 두는 것이 일반적입니다. 다음으로 밑줄 등의 장식은 text-decoration으로 다룹니다. underline은 밑줄을 넣고, none은 밑줄을 없앱니다.

a {
  text-decoration: none;
}

이 코드는 특히 자주 쓰입니다. 4강에서 배웠듯 링크(<a>)에는 기본적으로 밑줄이 붙는데, 디자인상 이 밑줄을 없애고 싶을 때가 많기 때문입니다. text-decoration: none;으로 링크의 밑줄을 깔끔하게 제거할 수 있습니다. 반대로 강조하고 싶은 글자에 underline으로 밑줄을 더할 수도 있습니다.

이 밖에 알아 두면 좋은 텍스트 속성으로 글자 간격을 조절하는 letter-spacing이 있습니다. letter-spacing: 1px;처럼 값을 주면 글자와 글자 사이가 그만큼 벌어집니다. 제목처럼 짧고 굵은 글자에 살짝 간격을 주면 한결 시원하고 세련된 느낌을 줄 수 있습니다. 다만 본문처럼 긴 글에 과하게 주면 오히려 읽기 불편해지므로, 제목이나 짧은 문구에 은은하게 쓰는 것이 요령입니다. 이렇게 크기·굵기·서체·줄 간격·정렬·간격까지 조합하면, 같은 글이라도 훨씬 읽기 좋고 보기 좋게 다듬을 수 있습니다.

⚠️ 자주 하는 실수

이 섹션에서는 텍스트 스타일을 다룰 때 흔한 실수를 정리하겠습니다.

첫 번째, font-family에 계열 이름을 빠뜨리는 것입니다. 특정 서체만 적고 sans-serif 같은 계열 이름을 안 붙이면, 그 서체가 없는 환경에서 엉뚱한 기본 글꼴이 나올 수 있습니다. 맨 끝에는 항상 계열 이름을 넣으세요.

두 번째, 서체 이름의 따옴표를 빠뜨리는 것입니다. "Noto Sans KR"처럼 이름에 공백이 있는 서체는 따옴표로 감싸야 합니다. 따옴표가 없으면 이름이 제대로 인식되지 않을 수 있습니다.

세 번째, line-height에 불필요한 단위를 붙이는 것입니다. 줄 간격은 1.6처럼 단위 없는 숫자로 쓰는 것이 가장 유연하고 권장됩니다. px 등을 붙이면 글자 크기가 바뀔 때 간격이 어색해질 수 있습니다.

📝 핵심 요약

이번 강에서는 텍스트 스타일을 배웠습니다.

• 크기와 굵기 — font-size로 크기를, font-weight로 굵기(normal·bold 또는 100~900)를 정해 글의 강약을 만듭니다.
• font-family — 여러 서체를 우선순위대로 나열하고(글꼴 스택), 맨 끝에 sans-serif 같은 계열 이름을 안전장치로 둡니다.
• line-height — 줄 간격으로, 단위 없는 숫자(예: 1.6)로 지정하며 본문은 1.5~1.7이 읽기 좋습니다.
• 정렬과 장식 — text-align으로 정렬(center 등), text-decoration으로 밑줄을 넣거나(none으로) 없앱니다.

이제 글자를 자유롭게 꾸밀 수 있게 되었습니다. 다음 강에서는 CSS 배치의 가장 중요한 개념인 박스 모델을 배워, 모든 요소가 가진 여백과 테두리의 원리를 이해하겠습니다. 이것은 이후 레이아웃의 토대가 됩니다. 다음 강 「박스 모델」에서 이어가겠습니다.

📚 참고 자료

• font-family — MDN Web Docs
• line-height — MDN Web Docs
• 텍스트 스타일링 기초 — MDN Web Docs