텍스트 스타일

mskimdev·2026년 5월 19일

CSS

목록 보기

3/10

텍스트 스타일

디자인의 대부분은 텍스트다. 글자 크기, 굵기, 간격, 정렬 — 이것들만 잘 잡아도 페이지가 훨씬 읽기 편해진다. CSS에서 텍스트를 다루는 주요 속성들을 정리한다.

font-family — 글꼴

body {
  font-family: 'Noto Sans KR', Arial, sans-serif;
}

쉼표로 여러 폰트를 나열하면 앞에서부터 순서대로 적용 가능한 폰트를 찾는다. 마지막에는 항상 serif, sans-serif, monospace 같은 범용 폰트 패밀리를 넣어두는 것이 관례다. 앞의 폰트가 모두 없을 때 브라우저 기본 폰트를 대신 쓰게 된다.

웹 폰트를 사용하려면 <link>로 불러오거나 @font-face로 등록한다.

<!-- Google Fonts 사용 예 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

font-size — 글자 크기

p {
  font-size: 16px;   /* 픽셀 — 고정값 */
  font-size: 1rem;   /* 루트 요소(html) 기준 배수 */
  font-size: 1.2em;  /* 부모 요소 기준 배수 */
  font-size: 120%;   /* 부모 기준 퍼센트 */
}

px — 화면 픽셀 단위. 고정적이라 예측하기 쉽다
rem — HTML 루트의 font-size 기준. 브라우저 기본값은 16px이라 1rem = 16px
em — 부모 요소의 font-size 기준. 중첩되면 계산이 복잡해질 수 있다

반응형 디자인에서는 rem이 가장 다루기 편하다.

font-weight — 굵기

p {
  font-weight: normal;  /* 400 */
  font-weight: bold;    /* 700 */
  font-weight: 300;     /* 얇게 */
  font-weight: 900;     /* 아주 굵게 */
}

숫자는 100 단위로 100~900까지 사용한다. 폰트가 해당 굵기를 지원해야 실제로 적용된다.

font-style — 기울임

em {
  font-style: italic;   /* 기울임 */
  font-style: normal;   /* 기본 */
}

line-height — 줄 간격

p {
  line-height: 1.6;    /* 단위 없는 숫자 권장 — font-size의 1.6배 */
  line-height: 24px;
  line-height: 160%;
}

단위 없는 숫자(1.6)가 권장된다. 자식 요소에 상속될 때 부모의 픽셀값이 아닌 배수 자체가 상속되기 때문이다. 본문 텍스트는 1.5~1.8 정도가 읽기 편하다.

letter-spacing, word-spacing — 자간, 단어 간격

h1 {
  letter-spacing: 0.05em;  /* 자간 */
  word-spacing: 0.2em;     /* 단어 간격 */
}

text-align — 정렬

p {
  text-align: left;     /* 왼쪽 (기본) */
  text-align: right;    /* 오른쪽 */
  text-align: center;   /* 가운데 */
  text-align: justify;  /* 양쪽 맞춤 */
}

text-decoration — 장식선

a {
  text-decoration: none;          /* 밑줄 제거 */
  text-decoration: underline;     /* 밑줄 */
  text-decoration: line-through;  /* 취소선 */
  text-decoration: overline;      /* 윗줄 */
}

링크의 기본 밑줄을 없앨 때 text-decoration: none을 자주 쓴다.

text-transform — 대소문자 변환

h1 {
  text-transform: uppercase;   /* 전부 대문자 */
  text-transform: lowercase;   /* 전부 소문자 */
  text-transform: capitalize;  /* 각 단어 첫 글자 대문자 */
}

text-overflow — 넘치는 텍스트 처리

긴 텍스트가 지정된 너비를 넘어갈 때 처리 방법을 지정한다. 세 가지 속성을 함께 써야 동작한다.

.card-title {
  white-space: nowrap;       /* 줄바꿈 금지 */
  overflow: hidden;          /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;   /* 말줄임표(...) 표시 */
}

자주 쓰는 텍스트 스타일 조합

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  color: royalblue;
  text-decoration: none;
}