HTML의 태그는 웹페이지의 구조와 컨텐츠를 정의하는 필수 구성 요소로, 시작태그와 종료태그로 이루어져있다. 태그는 각자 고유한 속성을 가지고 있는 경우가 있으며 태그에 속성을 부여할 수 있다. 또한 HTML의 태그는 블록태그(block)와 인라인태그(inline)로 나뉜다. 블록태그는 항상 새 라인에서 시작하고 왼쪽 끝에서 오른쪽 끝까지 블록 공간을 차지하고, 인라인태그는 자신의 내용과 앞뒤 태그의 내용을 같은 라인에 출력하는 태그이다.
| 종류 | |
| 블록태그 | <p>, <h1>, <div>, <ul> |
| 인라인태그 | <strong>, <a>, <img>, <span> |
텍스트 관련 태그
html은 기본적으로 엔터, 탭, 스페이스바는 무조건 공백 하나로 인식한다. 텍스트 관련 태그를 사용하여 인식할 수 있게 할 수 있으며, CSS를 사용하지 않아도 텍스트에 스타일을 변경할 수 있다.
HTML 제목관련 태그
- <h숫자> </h숫자>
제목이나 부제목을 작성할 때 사용하는 태그로, 일반 텍스트보다 크기가 크고 진하게 표시된다. <h1>부터 <h6>까지 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>
HTML 문장관련 태그
- <!-- 주석 -->
내용을 쉽게 이해할 수 있도록 덧붙이는 설명글을 작성할 때 사용한다. - <p> 문단 </p>
입력한 내용 앞뒤로 빈 줄이 생기면서 문단이 만들어진다. 문단을 적을 때 사용한다. - <p style="white-space: pre;"> 문장 </p>
HTML 요소의 공백을 어떻게 처리할지 정의한 내용으로, white-space: pre의 경우 연속된 공백과 줄바꿈을 그대로 사용할 수 있다. white-space 속성에는 normal, nowrap, pre, pre-wrap, pre-line 등의 속성 값이 있다. - <pre> 문단 <pre>
태그로 감싼 문장을 입력한 문자 형태 그대로 브라우저에 표현한다. 형식이 필요한 문서 등을 작성할 때 사용한다. - <br/>
텍스트 안에 줄바꿈을 생성한다. - <hr>
수평선을 삽입한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 주석의 경우 화면에서는 나타나지 않기 때문에 설명글 작성 시 사용된다.-->
<p> 〈p〉태그는 글자를 작성할 때 사용하지만, 엔터, 탭 그리고
스페이스가 무조건 공백 하나로 인식한다.</p>
<p style="white-space: pre;"> 〈p〉태그에 속성을 넣어
엔터와, 탭, 스페이스가 인식되게 할 수 있다. </p>
<hr>
<pre> 〈pre〉태그는 띄어쓰기나
엔터와 탭 모두 인식된다. </pre>
<p>간단한 줄바꿈은 〈br〉태그<br>을 통해서 가능하다. </p>
</body>
</html>
HTML 문장 서식 관련 태그
- <b> 굵게 </b> 또는 <strong> 굵게 </strong>
글자를 굵게 한다. (<b>태그의 경우 html4에서, <strong>태그의 경우 html5에서 사용 된다.) - <i> 기울이기 </i> 또는 <em> 기울이기 </em>
글자를 기울인다. (<i>태그의 경우 html4에서, <em>태그의 경우 html5에서 사용 된다.) - <mark> 형광펜 </mark>
글자의 배경색을 추가한다. - <small> 작은 글씨 <small>
기본 본문 글자 크기보다 작은 크기의 글씨로 표시된다. - <ruby> 주요 텍스트 <rt> 작은 주석 </rt> </ruby>
주요 텍스트에 대한 주석을 표시한다. 주요 텍스트의 경우 <ruby> 태그 내에 작성되고, 주석은 <rt>태그에 작성된다. - <sup> 위 첨자 </sup>
텍스트를 위 첨자로 작성한다. - <sub> 아래 첨자 </sub>
텍스트를 아래 첨자로 작성한다. - <s> 취소선 </s>
텍스트에 취소선을 추가한다. - <u> 밑줄 </u>
텍스트에 밑줄을 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><b>〈b〉태그는 굵게</b><strong> 〈strong〉태그도 굵게</strong> 가능하다.</p>
<p><i>〈i〉태그는 기울이게</i> <em>〈em〉태그도 기울이게</em> 가능하다.</p>
<p><mark>강조할 수 있고</mark> <mark style="background-color: coral;">색도 바꿀 수 있다.</mark></p>
<p><small>작은 글씨로 변경</small> 할 수 있다.</p>
<p><ruby>〈ruby〉태그 사용법이다.<rt>일본어에서 많이 쓰인다.</rt></ruby></p>
<p>위<sup>첨자</sup>, <sub>아래</sub>첨자</p>
<p><s>텍스트 중간에 취소선</s> <u>텍스트 밑에 밑줄</u></p>
</body>
</html>
영역 지정 태그
영역을 지정하는 태그 중에 <div>태그와 <span>태그에 설명하고자 한다.
- <div> </div>
<div>태그는 여러 HTML들을 블록으로 묶는 역할을 하는 블록 태그이다. 블록 전체에 동일한 스타일을 주는 등이 가능하다. - <span></span>
텍스트 일부분에 영역을 지정하는 태그로, 해당 영역에 대한 디자인 수정 등의 일을 수행할 수 있다.
기타 태그
<q cite=주소>인용문 또는 <blockquote cite = 주소>인용문 : 웹 페이지에서는 표시되지 않으며, 문장을 어디서 인용했는지를 알려준다.
<time datetime="지정하는 시간">내용</time> : 해당 요소와 관련 시간 및 날짜를 나타내는 것으로, 웹 접근성 향상을 위한 보조 기술 등에 활용한다.
'Frontend > HTML' 카테고리의 다른 글
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
|---|---|
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML의 목록 태그 (0) | 2024.06.27 |
| HTML의 기본 문법에 대하여 (0) | 2024.06.26 |