[CSS] 텍스트 스타일링 (글꼴, 색상, 크기 등)

텍스트 스타일링은 CSS를 사용하여 웹 페이지의 텍스트에 다양한 스타일을 적용하는 것을 말합니다. 글꼴, 색상, 크기 등을 조절하여 텍스트를 눈에 띄게 만들거나 원하는 디자인으로 꾸밀 수 있습니다. 아래는 텍스트 스타일링에 대한 주요 내용입니다.

---

1. 글꼴(Font)

글꼴 스타일은 텍스트가 어떤 글꼴로 표시될지를 지정합니다. 웹 페이지에서 사용할 글꼴은 웹 브라우저에서 지원하는 것이어야 하며, 주로 웹 폰트를 사용하여 다양한 글꼴을 사용할 수 있습니다.

/* 글꼴 스타일링 예제 */
body {
    font-family: Arial, sans-serif;
}

위의 예제에서는 body 요소에 Arial 글꼴을 사용하고, 해당 글꼴이 사용할 수 없는 경우에는 대체 폰트인 sans-serif를 사용합니다.

---

2. 텍스트 색상(Color)

텍스트의 색상은 color 속성을 사용하여 지정합니다. 흔히 사용되는 색상 이름이나 16진수 코드, RGB 코드 등을 사용하여 텍스트의 색상을 조절할 수 있습니다.

/* 텍스트 색상 지정 예제 */
h1 {
    color: red;
}

p {
    color: #333333;
}

위의 예제에서는 h1 태그의 텍스트 색상을 빨간색으로, p 태그의 텍스트 색상을 진한 회색으로 지정하고 있습니다.

---

3. 텍스트 크기(Size)

텍스트 크기는 font-size 속성을 사용하여 지정합니다. 픽셀(px), 포인트(pt), em 등의 단위를 사용하여 텍스트의 크기를 조절할 수 있습니다.

/* 텍스트 크기 지정 예제 */
h2 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

위의 예제에서는 h2 태그의 텍스트 크기를 24px로, p 태그의 텍스트 크기를 16px로 지정하고 있습니다.

---

4. 텍스트 스타일(Style)

텍스트 스타일은 font-style 속성을 사용하여 지정할 수 있습니다. 일반 텍스트, 기울임 텍스트, 굵은 텍스트 등의 스타일을 적용할 수 있습니다.

/* 텍스트 스타일 지정 예제 */
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.bold {
    font-weight: bold;
}

위의 예제에서는 p 태그에 normal, italic, bold 클래스를 적용하여 각각 일반 텍스트, 기울임 텍스트, 굵은 텍스트 스타일을 지정하고 있습니다.

---

5. 텍스트 정렬(Alignment)

텍스트 정렬은 text-align 속성을 사용하여 지정합니다. 텍스트를 왼쪽, 오른쪽, 가운데로 정렬할 수 있습니다.

/* 텍스트 정렬 예제 */
h1 {
    text-align: center;
}

p {
    text-align: right;
}

위의 예제에서는 h1 태그의 텍스트를 가운데로, p 태그의 텍스트를 오른쪽으로 정렬하고 있습니다.

---

텍스트 스타일링은 웹 페이지를 디자인하는데 매우 중요한 요소입니다. CSS를 사용하여 글꼴, 색상, 크기, 스타일 등을 조절하여 웹 페이지의 텍스트를 눈에 띄게 만들거나 원하는 디자인으로 꾸밀 수 있습니다. 적절한 텍스트 스타일링을 통해 사용자의 시선을 끌어내고, 웹 페이지의 가독성과 전체적인 디자인을 향상시킬 수 있습니다. 계속해서 다양한 스타일링 기법을 익혀가며 멋진 웹 페이지를 구축해보시기 바랍니다!