HTML 텍스트 스타일링 기본, 웹에서 가독성 좋은 텍스트 만들기

HTML 텍스트 스타일링 기본, 웹에서 가독성 좋은 텍스트 만들기

웹사이트에서 텍스트는 단순한 정보 전달 수단이 아닙니다. 적절한 스타일링을 통해 가독성을 높이고, 사용자 경험(UX)을 향상시키는 중요한 요소입니다. 이번 글에서는 **HTML과 CSS를 활용한 텍스트 스타일링 기법**을 소개하고, 실무에서 유용한 팁을 함께 알아보겠습니다.

 

 

목차

1. HTML 텍스트 태그의 기본
2. 텍스트 색상과 배경색 설정
3. 폰트 크기와 가변 크기 설정
4. 텍스트 정렬과 간격 조정
5. 폰트 스타일과 웹 폰트 적용
6. 텍스트 강조 효과 적용
7. 가독성을 높이는 스타일링 팁

 

1. HTML 텍스트 태그의 기본

HTML에서는 다양한 텍스트 태그를 제공하며, 각각의 용도에 맞게 사용해야 합니다.

태그	설명	예제
<p>	문단을 정의	이것은 문단입니다.
<h1> ~ <h6>	제목을 정의	이것은 제목입니다.
<span>	인라인 텍스트를 스타일링	이것은 빨간색 텍스트입니다.

 

 

 

2. 텍스트 색상과 배경색 설정

텍스트의 색상을 지정하는 방법은 다음과 같습니다.

• ✅ color 속성 사용: 글자 색상을 변경
• ✅ background-color 속성 사용: 배경색을 변경

예제:

<p style="color: blue;">파란색 텍스트입니다.</p>
<p style="background-color: yellow;">노란 배경의 텍스트입니다.</p>

 

 

 

3. 폰트 크기와 가변 크기 설정

폰트 크기는 px, em, rem, % 단위로 설정할 수 있습니다.

• px: 고정 크기 (예: font-size: 16px;)
• em: 부모 요소 기준 비율 (예: font-size: 1.2em;)
• rem: 루트 요소 기준 비율 (예: font-size: 1.5rem;)

👉 이 텍스트는 20px 크기로 설정되었습니다.

 

 

 

4. 텍스트 정렬과 간격 조정

텍스트 정렬에는 text-align 속성을 사용합니다.

• text-align: left; (좌측 정렬)
• text-align: center; (가운데 정렬)
• text-align: right; (우측 정렬)
• text-align: justify; (양쪽 정렬)

🔹 이 텍스트는 가운데 정렬되었습니다.

 

 

 

 

5. 폰트 스타일과 웹 폰트 적용

폰트 스타일을 지정하는 주요 속성:

• font-family: 글꼴 지정 (예: font-family: Arial, sans-serif;)
• font-weight: 글꼴 굵기 설정 (예: font-weight: bold;)
• font-style: 기울임 설정 (예: font-style: italic;)

📌 이 텍스트는 Courier New 폰트로 설정되었습니다.

 

 

 

6. 텍스트 강조 효과 적용

다양한 강조 효과를 활용해 가독성을 높일 수 있습니다.

• 볼드체 (<b> 또는 <strong>): 중요한 내용 강조
• 이탤릭체 (<i> 또는 <em>): 부드러운 강조
• 밑줄 (<u>): 강조 또는 링크 스타일

 

 

 

7. 가독성을 높이는 스타일링 팁

가독성을 높이기 위한 스타일링 방법:

• ✅ 줄 간격(line-height) 조정: line-height: 1.5; 설정
• ✅ 적절한 글자 크기 사용: 16px 이상 추천
• ✅ 색상 대비 조정: 텍스트와 배경 색상을 명확하게 구분
• ✅ 문단 길이 조절: 너무 긴 문장은 피하고, 적절한 개행 사용

💡 Tip: 가독성을 위해 배경색과 텍스트 색상의 명암 대비를 충분히 확보하세요!