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

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

1. font-weight: 이 속성은 글자의 두께를 조정하는 데 사용합니다. 얇게 보이는 글자부터 굵게 보이는 글자까지 다양한 두께를 설정할 수 있습니다. 비유하자면, 글자의 font-weight는 "글자의 굵기"와 비슷한 개념입니다. 값으로는 normal (기본값), bold (굵게), lighter (더 얇게), 숫자(400, 700 등) 등이 사용됩니다.

2. font-size: 이 속성은 글자의 크기를 조정하는 데 사용합니다. 글자의 크기를 픽셀(px), 포인트(pt), 백분율(%) 등의 단위로 지정할 수 있습니다. font-size는 글자의 "크기"라고 생각하면 됩니다. 크기가 작을수록 작은 글자가 보이고, 크기가 클수록 큰 글자가 있습니다.

3. line-height: 이 속성은 행의 높이를 조정하는 데 사용합니다. 텍스트가 여러 줄로 이루어진 경우 각 줄 사이의 간격을 조절하는 역할을 합니다. 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 class="intro">안녕하세요!</h1>

intro 클래스 정의

.intro {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.8;
}

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