반응형
#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> | 드롭다운 목록을 삽입 |
| <textarea> | 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입 |
| <datalist> | 데이터 목록을 삽입 |
#6 input 태그의 유형(type)
| 종류 | 설명 |
| text | 한 줄짜리 텍스트를 입력하는 텍스트 상자를 삽입 |
| password | 비밀번호를 입력할 수 있는 필드를 삽입 |
| search | 검색할 때 입력하는 필드를 삽입 |
| url | URL 주소를 입력할 수 있는 필드를 삽입 |
| 이메일 주소를 입력할 수 있는 필드를 삽입 | |
| tel | 전화번호를 입력할 수 있는 필드를 삽입 |
| checkbox | 복수를 선택할 수 있는 체크박스를 삽입 |
| 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 | 연결할 데이터 목록을 지정 |
반응형