CSS 기본 텍스트 스타일링

CSS에서 텍스트 스타일링을 위한 기본 속성들을 설명해드리겠습니다:

1. 텍스트 크기와 폰트

font-size: 16px;          /* 절대 크기 */
font-size: 1rem;          /* 상대 크기 */
font-size: 100%;          /* 부모 요소 기준 */
font-family: Arial, sans-serif;  /* 폰트 지정 */
font-weight: 400;         /* 100~900, normal, bold 등 */
font-style: normal;       /* normal, italic, oblique */

2. 줄 간격과 자간

line-height: 1.5;         /* 배수 */
line-height: 24px;        /* 절대 크기 */
letter-spacing: 0.5px;    /* 자간 */
word-spacing: 2px;        /* 단어 간격 */

3. 텍스트 정렬

text-align: left;         /* left, center, right, justify */
vertical-align: middle;   /* top, middle, bottom, baseline */

4. 텍스트 장식

text-decoration: underline;  /* underline, line-through, none */
text-decoration-color: red;  /* 장식 색상 */
text-decoration-style: solid;  /* solid, dotted, dashed */
text-decoration-thickness: 2px;  /* 장식 두께 */

5. 텍스트 변형

text-transform: uppercase;  /* uppercase, lowercase, capitalize */
text-indent: 20px;         /* 첫 줄 들여쓰기 */

6. 텍스트 오버플로우

overflow: hidden;          /* 넘치는 텍스트 숨김 */
text-overflow: ellipsis;   /* 말줄임표 표시 */
white-space: nowrap;       /* 줄바꿈 방지 */

/* 여러 줄 말줄임 */
display: -webkit-box;
-webkit-line-clamp: 2;    /* 표시할 줄 수 */
-webkit-box-orient: vertical;
overflow: hidden;

7. 텍스트 그림자

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);  /* x y blur color */

8. 텍스트 선택

user-select: none;         /* 텍스트 선택 방지 */

9. 폰트 렌더링

font-smoothing: antialiased;  /* 폰트 부드럽게 */
-webkit-font-smoothing: antialiased;

10. 텍스트 방향

direction: rtl;            /* right-to-left */
writing-mode: vertical-rl; /* 세로 쓰기 */

사용 예시:

.text-example {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #333;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 여러 줄 말줄임 */
.multi-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

이러한 CSS 속성들을 조합하여 원하는 텍스트 스타일을 만들 수 있습니다. 특히 line-height와 overflow 관련 속성들은 텍스트가 잘리지 않도록 주의해서 사용해야 합니다.