CSS text style property

콘텐츠의 가독성과 분위기를 결정하는 CSS 텍스트 스타일 속성들에 대해 알아보겠습니다.

텍스트 속성은 단순히 글자를 나열하는 것을 넘어, 문단의 흐름과 강조 사항을 정교하게 제어하는 역할을 합니다.

---

1. text-align (가로 정렬)

텍스트를 컨테이너 안에서 가로 방향으로 어떻게 정렬할지 결정합니다.

• left / right: 왼쪽 또는 오른쪽 정렬입니다.
• center: 가운데 정렬입니다.
• justify: 양끝 정렬로, 가로 너비에 맞춰 글자 사이 간격을 자동으로 조절합니다.

---

2. line-height (줄 간격)

텍스트 줄 사이의 수직 거리를 설정합니다.

• 특징: 보통 숫자(예: 1.5)를 입력하여 글자 크기의 배수로 지정합니다.
• 가독성: 너무 좁으면 가독성이 떨어지므로 보통 1.4 ~ 1.6 사이를 권장합니다.
• 꿀팁: 박스의 height와 동일한 값을 line-height에 주면 한 줄짜리 글자를 수직 중앙에 배치할 수 있습니다.

---

3. text-decoration (장식선)

텍스트에 선을 긋거나 제거하는 장식적인 효과를 줍니다.

• none: 선을 제거합니다. (<a> 태그의 기본 밑줄을 없앨 때 필수입니다.)
• underline: 밑줄을 긋습니다.
• line-through: 취소선을 긋습니다.
• overline: 글자 위에 선을 긋습니다.

---

4. text-shadow (글자 그림자)

글자에 입체감을 주기 위해 그림자를 추가합니다.

• 구문: text-shadow: [가로위치] [세로위치] [흐림정도] [색상];
• 특징: 쉼표로 구분하여 여러 개의 그림자를 중첩해서 사용할 수도 있습니다.

CSS

 

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

---

5. text-transform (대소문자 변환)

HTML 원본 텍스트를 바꾸지 않고 영문 대소문자 표기법만 변경합니다.

• uppercase: 모든 글자를 대문자로 바꿉니다.
• lowercase: 모든 글자를 소문자로 바꿉니다.
• capitalize: 각 단어의 첫 글자만 대문자로 바꿉니다.

---

6. letter-spacing & word-spacing (간격)

글자와 단어 사이의 밀도를 조절합니다.

• letter-spacing: 개별 글자 사이의 간격(자간)을 조절합니다.
• word-spacing: 단어와 단어 사이의 공백(어간)을 조절합니다.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  .main-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 1px 1px 2px gray;
  }

  .content-text {
    line-height: 1.8;
    text-decoration: underline dotted blue; /* 파란 점선 밑줄 */
    word-spacing: 5px;
  }
</style>

<h1 class="main-title">Css Text Style</h1>
<p class="content-text">
  이 텍스트는 가독성을 위해 줄 간격이 넓고 단어 사이 간격이 조정되었습니다.
</p>

---

📋 텍스트 주요 속성 요약표

속성	설명	주요 값 예시
text-align	가로 정렬	center, justify
line-height	줄 간격	1.6, 150%
text-decoration	장식선	none, underline
text-shadow	글자 그림자	2px 2px 4px #000
text-transform	대소문자 변환	uppercase, capitalize
letter-spacing	자간 조절	-1px, 0.1em

---

학습 정리

• 디자인의 완성도는 **letter-spacing**을 미세하게 좁히고(-0.05em 등), **line-height**를 넉넉히 주는 데서 시작됩니다.
• 하이퍼링크의 밑줄이 거슬린다면 **text-decoration: none;**으로 깔끔하게 지울 수 있습니다.

---

텍스트의 미학을 결정하는 CSS 속성들을 모두 마스터하셨습니다!

---