아무개의 취미생활
HTML 텍스트 요소 다루기
안녕하세요! HTML/CSS 학습 시리즈의 두 번째 글입니다.
지난 시간에는 HTML의 기본 개념과 구조에 대해 알아보았는데요, 오늘은 웹 페이지에서 텍스트를 표현하는 다양한 HTML 요소들을 배워보겠습니다.
제목 태그 (<h1> ~ <h6>)
HTML에서는 6단계의 제목 태그를 제공합니다. <h1>이 가장 중요하고 큰 제목이며, <h6>으로 갈수록 중요도와 크기가 작아집니다.
<h1>가장 중요한 제목 (h1)</h1>
<h2>두 번째 수준 제목 (h2)</h2>
<h3>세 번째 수준 제목 (h3)</h3>
<h4>네 번째 수준 제목 (h4)</h4>
<h5>다섯 번째 수준 제목 (h5)</h5>
<h6>여섯 번째 수준 제목 (h6)</h6>
제목 태그는 단순히 텍스트 크기를 조절하는 용도가 아니라 문서의 구조와 의미를 정의하는 중요한 역할을 합니다. 검색 엔진은 이 제목 태그를 통해 페이지의 주요 내용을 파악하므로 적절히 사용하는 것이 중요합니다.
제목 태그 사용 팁:
- 한 페이지에 <h1> 태그는 보통 하나만 사용합니다 (페이지의 주제)
- 제목 수준을 건너뛰지 마세요 (예: h1 다음에 h3 사용 X)
- 제목 태그를 단순히 텍스트를 굵게 만드는 용도로 사용하지 마세요
단락 태그 (<p>)
단락 태그는 텍스트 블록을 표현하는 가장 기본적인 방법입니다. 브라우저는 단락의 앞뒤에 자동으로 여백을 추가합니다.
<p>이것은 첫 번째 단락입니다. 웹 페이지에서 기본 텍스트 블록을 구성할 때 사용합니다.</p>
<p>이것은 두 번째 단락입니다. 새로운 단락은 자동으로 앞 단락과 간격이 생깁니다.</p>
텍스트 서식 요소
HTML에는 텍스트에 의미와 강조를 부여하는 다양한 태그가 있습니다.
강조 태그
<strong>굵게 표시되는 중요한 텍스트</strong>
<em>기울임꼴로 표시되는 강조 텍스트</em>
<strong>은 "중요함"을, <em>은 "강조"를 의미합니다. 단순히 스타일링이 목적이라면 CSS를 사용하는 것이 더 좋습니다.
텍스트 효과 태그
<mark>하이라이트된 텍스트</mark>
<del>삭제된 텍스트</del>
<ins>추가된 텍스트</ins>
<sub>아래 첨자</sub>
<sup>위 첨자</sup>
<small>작은 텍스트</small>
실제 효과를 보면:
- <mark> 태그는 텍스트에 노란색 배경을 추가합니다
- <del> 태그는 텍스트 위에 취소선을 그립니다
- <ins> 태그는 텍스트 아래에 밑줄을 추가합니다
- <sub> 태그는 텍스트를 아래쪽에 작게 표시합니다 (예: H₂O)
- <sup> 태그는 텍스트를 위쪽에 작게 표시합니다 (예: 10²)
- <small> 태그는 텍스트를 한 단계 작게 표시합니다
텍스트 서식 태그
<b>굵은 텍스트</b>
<i>기울임꼴 텍스트</i>
<u>밑줄 텍스트</u>
<code>코드 텍스트</code>
<pre>서식이 유지되는 텍스트
들여쓰기나
줄바꿈이
그대로 보존됩니다.</pre>
<b>, <i>, <u> 태그는 단순히 시각적 효과만 적용하므로, 가능하면 의미를 가진 태그(<strong>, <em> 등)나 CSS를 사용하는 것이 좋습니다.
<code> 태그는 컴퓨터 코드를 표시할 때 사용하며, <pre> 태그는 입력한 그대로의 서식(공백, 줄바꿈)을 유지합니다.
인용구 태그
<blockquote>
이것은 긴 인용문입니다. 블록 형태로 표시되며 일반적으로 들여쓰기가 적용됩니다.
<cite>- 출처 이름</cite>
</blockquote>
<p>그는 <q>진실은 항상 이긴다</q>라고 말했습니다.</p>
<blockquote>는 긴 인용문을, <q>는 짧은 인라인 인용문을 표시하는 데 사용합니다. <cite> 태그는 작품이나 출처를 표시할 때 사용합니다.
주소 및 시간 태그
<address>
작성자: 홍길동<br>
이메일: example@example.com<br>
서울시 강남구
</address>
<p>이 글은 <time datetime="2023-04-11">2023년 4월 11일</time>에 작성되었습니다.</p>
<address> 태그는 연락처 정보를, <time> 태그는 날짜/시간 정보를 의미적으로 표시합니다. datetime 속성은 기계가 읽을 수 있는 형식으로 날짜를 제공합니다.
줄바꿈과 구분선
<p>첫 번째 줄<br>두 번째 줄</p>
<p>첫 번째 구역</p>
<hr>
<p>두 번째 구역</p>
<br> 태그는 줄바꿈을, <hr> 태그는 수평선을 추가하여 콘텐츠를 시각적으로 구분합니다.
HTML 특수 문자
HTML에서는 특수 문자를 표현하기 위해 엔티티(entity)를 사용합니다.
< = < (작다 기호)
> = > (크다 기호)
& = & (앰퍼샌드)
" = " (큰따옴표)
' = ' (작은따옴표)
© = © (저작권 기호)
® = ® (등록 상표)
= 줄바꿈 없는 공백
특수 문자를 직접 사용하면 HTML 코드로 해석될 수 있으므로, 엔티티를 사용하는 것이 안전합니다.
실습: 자기소개 페이지 만들기
이제 배운 내용을 활용하여 풍부한 텍스트 서식이 적용된 자기소개 페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>홍길동의 자기소개</title>
</head>
<body>
<h1>안녕하세요, 홍길동입니다!</h1>
<h2>소개</h2>
<p>저는 <strong>웹 개발</strong>을 배우고 있는 대학생입니다. <em>HTML과 CSS</em>에 특히 관심이 많습니다.</p>
<h2>관심 분야</h2>
<p>제가 관심 있는 분야는 다음과 같습니다:</p>
<p><mark>웹 개발</mark>, <mark>사용자 경험 디자인</mark>, 그리고 <mark>모바일 앱 개발</mark>입니다.</p>
<h2>좋아하는 명언</h2>
<blockquote>
상상력은 지식보다 중요하다.
<cite>- 알버트 아인슈타인</cite>
</blockquote>
<h2>최근 활동</h2>
<p>최근에는 <del>파이썬</del> <ins>HTML/CSS</ins> 공부에 집중하고 있습니다.</p>
<p>특히 H<sub>2</sub>O 분자처럼 기본 요소들이 모여 아름다운 결과물을 만드는 과정이 매력적입니다.</p>
<hr>
<address>
이메일: example@example.com<br>
블로그: <a href="https://example.com">example.com</a>
</address>
<p><small>마지막 업데이트: <time datetime="2023-04-11">2023년 4월 11일</time></small></p>
</body>
</html>
위 코드를 복사하여 새 HTML 파일로 저장하고 브라우저에서 열어보세요. 다양한 텍스트 요소가 어떻게 표시되는지 확인할 수 있습니다.
마치며
이번 포스트에서는 HTML의 다양한 텍스트 요소들을 살펴보았습니다. 이러한 요소들을 적절히 활용하면 웹 페이지의 콘텐츠에 구조와 의미를 부여할 수 있습니다. 단순히 시각적인 효과를 위해서라면 다음에 배울 CSS를 사용하는 것이 더 적합하다는 점을 기억하세요.
텍스트 요소는 웹 페이지의 가장 기본적인 부분이지만, 구조와 의미를 명확하게 전달하는 중요한 역할을 합니다. 적절한 태그를 사용하면 접근성도 향상되고 검색 엔진 최적화(SEO)에도 도움이 됩니다.
질문이나 의견이 있으시면 댓글로 남겨주세요. 다음 포스트에서는 HTML 링크와 이미지에 대해 알아보겠습니다.
다음 포스트 예고: "HTML 링크와 이미지" - 웹 페이지에 하이퍼링크와 이미지를 추가하는 방법을 배웁니다.
'Web Programming > HTML & CSS' 카테고리의 다른 글
| [학습 1] HTML 소개와 기본 구조 (3) | 2025.04.09 |
|---|---|
| HTML 문서에 <img> 태그로 이미지 띄우기 (0) | 2021.11.25 |
| HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 (0) | 2021.11.24 |
| font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 (0) | 2021.04.14 |
| mediaquery (0) | 2021.04.13 |
