[HTML] 태그 모음

이건·2023년 12월 21일

Front-end

목록 보기

3/15

기본 태그

<!DOCTYPE>: 마크업 언어용 DTD 태그
<html>: HTML이 작용하는 범위를 지정하는 태그
<head>: HTML 문서의 속성 범위를 지정하기 위한 태그
<body>: HTML 문서의 본문 범위를 지정하기 위한 태그
<title>: HTML의 제목을 선언하는 태그
<meta>: HTML의 부가 정보를 선언하는 태그
<link>: 외부 CSS파일, 파비콘 등을 연결하는 태그

<!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>
    
</body>
</html>

텍스트 관련 태그

<h1>~<h6>: 제목(heading)을 표시할 때 사용된다.

<h1>1단계</h1>
<h2>2단계</h2>
<h3>3단계</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계</h6>

1단계

2단계

3단계

4단계

5단계

6단계

<p>: 새 문단을 연다.
<b>: 두껍게(bold) 효과를 준다.
<i>: 텍스트를 기울임꼴(italic)로 표시한다.
<strong>: 포함된 텍스트를 강하게 강조할 때 사용한다.
<em>: <strong>보다 약한 강조를 나타낼 떄 사용한다.

<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>

굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.

<ins>: 문서에 삽입(insert)된 텍스트, 즉 밑줄을 표시한다.
<del>: 문서에서 삭제(delete)된 텍스트, 즉 취소선을 표시한다.
<u>: 밑줄(underline)을 표시한다.
<s>: 취소선(strikethough)을 표시한다.

<ins>밑줄이 표시됩니다.</ins>
<del>취소선이 표시됩니다.</del>
<s>나도 취소선</s>
밑줄이 표시<u>됐</u>습니다.

밑줄이 표시됩니다.
~~취소선이 표시됩니다.~~
나도 취소선
밑줄이 표시됐습니다.

<sup>: 텍스트를 위첨자(superscript)로 표시한다.
<sub>: 텍스트를 아래첨자(subscript)로 표시한다.

E=MC<sup>2</sup>
H<sub>2</sub>O는 산소가 아닌 물입니다.
YP<sub>B</sub>P<sub>R</sub>

E=MC2
H2O는 산소가 아닌 물입니다.
YPBPR

<small>: 텍스트를 조금 더 작게 표시한다.
<big>: 텍스트를 조금 더 크게 표시한다.

<span>일반</span>
<small>작게</small>
<big>크게</big>

일반
작게
크게

<br>: 문단 내 줄바꿈(line break)
<hr>: 가로줄(horizontal rule)을 넣는다.

이 밑에 줄바꿈을 합니다.
<br>
<hr>
이 위에 가로줄이 있습니다.

이 밑에 줄바꿈을 합니다.

이 위에 가로줄이 있습니다.

<abbr>: 약어를 이 태그로 묶어서 무엇의 약어인지 설명하기 위한 태그
<blockquote>: 인용구를 기술하는 태그
<q>: <blockquote>의 인라인 버전
<pre>: 서식 있는 텍스트를 넣기 위한 태그

목록 관련 태그

<ul>: 순서 없는 목록(unordered list)를 표시한다.
<ol>: 순서 있는 목록(oredered list)를 표시한다.
<li>: 목록에서 각 항목(list item)은 <li>와 </li> 사이에 넣는다.

<ul>
　　<li>순서가 없는 첫번째 항목입니다.</li>
　　<li>순서가 없는 두번째 항목입니다.</li>
</ul>
<ol>
　　<li>순서가 있는 첫번째 항목입니다.</li>
　　<li>순서가 있는 두번째 항목입니다.</li>
</ol>

　　
순서가 없는 첫번째 항목입니다.
　　
순서가 없는 두번째 항목입니다.

　　
순서가 있는 첫번째 항목입니다.
　　
순서가 있는 두번째 항목입니다.

<dl>: 정의 목록(definition list)을 표시한다.
<dt>: 정의 목록의 정의(definition term)를 기술한다.
<dd>: 정의 목록의 뜻풀이(definition description)를 기술한다.

링크, 이미지 관련

<a>: 하이퍼링크를 생성하는 태그

<a href="https://velog.io/@geon8692">내 블로그</a>

내 블로그

<img>: 페이지에 이미지를 추가하는 태그
- src: 이미지파일의 경로를 지정하는 태그 속성
- alt: 이미지를 볼 수 없는 경우에 이미지에 대한 설명을 제공
- title: 이미지에 마우스를 갖다대면 추가 정보 제공
- height,widht: 이미지의 세로, 가로폭을 지정

<img src="https://velog.velcdn.com/images/geon8692/post/6e3d1b93-09d5-49d7-83e1-92a41a4ccdd0/image.webp"
alt="파일:나무위키:로고1.png" title="파일:나무위키:로고1.png" width="200px">

<svg>: 페이지에 SVG 형식의 그래픽을 추가하는 태그

테이블 관련

<table>: 테이블을 만드는 태그
<tr>: 행(table row)을 시작
<td>: 표의 내용(table data), 셀을 표현

