☑️ HTML의 태그를 총 정리해보자!
1. 텍스트 관련 태그
| 태그 종류 | 설명 |
|---|---|
| hn | 제목 / h1~h6까지 숫자가 커질수록 글자 크기는 작아진다. |
| p | 텍스트 단락 / 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다. |
| br | 줄 바꿈 / 텍스트 단락 중 원하는 위치에서 줄을 바꾼다. |
| blockquote | 내용 인용 / 다른 내용보다 들여 쓰고 단락으로 표시한다. |
| strong | 중요한 텍스트를 굵게 표시한다. |
| b | 중요하지는 않지만 굵게 표시한다. |
| em | 중요한 텍스트를 기울게 표시한다. |
| i | 중요하지는 않지만 기울게 표시한다. |
| ins | 내용을 편집할 때 추가한 내용을 표시한다. |
| del | 내용을 편집할 때 삭제한 내용을 표시한다. |
| sup | 위 첨자 |
| sub | 아래 첨자 |
2. 목록 관련 태그
| 태그 종류 | 설명 |
|---|---|
| ol | 순서 있는 목록의 시작과 끝을 나타낸다. |
| ul | 순서 없는 목록의 시작과 끝을 나타낸다. |
| li | 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타낸다. |
| dl | 설명 목록의 시작과 끝을 나타낸다. |
| dt | 설명 목록의 이름을 나타낸다. |
| dd | 설명 목록의 값을 나타낸다. |
3. 표 관련 태그
| 태그 종류 | 설명 |
|---|---|
| table | 표를 나타낸다. |
| caption | 표의 제목을 넣는다. |
| tr | 표의 행을 만든다. |
| td | 표의 셀을 만든다. |
| th | 제목 셀을 만든다. |
| thead | 표 구조에서 제목 부분을 나타낸다. |
| tbody | 표 구조에서 본문 부분을 나타낸다. |
| tfoot | 표 구조에서 요약이나 정리 부분을 나타낸다. |
| col | 표에서 열의 스타일을 지정한다. |
| colgroup | 표에서 여러 열을 함께 묶어서 스타일을 지정한다. |
4. 멀티미디어 관련 태그
| 태그 종류 | 설명 |
|---|---|
| object | 멀티미디어, PDF 파일 등 다양한 형식의 파일을 삽입한다. |
| embed | audio, video, object 태그가 지원되지 않을 경우 멀티미디어 파일을 삽입한다. |
| img | 이미지 파일을 삽입한다. |
| audio | 오디오 파일을 삽입한다. |
| video | 비디오 파일을 삽입한다. |
5. 폼에서 사용하는 태그
| 태그 종류 | 설명 |
|---|---|
| form | 폼의 시작과 끝을 만든다. |
| fieldset | 폼 요소를 그룹으로 묶는다. |
| legend | 필드셋에 제목을 붙인다. |
| input | 사용자가 내용을 입력할 필드를 삽입한다. |
| select, option | 드롭다운 목록을 삽입한다. |
| trxtarea | 텍스트를 여러 줄 입력할 수 잇는 텍스트 영역을 삽입한다 |
| datalist | 데이터 목록을 삽입한다. |
6. < input > 태그의 유형
| 태그 유형 종류 | 설명 |
|---|---|
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. |
| password | 비밀번호를 입력할 수 있는 필드를 넣는다. |
| search | 검색할 때 입력하는 필드를 넣는다. |
| url | URL 주소를 입력할 수 있는 필드를 넣는다. |
| 이메일 주소를 입력할 수 있는 필드를 넣는다. | |
| tel | 전화번호를 입력할 수 있는 필드를 넣는다. |
| checkbox | 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣는다. |
| radio | 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. |
| number | 숫자를 조절할 수 있는 스핀 박스를 넣는다. |
| range | 숫자를 조절할 수 있는 슬라이드 막대를 넣는다. |
| date | 사용자 지역을 기준으로 날짜 (연, 월, 일)를 넣는다. |
| month | 사용자 지역을 기준으로 날짜 (연, 월)를 넣는다. |
| week | 사용자 지역을 기준으로 날짜 (연, 주)를 넣는다. |
| time | 사용자 지역을 기준으로 시간 (시, 분, 초, 분할 초)을 넣는다. |
| datetime | 국제 표준시 (UTC)로 설정된 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)를 넣는다. |
| datetime-local | 사용자가 있는 지역을 기준으로 날짜와 시간 (연, 월, 일, 시, 분, 초, 분할 초)를 넣는다. |
| submit | 전송 버튼을 넣는다. |
| reset | 리셋 버튼을 넣는다. |
| image | SUBMIT 버튼 대신 사용할 이미지를 넣는다. |
| button | 일반 버튼을 넣는다. |
| file | 파일을 첨부할 수 있는 버튼을 넣는다. |
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다. |
7. < input > 태그의 속성
| 태그 속성 종류 | 설명 |
|---|---|
| autofocus | 웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시한다. |
| placeholder | 텍스트 필드에 힌트를 표시한다. |
| readonly | 입력 필드를 읽기 전용으로 지정한다. |
| required | 필수 입력 필드를 지정한다. |
| max | 숫자 입력 필드에서 최댓값을 지정한다. |
| min | 숫자 입력 필드에서 최솟값을 지정한다. |
| step | 숫자 입력 필드에서 증감할 간격을 지정한다. |
| maxlength | 텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정한다. |
| minlength | 텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정한다. |
| size | 텍스트 관련 필드에서 화면에 표시할 크기를 지정한다. |
| list | 연결한 데이터 목록을 지정한다. |
