[HTML] 개념 정리 3 :: CSS로 텍스트 꾸미기

CSS로 글씨 꾸미기: 폰트 크기, 색상, 글꼴 설정 및 스타일링

CSS(Cascading Style Sheets)를 사용하면 HTML에서 텍스트의 크기, 색상, 글꼴을 쉽게 설정하고 꾸밀 수 있음. 다양한 CSS 속성을 조합하면 글씨를 더욱 세련되게 표현할 수 있음.

---

1. 폰트 크기 설정 (font-size)

font-size 속성을 사용하여 글씨 크기를 설정할 수 있음.

• 단위
  • px: 고정된 픽셀 크기 (예: 16px).
  • %: 부모 요소 기준 비율 (예: 120%).
  • em: 부모 요소의 글씨 크기를 기준으로 한 상대 단위.
  • rem: 루트 요소(html)의 글씨 크기를 기준으로 한 상대 단위.

예제

<p style="font-size:16px;">16px 크기의 텍스트</p>
<p style="font-size:120%;">120% 크기의 텍스트</p>

---

2. 폰트 색상 설정 (color)

color 속성을 사용하여 텍스트 색상을 지정할 수 있음.

• 표현 방법
  • 색상 이름: 예) red, blue
  • Hex 코드: 예) #FF5733
  • RGB: 예) rgb(255, 87, 51)
  • HSL: 예) hsl(0, 100%, 50%)

예제

<p style="color:blue;">파란색 텍스트</p>
<p style="color:#FF5733;">Hex 코드를 사용한 주황색 텍스트</p>
<p style="color:rgb(0, 255, 0);">RGB 값을 사용한 초록색 텍스트</p>

---

3. 글꼴 설정 (font-family)

font-family 속성으로 텍스트의 글꼴을 설정함.

• 사용법
  • 글꼴 이름을 쉼표로 나열하며, 우선순위를 설정.
  • 사용자가 없는 글꼴에 대비하여 기본 글꼴 지정.

예제

<p style="font-family:'Arial', sans-serif;">Arial 글꼴 텍스트</p>
<p style="font-family:'Georgia', serif;">Georgia 글꼴 텍스트</p>

---

4. 텍스트 스타일링 예제

(1) 강조 효과: 굵게(font-weight), 기울임(font-style)

<p style="font-weight:bold;">굵은 텍스트</p>
<p style="font-style:italic;">기울임 텍스트</p>

(2) 글자 간격: 자간(letter-spacing), 줄 간격(line-height)

<p style="letter-spacing:2px;">글자 간격이 넓어진 텍스트</p>
<p style="line-height:1.5;">줄 간격이 1.5배인 텍스트</p>

(3) 텍스트 정렬 (text-align)

<p style="text-align:center;">가운데 정렬된 텍스트</p>
<p style="text-align:right;">오른쪽 정렬된 텍스트</p>

(4) 텍스트 그림자 (text-shadow)

<p style="text-shadow:2px 2px 5px gray;">그림자가 있는 텍스트</p>

---

5. 종합 스타일링 예제

다양한 속성을 조합하여 텍스트를 꾸밀 수 있음.

<p style="
  font-size:20px;
  color:#FF5733;
  font-family:'Verdana', sans-serif;
  font-weight:bold;
  text-align:center;
  text-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
">
  스타일링된 텍스트 예제
</p>

---

결론

CSS를 사용하면 텍스트의 크기, 색상, 글꼴뿐만 아니라 다양한 스타일 효과를 적용할 수 있음. font-size, color, font-family와 같은 기본 속성을 이해하고, 이를 text-shadow와 같은 고급 속성과 조합하면 텍스트를 더욱 돋보이게 만들 수 있음.