<table>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
　　<tr>
　　　　<td>A2</td>
　　　　<td>B2</td>
　　　　<td>C2</td>
　　</tr>
</table>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
A1 B1 C1
A2 B2 C2

<th>: 테이블의 행, 열의 머리말(table heading)을 나타낸다.

<table>
　　<tr>
　　　　<th>A</th>
　　　　<th>B</th>
　　　　<th>C</th>
　　</tr>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
</table>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
A B C
A1 B1 C1

A	B	C
A1	B1	C1

colspan. rowspan속성으로 셀을 병합할 수 있다.

<table>
　　<tr>
　　　　<th> </th>
　　　　<th>월</th>
　　　　<th>수</th>
　　　　<th>금</th>
　　</tr>
　　<tr>
　　　　<th>1교시</th>
　　　　<td rowspan="2">국어</td>
　　　　<td>수학</td>
　　　　<td>영어</td>
　　</tr>
　　<tr>
　　　　<th>2교시</th>
　　　　<!-- 병합되었으므로 쓰지 않습니다. -->
　　　　<td>과학</td>
　　　　<td>사회</td>
　　</tr>
</table>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
월 수 금
1교시 국어 수학 영어
2교시 과학 사회

	월	수	금
1교시	국어	수학	영어
2교시	과학	사회

<caption>: 테이블의 제목을 기술
<colgroup>, <col>: 테이블 상단에 넣어 테이블의 열 정보를 기술
<thead>, <body>, <tfoot>: 테이블의 세부 구조를 기술. 각각 표의 상단, 본문, 하단 부분에 대응

입력 폼 관련 태그

<form>: 입력값을 받는 영역을 지정. 한 페이지에 여러개가 들어갈 수는 있지만, 영역 안에 영역이 드러가는 것은 불가능
<input>: 입력값 요소를 지정. <type>에 따라 다른 입력값을 취한다.
- <text>: 기본값으로 한 줄 짜리 문자열 값
- <num>: 숫자
- <url>: 도메인 주소
- <email>: 이메일
- <tel>: 전화번호
- <search>: 검색어
- <range>: 지정한 범위의 숫자
- <color>: 색
- <data>: 날짜
- <time>: 시각
- <datetime>: 날짜+시각
- <checkbox>: 선택/해제를 할 수 있는 항목
- <radio>: 선택/해제를 할 수 있는 항목이나 중복 선택은 불가능
- <button>: 누를 수 있는 버튼을 생성
- <submit>: 누를 경우 입력값을 전송시키는 버튼 생성
- <image>: submit + <img> 태그
- <reset>: 누를 경우 입력값을 초기화시키는 버튼 생성
- <hidden>: 투명라인. 입력값을 수정하지 않고 곧바로 보낼 때 쓰임
- <file>: 파일 업로드에 사용
<textarea>: 여러 줄의 문자열 값을 받는다.
<button>: <input type="button">과 거의 같다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다.
<output>: input태그처럼 입력값이지만 문자열이라 수정할 수 없다.
<datalist>: 검색어에 들어갈 목록을 지정한다.
<select>: 선택 목록
- <option>: 선택 목록에 들어갈 항목. <input type="radio">와 같다.
<fieldset>: 폼 요소를 그룹으로 묶어준다.
- <legend>: <fieldset>으로 묶어준 그룹에 제목을 지정해 준다.
<label>: 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.

input 속성들

value: 입력필드에 대한 초기값을 저장
readonly: 입력필드가 읽기전용임을 지정
disabled: 입력필드가 사용불가임을 지정
size: 입력필드의 크기(문자들)를 지정
autocomplete: 폼이나 입력필드가 자동완성 기능을 지원할 지 여부를 지정
autofocus: 페이지가 로드될 때 자동적으로 초점을 받도록 한다.
placeholder: 사용자가 값을 입력하기 전에, 힌트(hint)가 입력필드에 표시
required: 폼을 제출하기 전에 입력필드가 작성되어야만 함을 지정

input

멀티미디어 관련 태그

<video>: 비디오 재생
<audio>: 오디오 재생
<canvas>: 스크립트를 통해 그래픽을 그리는 데 사용할 수 있다.

기타 태그

<base>: 상대 링크(relative link) 해석의 기준이 되는 URL을 지정한다. tistory.com에 올라온 HTML 파일에 base href가 "http://cafe.naver.com/cafesupport"로 지정되어 있다면 "joonggonara"라는 링크를 걸었을 때 https://cafe.naver.com/joonggonara로 해석된다.
<style>: CSS 사용. 되도록이면 <link> 태그를 쓰기를 권장한다.
<script>: 스크립트를 사용한다. <script type="text/javascript"> ... </script> 식으로 스크립트 타입을 지정해서 사용한다.
<div>: 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다. 사실 div만 남발하는 것도 올바른 사용법은 아니고, 용도에 따라 여러가지 태그를 적절히 사용하는 것이 중요하다.
<span>: <div>의 인라인 버전.
<figure>, <figcaption>: 그림이 덧붙여지는 내용 작성에 사용한다.