텍스트 스타일링: 텍스트의 폰트, 크기, 색상 등을 스타일링

텍스트 스타일링은 웹 페이지의 가독성과 사용자 경험에 중요한 영향을 미칩니다. CSS를 사용하여 텍스트의 폰트, 크기, 색상, 간격 등을 조절함으로써, 텍스트를 더욱 돋보이게 할 수 있습니다. 이제 CSS를 통한 텍스트 스타일링의 주요 부분들을 상세하게 살펴보겠습니다.

1. 폰트 스타일링 (Font Styling)

• font-family: 텍스트에 적용할 폰트를 지정합니다. 예: font-family: Arial, sans-serif;.
• font-size: 텍스트의 크기를 설정합니다. 예: font-size: 16px;.
• font-weight: 폰트의 굵기를 정의합니다. 예: font-weight: bold;.
• font-style: 폰트 스타일을 이탤릭체 등으로 지정합니다. 예: font-style: italic;.

2. 텍스트 색상 및 배경 (Text Color and Background)

• color: 텍스트의 색상을 지정합니다. 예: color: #333333;.
• background-color: 텍스트 배경의 색상을 지정합니다. 예: background-color: yellow;.

3. 텍스트 정렬 및 표시 (Text Alignment and Display)

• text-align: 텍스트의 정렬(왼쪽, 가운데, 오른쪽)을 설정합니다. 예: text-align: center;.
• text-decoration: 밑줄, 취소선 등 텍스트 장식을 설정합니다. 예: text-decoration: underline;.
• white-space: 공백 문자 처리 방식을 지정합니다. 예: white-space: nowrap;.
• text-transform: 대문자 변환, 소문자 변환 등 텍스트의 대소문자를 조절합니다. 예: text-transform: uppercase;.

4. 텍스트 간격 (Text Spacing)

• letter-spacing: 문자 간 간격을 조절합니다. 예: letter-spacing: 2px;.
• word-spacing: 단어 간 간격을 조절합니다. 예: word-spacing: 4px;.
• line-height: 줄 간격(행 높이)을 조절합니다. 예: line-height: 1.5;.

5. 텍스트 그림자 (Text Shadow)

• text-shadow: 텍스트에 그림자 효과를 추가합니다. 예: text-shadow: 2px 2px 2px #000000;.

6. 웹 폰트 (Web Fonts)

• 웹 폰트 사용: @font-face를 사용하여 사용자 지정 폰트를 웹 페이지에 통합합니다.

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

 

7. 텍스트 오버플로 (Text Overflow)

• text-overflow: 오버플로된 텍스트의 표시 방법을 지정합니다. 예: text-overflow: ellipsis;.

8. 컬럼 레이아웃 (Column Layout)

• 멀티 컬럼 텍스트: 텍스트를 여러 열로 나누어 표시합니다. 예: column-count: 2;.

9. 선택 가능한 텍스트 (Selectable Text)

• user-select: 텍스트의 선택 가능 여부를 제어합니다. 예: user-select: none;.

10. 응답성 텍스트 (Responsive Text)

• 미디어 쿼리: 다양한 화면 크기에 맞게 텍스트 크기를 조절합니다.

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}