HTML 텍스트 모양 태그 배우기
웹페이지에서는 단순한 글보다 강조, 목록, 인용 등을 통해 내용을 더 보기 좋게 만들 수 있습니다.
이번 글에서는 글의 모양과 강조를 조절하는 HTML 태그를 배워보겠습니다.
굵은 글씨: <b> / <strong>
- <b>: 글씨를 굵게 표시
- <strong>: 의미상 강조, SEO 관점에서 중요
<p>이 글씨는 <b>굵게</b> 표시됩니다.</p>
<p>이 글씨는 <strong>강조</strong>됩니다.</p>결과:
이 글씨는 굵게 표시됩니다.
이 글씨는 강조됩니다.
주의:
<b>는 단순 시각적 굵기
<strong>은 의미 강조, 검색엔진에서 중요하게 인식
기울임 글씨: <i> / <em>
- <i>: 글씨를 기울임
- <em>: 의미상 강조, 기울임
<p>이 글씨는 <i>기울임</i>입니다.</p>
<p>이 글씨는 <em>강조 기울임</em>입니다.</p>결과:
이 글씨는 기울임입니다.
이 글씨는 강조 기울임입니다.
주의:
<i>는 단순 시각적 기울임
<em>은 의미 강조, 검색엔진에서 중요하게 인식
취소선: <s> / <del>
- <s>: 취소선
- <del>: 삭제된 내용 의미
<p><s>취소된 글씨</s></p>
<p><del>삭제된 글씨</del></p>결과:
취소된 글씨
삭제된 글씨
주의:
<s>는 단순 시각적 취소선
<del>은 의미상 삭제 표시
인용문: <blockquote> / <q>
- <blockquote>: 긴 인용문
- <q>: 짧은 인용문, 한 줄
<blockquote>
이것은 긴 인용문입니다.
여러 줄로 작성할 수 있습니다.
</blockquote>
<p>짧은 인용: <q>HTML은 쉽다!</q></p>결과:
이것은 긴 인용문입니다.
여러 줄로 작성할 수 있습니다.
짧은 인용:
HTML은 쉽다!
주의:
<blockquote>는 블록 인용
<q>는 인라인 인용
목록: <ul> / <ol> / <li>
- <ul>: 순서 없는 목록
- <ol>: 순서 있는 목록
- <li>: 목록 항목
<h3>순서 없는 목록</h3>
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
<h3>순서 있는 목록</h3>
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>결과:
순서 없는 목록
- 사과
- 바나나
- 포도
순서 있는 목록
1. 첫 번째
2. 두 번째
3. 세 번째
주의:
<ul> / <ol>는 목록 구분
<li>는 목록 항목
실습: 다양한 텍스트 모양 활용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 모양 연습</title>
</head>
<body>
<h1>HTML 텍스트 모양 연습</h1>
<p>이 글은 <b>굵게</b> 표시됩니다.</p>
<p>이 글은 <i>기울임</i> 표시됩니다.</p>
<p>취소선은 <s>이렇게</s> 표시됩니다.</p>
<blockquote>긴 인용문은 이렇게 작성합니다.</blockquote>
<p>짧은 인용은 <q>이 한 줄입니다.</q></p>
<h2>목록 예시</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
</ol>
</body>
</html>결과 화면:
- 큰 제목 <h1> 표시
- 문단, 굵게, 기울임, 취소선 적용
- 긴/짧은 인용문 표시
- 순서 있는/없는 목록 표시
정리
- <b> / <strong>: 글씨를 굵게
- <i> / <em>: 글씨를 기울임
- <s> / <del>: 취소선
- <blockquote> / <q>: 긴/짧은 인용
- <ul> / <ol> / <li>: 목록
다음 글에서는 링크, 이미지 태그를 배우며 웹페이지에 콘텐츠를 풍부하게 만들어 봅니다.
'웹프로그래밍 - 기초' 카테고리의 다른 글
| 3편 | HTML 기본 태그 배우기: 제목, 문단, 줄바꿈 태그 (3) | 2025.07.31 |
|---|---|
| 2편 | HTML 문서 구조 이해하기: 웹페이지의 기본 틀 만들기 (2) | 2025.07.31 |
| 1편 | 웹프로그래밍이란? (1) | 2025.07.29 |