텍스트 포맷팅

1. 도입 (왜 배워야 하는가)

HTML에서 텍스트 포맷팅은 웹 페이지의 가독성과 사용자 경험을 향상시키는 중요한 요소입니다. 웹 콘텐츠를 작성할 때, 단순히 텍스트를 입력하는 것만으로는 충분하지 않습니다. 적절한 포맷팅을 통해 정보의 구조를 명확히 하고, 독자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다. 만약 텍스트 포맷팅을 제대로 이해하지 못한다면, 내용이 혼란스럽게 전달되어 사용자들이 웹 페이지를 떠날 가능성이 높아집니다. 이는 곧 사이트 방문자 수 감소와 매출 감소로 이어질 수 있습니다.

2. 핵심 개념 설명

HTML에서 텍스트 포맷팅은 여러 가지 요소를 통해 이루어집니다. 각 요소는 특정한 목적을 가지고 있으며, 이를 통해 텍스트의 의미와 구조를 강화합니다.

이러한 요소들은 책에서 제목, 부제목, 본문 등의 역할을 하는 것과 비슷합니다. 예를 들어, 책의 제목이 가장 크고 두드러진 이유는 독자가 빠르게 내용을 파악할 수 있도록 돕기 위해서입니다.

3. 기본 코드 예제

다음은 HTML에서 텍스트 포맷팅의 기본적인 사용법을 보여주는 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>텍스트 포맷팅 예제</title>
</head>
<body>
    <h1>나의 첫 번째 웹 페이지</h1>
    <p>이 문장은 <strong>강조된 텍스트</strong>를 포함하고 있습니다.</p>
    <p>이 문장은 <em>기울임꼴 텍스트</em>를 포함하고 있습니다.</p>
    <p>여기서 줄 바꿈이 필요할 경우 <br>이렇게 줄을 바꿀 수 있습니다.</p>
</body>
</html>

실행 결과

• 나의 첫 번째 웹 페이지 (큰 제목)
• 이 문장은 강조된 텍스트를 포함하고 있습니다. (강조된 부분이 볼드체)
• 이 문장은 기울임꼴 텍스트를 포함하고 있습니다. (기울임꼴)
• 여기서 줄 바꿈이 필요할 경우 이렇게 줄을 바꿀 수 있습니다. (줄 바꿈)

코드 한 줄씩 동작 설명

1. <!DOCTYPE html>: HTML5 문서임을 선언
2. <html lang="ko">: 문서의 언어를 한국어로 설정
3. <head>: 문서의 메타데이터를 포함하는 섹션 시작
4. <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정
5. <title>: 웹 페이지의 제목을 설정
6. <body>: 웹 페이지의 본문 내용이 시작
7. <h1>: 가장 큰 제목을 생성
8. <p>: 문단을 정의
9. <strong>: 강조된 텍스트를 정의 (볼드체)
10. <em>: 기울임꼴 텍스트를 정의
11. <br>: 줄 바꿈을 생성

4. 실전 활용 예제

예제 1: 블로그 포스트

블로그에서 포스팅을 할 때, 제목은 <h1>로 설정하고, 각 섹션 제목은 <h2>로 설정하여 가독성을 높일 수 있습니다.

<h1>오늘의 일기</h1>
<h2>아침</h2>
<p>아침에 일어나서 샤워를 했다.</p>
<h2>점심</h2>
<p>점심으로 샐러드를 먹었다.</p>

예제 2: 쇼핑몰 제품 설명

쇼핑몰에서 제품 설명을 할 때, 제품 이름은 <strong>으로 강조하고, 특징은 <em>으로 기울임꼴을 적용하여 소비자의 주의를 끌 수 있습니다.

<h1>신상품: 예쁜 드레스</h1>
<p>이 드레스는 <strong>여름에 적합한</strong> 디자인입니다.</p>
<p>주요 특징: <em>가벼운 소재</em>, <em>시원한 착용감</em></p>

5. 흔한 실수와 주의사항

실수 1: 잘못된 태그 사용

12. 잘못된 코드:

<p><strong>잘못된 문장</p></strong>

13. 올바른 코드:

<p><strong>올바른 문장</strong></p>

태그의 시작과 끝이 올바르게 쌍을 이루어야 함.

실수 2: 줄 바꿈을 위해 <p> 태그 사용

14. 잘못된 코드:

<p>첫 번째 문장.</p><p>두 번째 문장.</p>

15. 올바른 코드:

<p>첫 번째 문장.<br>두 번째 문장.</p>

문단을 나누고 싶지 않을 경우 <br> 태그를 사용.

6. 정리