04. HTML-Typing the contents(Text)
04. HTML-Typing the contents(Text)
4. 웹 문서에 텍스트 입력하기
[toc]
이번 학습에서는 HTML 문서에 실제 텍스트 콘텐츠를 입력하기 위한 여러 태그들을 정리해보았다. 제목, 문단, 줄바꿈, 인용문 등 웹 페이지에서 기본적으로 사용되는 텍스트 관련 태그들의 사용법과 차이점을 중심으로 실습하였다.
4-1. 텍스트 입력 기본 태그
1. <hn> 태그 (제목 태그)
h는 heading(제목)의 줄임말로,<h1>부터<h6>까지 총 6단계가 있다.- 숫자가 작을수록 글자가 크고 강조된다. (
<h1>이 가장 크고 굵음) - 제목은 일반 텍스트보다 시각적으로 두드러지며, 페이지 구조를 명확히 하는 데에도 활용된다.
1
2
3
4
<h1>이것은 제목1입니다.</h1>
<h2>이것은 제목2입니다.</h2>
...
<h6>이것은 제목6입니다.</h6>
2. <p> 태그와 <br> 태그
✅ <p> 태그
- 단락을 나타낼 때 사용하며,
<p>내용</p>형태로 사용한다. - 줄바꿈 없이 하나의 문단으로 인식되며, 자동 줄바꿈이 적용된다.
- 단락 간 여백이 기본적으로 제공된다.
1
2
3
4
5
<p>
안녕하세요 고영훈입니다
이렇게 P태그 안에서 줄을 바꿔도 한 줄로 표시됩니다.
너무 길면 자동으로 줄바꿈이 됩니다!
</p>
✅ <br> 태그
- 줄을 강제로 바꿀 때 사용하며, 단독 태그이다 (닫는 태그 없음).
- 단락을 나누지는 않지만 시각적인 줄바꿈을 한다.
1
2
3
<p>
이렇게 줄을 쓰다가 여기서 줄바꿈 하고 싶다면<br>이렇게 하면 '싶다면'에서 줄바꿈합니다!
</p>
🔎 차이점
<br>을 반복해서 사용하면 시각적으로 단락처럼 보일 수는 있지만, 실제로는 단락이 생성된 것이 아니므로 CSS 스타일 적용에 제한이 생긴다. 따라서 문단 구분에는 반드시 <p> 태그를 사용해야 한다.
3. <blockquote> 태그
- 인용문을 나타낼 때 사용하며, 브라우저는 자동으로 들여쓰기를 적용해준다.
- 화면 낭독기에서도 인용문으로 인식되어 접근성 측면에서 중요하다.
1
2
3
4
<blockquote>
이 문장은 인용문입니다. 다른 텍스트보다 안으로 들여씁니다.<br>
이렇게 다른 태그들도 사용할 수 있습니다.
</blockquote>
4. <strong> vs <b>
✅ <strong>
- 의미상 중요한 내용을 강조할 때 사용한다.
- 화면 낭독기에서도 강조된 콘텐츠로 읽히므로 의미 중심의 강조이다.
✅ <b>
- 단순히 굵은 글씨를 표현할 때 사용한다.
- 시각적 효과만 있고, 스크린 리더에서는 강조되지 않는다.
🔎 차이점
두 태그 모두 글자는 굵게 표시되지만, 의미 전달 면에서는 확연히 차이가 있다. <strong>은 의미의 강조, <b>는 시각적인 강조이다.
5. <em> vs <i>
✅ <em>
- ‘emphasis’의 줄임말로, 문장 내 강조하고 싶은 단어에 사용한다.
- 의미상의 강조이며, 스크린 리더가 강조하여 읽는다.
✅ <i>
- ‘italic’의 줄임말로, 생각, 용어, 관용구 등 시각적으로 구분할 필요가 있는 부분에 사용된다.
- 단순히 기울여 표시하며, 의미 전달보다는 시각적 구별용이다.
6. 기타 텍스트 태그
| 태그 | 용도 설명 |
|---|---|
<abbr> | 약어나 줄임말에 대한 전체 제목 정보 제공 |
<cite> | 인용 출처 표기 (예: 책, 영화 제목 등) |
<code> | 코드나 명령어 표기 |
<small> | 작은 부가 정보 표시 |
<sub> | 아래 첨자 (예: H2O) |
<sup> | 위 첨자 (예: x2) |
<s> | 취소선 표시 (예: |
📌 정리
텍스트 관련 태그들은 단순히 콘텐츠를 표현하기 위한 요소를 넘어, 웹 페이지의 의미와 구조를 전달하는 수단이다. 이를 정확히 구분하고 사용할 수 있어야 시멘틱 웹을 지향할 수 있으며, 접근성·검색엔진 최적화 등에서도 유리하다.
End