텍스트 스타일링을 위한 10가지 CSS 속성

아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 구성 요소인데요. 이번 포스팅에서는 웹에서 텍스트를 스타일하기 위해서 자주 사용되는 대표적인 CSS 속성을 정리해보겠습니다.

텍스트 색상: color

CSS에서 정말 자주 사용되는 color 속성은 텍스트 색상을 지정하는데 사용됩니다. color 속성에는 여러 가지 타입의 값을 설정해줄 수 있는데요. 예를 들어, blue와 같은 명명된(named) 색상, #ff0000와 같은 색상 코드, 그리고 rgb(), hsl()과 같은 색상 함수도 사용할 수 있습니다.

참고로 color 속성은 다른 텍스트 관련 속성들 처럼 font-나 text-로 시작하지 않아서 CSS를 처음 접하시는 분들을 햇갈리게 하기도 합니다.

p:first-of-type {
  color: blue;
}

p:last-of-type {
  color: #ff0000;
}

텍스트 크기: font-size

font-size 속성은 텍스트의 크기를 조절할 때 사용합니다. pt나 px와 같은 절대 단위를 사용할 수도 있고 rem나 em과 같은 상대 단위를 사용할 수도 있는데요. 다양한 크기의 화면을 지원하기 위한 적응형(adaptive) 웹디자인을 할 때는 일반적으로 상대 단위가 유리합니다.

p:first-of-type {
  font-size: 12px;
}

p:last-of-type {
  font-size: 1.5rem;
}

텍스트 글꼴: font-family

텍스트의 글꼴 또는 서체를 변경할 때는 font-family 속성을 사용하는데요. 속성값으로는 사용자의 컴퓨터에 미리 설치된 시스템 폰트나 웹에서 다운로드 받을 수 있는 웹폰트를 사용할 수 있습니다.

글꼴/서체 관련 포스팅는 연관 태그를 참고 바랍니다.

p:first-of-type {
  font-family: serif;
}

p:last-of-type {
  font-family: monospace;
}

텍스트 굵기: font-weight

텍스트의 굵기를 조정할 때는 font-weight 속성을 사용하는데요. 300과 같은 숫자나 bold와 같은 키워드를 속성값으로 사용할 수 있습니다. 사용하는 글꼴에서 해당 텍스트 굵기를 지원하지 않으면 브라우저에서 임의로 효과를 만들어주는데 부자연스러운 경우가 있으니 주의 바랍니다.

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: bold;
}

텍스트 스타일: font-style

이탤릭체와 같이 기본체에서 살짝 변형된 스타일을 사용하고 싶을 때는 font-style 속성을 사용하는데요. font-weight 속성과 마찬가지로 사용하는 글꼴에서 해당 스타일을 지원하지 않으면 브라우저에서 임의로 효과를 내줍니다.

p:first-of-type {
  font-style: italic;
}

p:last-of-type {
  font-style: oblique;
}

텍스트 장식: text-decoration

text-decoration 속성을 사용하면 텍스트에 간단한 장식도 추가할 수 있는데요. 보통 텍스트에 밑줄이나 취소선을 그리기 위해서 사용합니다.

p:first-of-type {
  text-decoration: underline;
}

p:last-of-type {
  text-decoration: line-through;
}

텍스트 변형: text-transform

CSS을 이용해서 텍스트의 대소문자 변환과 같은 간단한 변형도 줄 수도 있는데요. 바로, text-transform 속성을 이용하면 됩니다.

p:first-of-type {
  text-transform: lowercase;
}

p:last-of-type {
  text-transform: uppercase;
}

텍스트 정렬: text-align

text-align 속성을 사용하면 좌, 우, 중앙 등 다양한 방향으로 텍스트 정렬할 수 있습니다.

p:first-of-type {
  text-align: right;
}

p:last-of-type {
  text-align: center;
}

글자 간격: letter-spacing

letter-spacing 속성은 글자 간의 간격을 조정하기 위해서 사용되는데요. font-size 속성과 마찬가지로 절대 단위와 상대 단위를 모두 속성값으로 사용할 수 있습니다.

p:first-of-type {
  letter-spacing: -1px;
}

p:last-of-type {
  letter-spacing: 0.25rem;
}

행 높이: line-height

마지막으로 행 높이를 설정할 때는 line-height 속성을 사용하는데요. 특이하게도 단위없이 숫자로 설정할 수 있으며 현재 font-size 값 기준으로 상대값이 적용됩니다. 예를 들어, 현재 font-size가 16px일 때, line-height를 2로 설정하면, 32px의 행 높이가 설정됩니다. 그리고 em과 같은 상대값으로도 설정이 가능합니다.

p:first-of-type {
  line-height: 1em;
}

p:last-of-type {
  line-height: 1.6;
}

마치면서

지금까지 CSS에서 텍스트 스타일을 위해 사용되는 color, font-size, font-family, font-weight, font-style, text-decoration, text-transform, text-align, letter-spacing, line-height 속성에 대해서 알아보았습니다. 이 10가지 속성만 잘 조합하시면 왠만한 텍스트 스타일은 모두 가능하오니, 이 기회에 잘 정리해두셨다가 적지적소에 활용하실 수 있으셨으면 좋겠습니다.