학습 목표
- HTML 제목태그(h1~h6)의 사용법과 특징 이해
- 문단을 구성하는 p태그와 pre태그의 차이점 파악
- 텍스트 서식을 위한 다양한 글자태그 활용법 습득
- 태그 중첩 사용을 통한 복합적인 텍스트 표현 방법 학습
<HTML 문서 기본 구조>
HTML 문서는 크게 두 부분으로 구성된다. <head> 영역은 문서에 대한 메타 정보를 담고, <body> 영역은 실제 화면에 표시되는 콘텐츠가 들어간다.
<!DOCTYPE html> <!-- 해당 문서가 html5문서다 -->
<html lang="ko"> <!-- html문서의 영역을 나타내는 html태그 -->
<head> <!-- 문서에대한 정보 -->
<meta charset="UTF-8"> <!-- 문서에서 사용할 문자 인코딩 UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 글자태그</title> <!--탭이나 즐겨찾기에 표시되는 사이트제목-->
</head>
<body> <!-- 실제 화면에 표시되는 콘텐츠가 들어가는 부분-->
<!-- 여기에 콘텐츠 작성 -->
</body>
</html>
<제목 태그 (Heading Tags)>
- 제목태그의 계층 구조
HTML은 h1부터 h6까지 총 6단계의 제목태그를 제공한다. 숫자가 작을수록 더 중요하고 큰 제목을 의미한다.
<!-- h태그(h1 ~ h6) -->
<h1>제목태그입니다.</h1>
<h2>제목태그입니다.</h2>
<h3>제목태그입니다.</h3>
<h4>제목태그입니다.</h4>
<h5>제목태그입니다.</h5>
<h6>제목태그입니다.</h6>
<!-- 없는 태그를 사용해도 에러발생x 표현가능한 부분만 표현-->
<h7>제목태그입니다.</h7>실행 결과:
- h1이 가장 크고 굵게 표시됨
- h6까지 점진적으로 크기가 작아짐
- h7 태그는 존재하지 않으므로 일반 텍스트로 표시됨
- 수평선으로 구분하기
<hr><hr> 태그는 콘텐츠 간의 구분선 역할을 하며, 단독으로 사용되는 자체 닫힘 태그다.
<문단 구성 태그>
- p태그와 pre태그의 차이점
p태그의 특징:
- 줄바꿈을 위해서는 <br> 태그가 필요함
- 연속된 공백은 하나의 공백으로만 인식함
- 특수문자는 엔티티 코드로 표현해야 함
<h3>문단을 나누는 태그 : p, pre</h3>
<p>
문단을 나누는 태그로는 p태그와 pre태그가 있다. <br>
p태그는 줄바꿈을 하고자한다면 별도의 태그를 작성해야한다. <br>
그리고 공백은 한개의 공백만 표시하기 때문에 <br>
별도의 문구(엔티티코드)를 기술해야한다. <br>
< > & 등등....
</p>
pre태그의 특징:
- 작성한 그대로의 형태를 유지함
- 줄바꿈과 공백이 모두 보존됨
- 코드나 시의 표현에 적합함
<pre>
pre태그는 시작태그에서부터 종료태그까지 입력된 내용을 작성한 그대로 표현하는 태그
줄바꿈이라던가 여러개의 공백을 그대로 인식함.
</pre>
<텍스트 서식 태그>
- 굵은 글씨 표현
<b>b: 글자를 굵게표시하는 태그</b>
<br><br> <!---줄바꿈코드 --->
<strong>strong : 글자를 굵게표시하는 태그</strong>
b태그 vs strong태그:
- b태그: 단순히 시각적으로 굵게 표현
- strong태그: 의미적으로 중요한 내용임을 강조 (스크린 리더 등에서 인식)
- 기울임 글씨 표현
<em>em : 글자를 기울여 보여주는 태그</em>
<br><br>
<i>i : 글자를 기울여 보여주는 태그</i>
em태그 vs i태그:
- em태그: 강조의 의미를 담은 기울임
- i태그: 단순한 시각적 기울임 효과
- 기타 텍스트 효과
<mark>mark : 형광펜</mark> 효과를 주는 태그
<br><br>
<u>u : 글자에 밑줄 그어지는 태그</u>
<br><br>
<s>s : 글자에 취소선을 넣어주는 태그</s>
<br><br>
기본글자에 <sub>sub : 아래첨자</sub>를 나타내는 태그
<sup>sup : 윗 첨자</sup>를 나타내는 태그
실행 결과:
- mark: 노란색 배경의 하이라이트 효과
- u: 텍스트 하단에 밑줄
- s: 텍스트 중앙에 취소선
- sub: 화학식 H₂O의 2처럼 아래 작은 글자
- sup: 수학식 x²의 2처럼 위 작은 글자
<태그 중첩 활용>
- 복합적인 텍스트 표현
HTML 태그는 중첩해서 사용할 수 있어 다양한 조합의 서식을 만들 수 있다.
<hr>
<p>
태그를 중첩해서 사용하는 건 당연하게 가능 <br>
<strong><em>굵고 기울인 글자</em></strong><br>
<s><mark>취소선, 형광팬</mark></s>
</p>
실행 결과:
- <strong><em>: 굵으면서 동시에 기울어진 텍스트
- <s><mark>: 형광펜 효과와 취소선이 동시에 적용된 텍스트
- 태그 중첩 시 주의사항
- 올바른 닫힘 순서: 나중에 열린 태그를 먼저 닫아야 함
- 의미적 적절성: 논리적으로 말이 되는 조합인지 고려
- 가독성 유지: 과도한 중첩은 코드 가독성을 해칠 수 있
정리 및 요약
HTML 글자태그는 웹 페이지의 텍스트에 구조적 의미와 시각적 효과를 부여하는 핵심 요소다.
핵심 포인트:
- 제목태그(h1~h6): 콘텐츠의 계층 구조 표현
- 문단태그(p, pre): 텍스트 블록의 레이아웃 제어
- 서식태그: 텍스트의 시각적 강조와 의미적 강조 구분
- 태그 중첩: 다양한 조합을 통한 복합적 표현 가능
이러한 기본 태그들을 정확히 이해하고 활용하면 의미있는 HTML 구조를 만들 수 있으며, 향후 CSS 스타일링과 JavaScript 조작의 기반이 된다.
'HTMLCSSJavaScript' 카테고리의 다른 글
| JavaScript_01) 변수 (0) | 2025.09.22 |
|---|---|
| HTML_05) 하이퍼링크 태그, 입력 양식 및 Form 태그 (0) | 2025.09.22 |
| HTML_04) 미디어, 영역 태그 (0) | 2025.09.22 |
| HTML_03) 표 태그 (0) | 2025.09.20 |
| HTML_02) 목록 태그 (0) | 2025.09.19 |