웹 개발시 사용하는 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> 태그의 속성 : <form [속성=“속성값”]>여러 폼 요소</form>
| 종류 |
설명 |
| method |
사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다.
get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있습니다.
post: 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않습니다. |
| name |
자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다. |
| action |
<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다. |
| target |
action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다. |
6. <input> 태그의 type속성
| 종류 |
설명 |
| text |
한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣습니다 |
| password |
비밀번호를 입력할 수 있는 필드를 넣습니다. |
| search |
검색할 때 입력하는 필드를 넣습니다. |
| url |
URL 주소를 입력할 수 있는 필드를 넣습니다. |
| email |
이메일 주소를 입력할 수 있는 필드를 넣습니다. |
| tel |
전화번호를 입력할 수 있는 필드를 넣습니다. |
| checkbox |
주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다. |
| radio |
주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다. |
| number |
숫자를 조절할 수 있는 스핀 박스를 넣습니다. |
| range |
숫자를 조절할 수 있는 슬라이드 박스를 넣습니다. |
| date |
사용자 지역을 기준으로 날짜(연, 월, 일)을 넣습니다. |
| month |
사용자 지역을 기준으로 날짜(연, 월)을 넣습니다. |
| week |
사용자 지역을 기준으로 날짜(연, 주)을 넣습니다. |
| time |
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣습니다. |
| datetime |
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)를 넣습니다. |
| datetime-local |
사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다. |
| submit |
전송 버튼을 넣습니다. |
| reset |
리셋 버튼을 넣습니다. |
| image |
submit 버튼 대신 사용할 이미지를 넣습니다. |
| button |
일반 버튼을 넣습니다. |
| file |
파일을 첨부할 수 있는 버튼을 넣습니다. |
| hidden |
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듭니다. |
7. 텍스트와 비밀번호를 나타내는 type=“text”와 type=“password”
<input type=“text”>
<input type=“password”>
| 종류 |
설명 |
| size |
텍스트와 비밀번호 필드의 길이를 지정합니다. 즉, 화면에 몇 글자가 보이도록 할 것인지를 지정합니다. 예를 들어 최대로 입력할 수 있는 글자 수가 10개인데 size속성값을 5로 지정하면 필드크기는 5개 글자크기에 맞추고 나머지 5개 글자는 화면에 보이지 않습니다. |
| value |
텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용입니다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시됩니다. 비밀번호 필드에서 사용하지 않는 속성입니다. |
| maxlength |
텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정합니다. |
7. 체크 박스와 라디오 버튼을 나타내는 type=“checkbox”와 type=“radio”
<input type=“checkbox”>
<input type=“radio”>
<체크 박스, 라디오 버튼에서 사용하는 속성>
| 종류 |
설명 |
| value |
선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정합니다.
이 값은 영문이거나 숫자여야 하며 필수 속성입니다. |
| checked |
체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용합니다. 속성값은 따로 없습니다. |
8. 숫자 입력 필드를 나타내는 type=“number”와 type=“range”
<input type=“number”>
<input type=“range”>
| 속성 |
설명 |
| min |
필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최소값은 0입니다. |
| max |
필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최대값은 100입니다. |
| step |
숫자 간격을 지정할 수 있습니다. 기본값은 1입니다. |
| value |
필드에 표시할 초깃값입니다. |
9. 전송, 리셋 버튼을 나타내는 type=“submit”와 type=“reset”
<input type=“submit | reset” value=“버튼에 표시할 내용”>
*전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송합니다. submit 버튼으로 전송된 정보는 <form>태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨집니다.
*반면에 reset버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다.
10. 기본 버튼을 나타내는 type=“button”
type=“button”은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다. 다음과 같이 value속성을 사용해 버튼에 표시할 내용을 지정합니다.
<input type=“button” value=“버튼에 표시할 내용”>
11. 파일을 첨부할 대 사용하는 type=“file”
type=“file”로 지정하면 폼에 파일을 첨부할 수 있습니다. 다만, 첨부한 파일을 서버로 보내려면 자바스크립트 등 웹프로그래밍 언어를 사용해야 합니다. 실제 첨부 버튼에 표시되는 내용은 웹 브라우저마다 조금씩 다릅니다.
<input type=“file”>
12. 히든 필드 만들 때 사용하는 type=“hidden”
화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소. 사용자에게 굳이 보여 줄 필요 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력.
웹 브라우저에는 히든 필드가 보이지 않으므로 사용자는 그 정보를 알 수 없다. 그러나 ‘로그인’ 버튼을 클릭하면 입력한 정보화 함께 히든 필드의 내용이 서버로 함께 전송 가능.
<input type=“hidden” name=“이름” value=“서버로 넘길 값”>
13. input 태그의 주요 속성
- HTML5에 와서 폼 태그는 더욱 강력해졌다. 입력란에 커서나 힌트를 표시할 수도 있고, 꼭 입력해야 하는 필드도 지정할 수 있다.(예전에는 자바스크립트로 실행한 것을 <input> 태그의 속성만으로도 처리할 수 있다.
1) 자동으로 입력 커서를 갖다 놓는 autofocus 속성
<label for ="user-name">이름 </label >
<input type ="text"id ="user-name"autofocus required >
2) 힌트를 표시해 주는 placeholder 속성
<label for ="phone">연락처 </label >
<input type ="tel"id ="phone"placeholder ="하이픈 빼고 입력해 주세요.(01012345678)"required >
3) 읽기 전용 필드를 만들어 주는 readonly 속성
- readonly 속성은 readonly, readonly=“readonly”, readonly=“true” 로 지정
<input type=“텍스트 입력 필드” readonly>
<label for ="prod">주문 상품 </label >
<input type ="text"id ="prod"value ="상품용 3KG"readonly >
4) 필수 입력 필드를 지정하는 require 속성
- required=“required”, required 로 지정
<label for ="addr">배송 주소 </label >
<input type ="text"id ="addr"required >
14. 여러 줄을 입력하는 텍스트 영역 <textarea> 태그
- <textarea> 태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.
<textarea>내용</textarea>
<textarea> 태그의 속성
| 종류 |
설명 |
| cols |
텍스트 영역의 가로 너비를 문자 단위로 지정합니다. |
| rows |
텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다. |
<label for ="memo">메모 </label >
<textarea id ="memo"cols ="40"rows ="4"></textarea >
15. 드롭다운 목록을 만들어 주는 <select>, <option> 태그
<select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다. <option> 태그에는 value속성을 이용해 서버로 넘겨주는 값을 지정한다.
<select>
<option value=“값1”>내용1</option>
<option value=“값2”>내용2</option>
.....
</select>
<select>태그의 속성
| 종류 |
설명 |
| size |
화면에 표시할 드롭다운 항목의 개수를 지정한다. |
| multiple |
드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용한다. |
<option>태그의 속성
| 종류 |
설명 |
| value |
해당 항목을 선택할 때 서버로 넘겨줄 값을 지정 |
| selectec |
드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정 |
16. 버튼을 만들어 주는 <button> 태그
10번과 비슷하게 보이지만 다릅니다. <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다. <button> 태그의 type속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다. submit, reset, button 중에서 선택할 수 있고, 만약 지정하지 않으면 submit을 선택한 것으로 간주된다. <button>태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.
<button type=“submit”>내용</button>
<button type=“reset”>내용</button>
<button type=“button”>내용</button>
<button>태그의 type 속성
| 종류 |
설명 |
| submit |
폼을 서버로 전송합니다. <input type=“submit”> 과 같은 기능을 한다. |
| reset |
폼에 입력한 내용을 초기화합니다. <input type=“reset”>과 같은 기능을 한다. |
| button |
버튼 형태만 만들 뿐 자체 기능은 없다. <input type=“button”> 과 같은 기능을 한다. |
17. 폼에서 사용하는 태그
| 종류 |
설명 |
| <form> |
폼의 시작과 끝을 만든다. |
| <fieldset> |
폼 요소를 그룹으로 묶는다. |
| <legend> |
필드셋에 제목을 붙인다. |
| <input> |
사용자가 내용을 입력할 필드 삽입한다.(‘<input> 태그의 유형’ 참고) |
| <select>, <option> |
드롭다운 목록을 삽입 |
| <textarea> |
텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입 |
| <datalist> |
데이터 목록을 삽입 |
18. <input> 태그의 유형(type)
| 종류 |
설명 |
| text |
한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. |
| password |
비밀번호를 입력할 수 있는 필드를 넣는다. |
| search |
검색할 때 입력하는 필드를 넣는다. |
| url |
URL 주소를 입력할 수 있는 필드를 넣는다. |
| email |
이메일 주소를 입력할 수 있는 필드를 넣는다. |
| tel |
전화번호를 입력할 수 있는 필드를 넣는다. |
| checkbox |
주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣는다. |
| radio |
주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. |
| number |
숫자를 조절할 수 있는 스핀 박스를 넣는다. |
| range |
숫자를 조절할 수 있는 슬라이드 막대를 넣는다. |
| date |
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다. |
| month |
사용자 지역을 기준으로 날짜(연, 월)를 넣는다. |
| week |
사용자 지역을 기준으로 날짜(연, 주)를 넣는다. |
| time |
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)를 넣는다. |
| datetime |
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣는다. |
| datetime-local |
사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 분할 초)을 넣는다. |
| submit |
전송 버튼을 넣는다. |
| reset |
리셋 버튼을 넣는다. |
| image |
submit 버튼 대신 사용할 이미지를 넣는다. |
| button |
일반 버튼을 넣는다. |
| file |
파일을 첨부할 수 있는 버튼을 넣는다. |
| hidden |
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다. |
19. <input> 태그의 속성
| 종류 |
설명 |
| autofocus |
웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시한다. |
| placeholder |
텍스트 필드에 힌트를 표시한다. |
| readonly |
입력 필드를 읽기 전용으로 지정한다. |
| required |
필수 입력 필드를 지정한다. |
| max |
숫자 입력 필드에서 최대값을 지정한다. |
| min |
숫자 입력 필드에서 최소값을 지정한다. |
| step |
숫자 입력 필드에서 증감할 간격을 지정한다. |
| maxlength |
텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정한다. |
| minlength |
텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정한다. |
| size |
텍스트 관련 필드에서 화면에 표시할 크기를 지정한다. |
| list |
연결할 데이터 목록을 지정한다. |
