[웹 디자인] 9일차: CSS 텍스트 스타일링

텍스트 스타일링이란?

CSS 텍스트 스타일링은 웹 페이지의 텍스트 모양과 레이아웃을 제어하는 데 사용됩니다. 텍스트 스타일링은 글꼴, 크기, 색상, 정렬 등을 포함하여 텍스트를 더 읽기 쉽게 만들고, 시각적으로 일관된 디자인을 제공합니다.

글꼴

글꼴 스타일링은 텍스트의 모양과 느낌을 정의하는 중요한 요소입니다.

글꼴 패밀리

• font-family: 글꼴 패밀리를 설정합니다. 쉼표로 구분하여 여러 글꼴을 지정할 수 있으며, 지정한 순서대로 사용 가능한 글꼴이 선택됩니다.

예제:

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
}

글꼴 크기

• font-size: 텍스트의 크기를 설정합니다. 절대 크기(px, pt 등)나 상대 크기(em, rem, %)로 지정할 수 있습니다.

예제:

p {
  font-size: 16px;
}

글꼴 두께

• font-weight: 텍스트의 두께를 설정합니다. 값으로 normal, bold, 숫자(100에서 900) 등을 사용할 수 있습니다.

예제:

h1 {
  font-weight: bold;
}

p {
  font-weight: 300;
}

글꼴 스타일

• font-style: 텍스트의 스타일을 설정합니다. 값으로 normal, italic, oblique 등을 사용할 수 있습니다.

예제:

em {
  font-style: italic;
}

글꼴 변형

• font-variant: 텍스트의 변형을 설정합니다. 값으로 normal, small-caps 등을 사용할 수 있습니다.

예제:

p {
  font-variant: small-caps;
}

텍스트 정렬

텍스트 정렬은 텍스트를 수평 방향으로 정렬하는 방법을 정의합니다.

• text-align: 텍스트의 수평 정렬을 설정합니다. 값으로 left, right, center, justify 등을 사용할 수 있습니다.

예제:

p {
  text-align: center;
}

텍스트 장식

텍스트 장식은 텍스트에 밑줄, 취소선, 윗줄 등을 추가하는 데 사용됩니다.

• text-decoration: 텍스트 장식을 설정합니다. 값으로 none, underline, overline, line-through 등을 사용할 수 있습니다.

예제:

a {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
}

텍스트 변형

텍스트 변형은 텍스트를 대문자, 소문자 등으로 변형하는 데 사용됩니다.

• text-transform: 텍스트 변형을 설정합니다. 값으로 none, capitalize, uppercase, lowercase 등을 사용할 수 있습니다.

예제:

h1 {
  text-transform: uppercase;
}

p {
  text-transform: capitalize;
}

글자 간격

글자 간격은 텍스트 내의 글자 사이의 간격을 제어하는 데 사용됩니다.

• letter-spacing: 텍스트 내의 글자 사이의 간격을 설정합니다.

예제:

p {
  letter-spacing: 2px;
}

줄 간격

줄 간격은 텍스트의 줄 사이의 간격을 제어하는 데 사용됩니다.

• line-height: 텍스트의 줄 간격을 설정합니다.

예제:

p {
  line-height: 1.5;
}

텍스트 들여쓰기

텍스트 들여쓰기는 단락의 첫 줄을 들여쓰는 데 사용됩니다.

• text-indent: 단락의 첫 줄의 들여쓰기를 설정합니다.

예제:

p {
  text-indent: 30px;
}

텍스트 색상

텍스트 색상은 텍스트의 색상을 지정합니다.

• color: 텍스트의 색상을 설정합니다.

예제:

p {
  color: #333333;
}

결론

CSS 텍스트 스타일링은 웹 페이지의 텍스트를 시각적으로 일관되게 만들고, 읽기 쉽게 만드는 데 중요한 역할을 합니다. 글꼴, 크기, 색상, 정렬, 장식, 변형 등을 적절히 사용하여 텍스트를 효과적으로 스타일링할 수 있습니다. 이번 글에서는 텍스트 스타일링에 대한 다양한 속성과 사용법에 대해 배웠습니다.

다음 글에서는 색상 및 배경에 대해 알아보겠습니다.

다음 글에서 만나요!