[HTML] - 제목과 문단을 담당하는 태그(h, br, hr, &nbsp)

 

Markup Language - HTML(HyperText Markup Language)

이번 포스팅에선 HTML(HyperText Markup Language) 마크업 언어란 무엇인지, 그리고 제목과 본문에서 사용될 수 있는 대표적인 태그들인 <h>, <br>,  <hr> 태그, &nbsp에 대해 알아보도록 하겠습니다.

 

 

 

 

 

1. HTML(HyperText Markup Language)

1-1. HTML(HyperText Markup Language)의 정의

- HTML이란, 웹 페이지의 제목, 단락, 목록과 같은 본문을 위한 구조적인 표현, 외부 링크, 이미지 삽입 등 웹 페이지의 전반적인 구조 또는 정보를 표현할 수 있는 마크업 언어입니다.

 

 

 

 

1-2. HTML(HyperText Markup Language)의 특징

- 단순히 웹 페이지의 구조적 표현, 정보를 기술하기 위해 개발된 언어로 프로그래밍 언어가 가지는 코드의 분기적 흐름, 논리적인 흐름의 특성은 가지고 있지 않은 언어로 HTML은 프로그래밍 언어가 아닌 마크업 언어입니다.

 

 

 

 

1-3. 태그(Tag),  열린 태그와 닫힌 태그

- 사전적 의미로는 "꼬리표"라는 의미를 가지고 있으나, HTML에서의 태그는 아래와 같은 뜻을 가집니다.

 

- HTML 웹 문서를 이루는 문법적인 표시로써, 웹 문서의 구조적인 부분을 설명할 수 있는 키워드입니다.

 

<태그 이름 > 문서 내용 </태그 이름>

 

- 열린 태그 : 태그의 시작점으로 하나의 태그가 시작됨을 알리는 태그입니다.

 

- 닫힌 태그 : 한 태그의 종료지점으로 하나의 태그가 종료됨을 알립니다.

 

- 빈 태그(Empty tag) : 모든 태그들이 열림 / 닫힘 태그 형식인 건 아니며, 닫힌 태그 없이 단독으로 사용되는 태그를 의미합니다.

 

- 태그의 값(HTML 값) : 태그 내부에 직접적으로 삽입되는 값을 의미하며 태그의 명령을 직접적으로 받게 되는 영역 또는 값입니다.

 

 

 

 

 

 

 

2. 제목과 본문을 표시할 수 있는 태그들

(1) 제목과 본문에 대한 구조를 나타낼 수 있는 대표적인 태그들입니다.

 

(2) 태그와 관련 없는 내용이지만 HTML 문서에서도 주석을 사용할 수 있습니다.

- 문법 :

<!--

    원하는 내용 입력, 문서엔 반영되지 않습니다.

--!>

태그명 또는 구문	태그, 구문에 대한 설명	추가적인 특징
<h1> ~ <h6>	제목을 기술하는 태그	h 뒤의 숫자가 높을수록 낮은 폰트 크기 형성
<p>	문단을 기술하는 태그	사용 시 닫는 태그 기준으로 줄 바꿈 진행
<br>	줄 바꿈 태그	닫는 태그가 필요하지 않음
<hr>	가로 줄 생성	닫는 태그가 필요하지 않음
&nbsp;	공백 한 칸 생성	스페이스 바와 같은 동작을 진행(공백 한 칸)

 

 

 

 

2-1. <h1> ~ <h6> 태그

(1) 총 6단계로, 문단의 제목을 나타낼 수 있는 태그입니다.

 

(2) 열린 태그, 닫힌 태그로 구성됩니다 

 

(3) 제목을 뜻하는 heading의 앞 글자 알파벳 "h"를 따온 것입니다.

  <h1>제목을 담당하는 태그, h 태그</h1>
  <h3>제목을 뜻하는 Heading의 h를 따온 태그입니다.</h3>
  <h3>1에서 6까지 제목 스타일의 크기가 달라집니다 .</h3>
  <h1>h1 제목1</h1>
  <h2>h2 제목2</h2>
  <h3>h3 제목3</h3>
  <h4>h4 제목4</h4>
  <h5>h5 제목5</h5>
  <h6>h6 제목6</h6>

 

- 브라우저에 출력되면 아래와 같이 나타납니다.

<h> 태그 예시

 

 

 

 

2-2. <p> 태그

- 본문의 문단을 형성하는 태그이며 닫힌 태그를 기준으로 자동 줄 바꿈이 진행됩니다.

 

- 문단의 뜻을 갖는 영어 단어 "paragraph"의 p를 따온 것입니다.

  <p> my name is wonjun!</p>
  <p> I'm student</p>

 

- 브라우저에서 출력되면 아래와 같이 나타납니다.

<p> 태그 예시

 

 

 

 

2-3. <br> 태그

- 닫힌 태그 없이 단독으로 사용 가능하며 줄 바꿈을 진행해주는 태그입니다.

 

- 영어 문장 "Line break"의 "br"을 따온 태그입니다.

어때요? <br>
줄 바꿈 잘 되죠?<br>
하하<br>

 

- 브라우저에서 출력되면 아래와 같이 나타납니다.

<br> 태그 예시

 

 

 

 

2-4. <hr> 태그

- 수평 줄을 생성해주는 태그입니다.

 

- <br> 태그와 마찬가지로 닫는 태그가 없습니다.

 

- 영어 단어 "수평의" 의미인 "horizontal"의 hr을 따온 태그입니다.

<h1>수평 줄을 생기게 해 주는 hr 태그입니다.</h1>
<hr>
<h3>horizontal line에서 hr을 따오게 되었습니다!</h3>
<h3>br 태그와 마찬가지로 닫는 태그가 없습니다!</h3>

 

- 브라우저에서 출력되면 아래와 같이 나타납니다.

<hr> 태그 예시

 

 

 

 

2-5. &nbsp;

- 사용 시 스페이스 한 칸 크기의 공백을 생성합니다.

<h1>스페이스바 한 칸 효과를 내는 & nbsp입니다.</h1>
안녕 안녕&nbsp;&nbsp;안녕&nbsp;&nbsp;&nbsp;안녕

 

- 브라우저에 출력되면 아래와 같이 나타납니다.

&nbsp; 사용 시 공백 발생

 

 

 

 

 

 

======================================================================

해당 포스팅에 대해 내용 추가가 필요하다고 생각되면 기존 포스팅 내용에 다른 내용이 추가될 수 있습니다.

개인적으로 공부하며 정리한 내용이기에 오타나 틀린 부분이 있을 수 있습니다.

이에 대해 지적해 주시면 감사하겠습니다.