CSS 속성으로 텍스트 스타일링하기

텍스트와 관련된 핵심적인 CSS 속성, font-weight, font-size, line-height에 대해 알아보겠습니다.

font-weight

글자의 두께를 조정하는 데 사용합니다.

값으로는 normal (기본값), bold (굵게), lighter (더 얇게), 숫자(400, 700 등) 등이 사용됩니다.

글자의 크기를 조정하는 데 사용합니다.

글자의 크기를 픽셀(px), 포인트(pt), 백분율(%) 등의 단위로 지정할 수 있습니다.

스트가 여러 줄로 이루어진 경우 각 줄 사이의 간격을 조절합니다.

line-height를 비유하면, "한 줄의 텍스트가 얼마나 높게 올라가고 내려가는지"와 같은 개념입니다.

값으로는 픽셀(px), 숫자, 백분율(%) 등이 사용됩니다.

예를 들어, 다음과 같은 CSS 코드는 글자의 두께를 굵게(bold)하게, 글자의 크기를 16픽셀(px)로, 행의 높이를 1.5배(line-height: 1.5)로 설정합니다.

CSS 텍스트 스타일링
p {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

이렇게 설정하면 <p> 태그에 적용된 글자들이 굵게 보이고, 크기가 16픽셀로 나타나며, 행 간격이 1.5배로 설정됩니다.

이제 첫 번째 텍스트를 나타내는 <h1> 태그의 텍스트 스타일을 변경해보겠습니다.

h1 태그에 intro 클래스 적용
<h1 class="intro">안녕하세요!</h1>

intro 클래스 정의
.intro {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.8;
}

h1 태그 내 글자의 두께가 얇아지고, 글자 크기가 조금 더 작아진 것을 확인할 수 있습니다.