기본 태그
| 태그 | 내용 | |
| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 | |
| <html lang="en"></html> | 문서를 시작할때는 html로 시작 (lang="사용한언어") 한국어 : ko / 영어 : en / 중국어 : zh / 일본어 : ja / 독일 : de 프랑스 : fe / 스페인 : es / 러시아 : ru |
|
| <head></head> | 브라우저의 정보를 입력하는곳 * 웹사이트 상에는 표시되지 않는다. |
|
| <meta charset="UTF-8"> | 브라우저에게 text를 어떻게 그려달라고 말해주는것 * 작성하지 않을시 한글, 특수문자 들이 깨질수 있다.  |
|
| <title></title> | 문서 제목 (웹페이지 상단에 나오는 웹페이지 제목) | |
| <body></body> | 브라우저의 콘텐츠를 보여주는 곳 | |
💚 Tip
Emmet 기능을 사용하면 [! + Tab]을 이용해서 쉽게 기본 틀을 잡을 수 있다.
문서 구조 태그
| 태그 | 내용 |
| <header></header> | 헤더영역 |
| <main></main> | 메인영역 |
| <nav></nav> | 네비게이션 영역 *메뉴/카테고리 |
| <article></article> | 독립적인 콘텐츠를 사용할 때 |
| <section></section> | 콘텐츠 영역 |
| <figure></figure> | 이미지/영상 영역 |
| <aside></aside> | 사이드 바 영역 *배너, 팝업 |
| <div></div> | 박스로 묶을때 사용 |
| <footer></footer> | 푸터 영역 |
내용 입력 태그
텍스트 관련 태그
| 태그 | 내용 |
| <h1>~<h6> | 제목 |
| <p> | 단락 |
| <br> | 줄 바꿈, 닫는태그X |
| <blockquote> | 인용문, 들여쓰기 적용됨 |
| <i> | 텍스트 기울임 |
| <b> | 텍스트 굵게 |
| <em> | 텍스트 기울임 * 텍스트를 강조할때 사용한다. (의미변환O) |
| <strong> | 텍스트 굵게 * 중요성, 심각성, 긴급성이 있는 분분에 쓴다 (의미변환X) |
| <u> | 텍스트 밑줄 |
| <s> | 텍스트 취소선 |
| <abbr> | 줄임말 |
| <cite> | 참고 내용 |
| <code> | 소스 코드 |
| <small> | 작은 텍스트 |
| <sub> | 아래 첨자 |
| <sup> | 위 첨자 |
| <ins> | 공동작업문서에 새로운 내용 삽입 |
| <del> |
공동작업문서의 기존 내용 삭제 |
목록 태그
| 태그 | 내용 | ||
| <ol> | 순서가 있는 목록 (ordered list) | ||
| type = "1" | 숫자(기본값) | ||
| type = "a" | 영문 소문자 | ||
| type = "A" | 영문 대문자 | ||
| type = "i" | 로마 숫자 소문자 | ||
| type = "I" | 로마 숫자 대문자 | ||
| start="3" | 숫자 3 부터 시작 | ||
| <ul> | 순서가 없는 목록 (unordered list) | ||
| <li> | 리스트 | ||
설명 목록 태그
| 태그 | 내용 |
| <dl> | 용어(term)와 설명(description)을 리스트 형식으로 정의할때 사용 |
| <dt> | 설명할 용어(term) |
| <dd> | 설명할 내용(description) |
 |
 |
표 태그
| 태그 | 내용 |
| <tabel> | 테이블 만들기 |
| <caption> | 표 제목 |
| <tr> | 행 삽입 |
| <td> | 셀 삽입 |
| <th> | 셀 삽입(진하게 표시) |
| <thead> | 표 제목 |
| <tbody> | 표 본문 |
| <tfoot> | 표 요약 |
행(row), 열(col) 합치기
| 속성 | 내용 |
| rowspan = "2" | 2개의 행 합치기 (세로) |
| colspan = "3" | 3개의 열 합치기 (가로) |
열(col) 스타일 속성 지정
| 태그/속성 | 내용 |
| <colgroup> | 여러 열을 지정할때 사용 |
| <col> | 단일 열만 지정할때 사용 |
 |
 두번째 열부터 그다음 열까지 배경색을 yellow로 설정 |
이미지 관련 태그 및 속성
| 태그/속성 | 내용 |
| <img> | 이미지를 삽입하는 태그 |
| src = "" | 이미지 파일 경로 |
| alt = "" | 대체용 텍스트 * 시각장애인을 위해 필수로 작성해주어야하는 부분 |
| width = "" | % : 브라우저 창의 크기 단위 px : 픽셀 단위 * CSS에서 수정 가능 굳이 html창에 안써도됨 |
| height = "" | |
 |
|
오디오, 비디오 관련 태그 및 속성
| 태그/속성 | 내용 |
| <object> | 오디오, 비디오, PDF등을 삽입할 때 사용한다. |
 |
|
| <embed> | 오디오, 비디오, 이미지 등 삽입할 때 사용한다. |
 |
|
| <audio> | 프러그인 없이 브라우저에서 바로 재생 가능한 오디오를 삽입할 때 사용 * HTML5 부터 사용 가능 |
 |
|
| <video> | 플러그인 없이 브라우저에서 바로 재생 가능한 비디오를 삽입할 때 사용 * HTML5 부터 사용 가능 |
 |
|
| controls | 컨트롤 바 표시 |
| autoplay | 자동 재생 |
| loop | 반복 재생 |
| muted | 음소거 |
| preload | 로딩방법 |
| width = "00px" | 비디오 플레이어 너비 지정 |
| height = "00px" | 비디오 플레이어 높이 지정 |
| poster = "파일 이름" | 비디오 플에이어 재생 전 포스터 |
하이퍼 링크 태그
| 태그/속성 | 내용 |
| <a> | 하이퍼 링크 생성 태그 |
| href = "" | 링크 주소 |
| target = "_blank" | 새로운 윈도우나 탭에서 오픈 |
| target = "_self" | 기본값 |
| target = "_parent" |
현재 프레임의 부모 프레임에서 오픈 |
| target = "_top" |
현재 윈도우 전체에서 오픈 |
폼 입력
<form [속성="속성값"]> 여러 폼 요소 </form>| 태그/속성 | 내용 |
| <form> | 폼 생성 태그 |
| <fieldset> | 폼 내부에서 구역을 나누는 태그 |
| <legend> | 구역 제목 붙이기 |
| method = "get" | 사용자가 입력한 내용이 드러나게 서버로 넘겨줌 |
| method = "post" | 사용자가 입력한 내용이 드러나지 않게 서버로 넘겨줌 |
| name = "" | 자바스크립트로 폼 이름 지정 |
| action = "" | 서버 프로그램 지정 |
| target = "" | 열어볼 파일 위치 지정 |
| autocomplete = "" | 자동 완성 기능 지정 (기본값 On) |
<label> 안으로 폼 요소 넣기
<label>레이블명<input></label>for속성과 폼 요소의 id를 연결시키기
<label for="id명">레이블명<input id="id명"></label>input의 type 속성 값
| 속성 | 내용 |
| text | 한 줄 텍스트 |
| password | 비밀번호 |
| search | 검색창 |
| url | URL |
| 이메일 주소 | |
| tel | 전화번호 |
| checkbox | 체크박스 (중복 체크 가능) |
| radio | 라디오 버튼 (단일 선택) |
| number | 숫자 스핀 박스 |
| range | 숫자 슬라이드 막대 |
| date | local - 연 월 일 |
| month | local - 연 월 |
| week | local - 연 주 |
| time | local - 시 분 초 분할 초 |
| datetime | UTC- 연 월 일 시 분 초 분할 초 |
| datetime-local | local - 연 월 일 시 분 초 분할 초 |
| submit | 전송버튼 |
| reset | 리셋 버튼 |
| image | submit 버튼 이미지 |
| button | 일반 버튼 |
| file | 파일 첨부 버튼 |
| hidden | 사용자에게 보이지 않는 값 |
| textarea | 여러 줄의 텍스트 입력 영역 *텍스트 박스 |
| select | 드롭다운 목록 생성 |
| datalist | 미리 입렵된 데이터 목록 |
| button | 버튼 |
text, password 속성
| 속성 | 내용 |
| size = "숫자" | 화면에 출력할 글자 수 |
| value = "텍스트" | text 필드에 보여줄 내용 |
| maxlength = "숫자" | input 요소에 입력할 수 있는 최대 문자수를 명시 |
checkbox, radio 속성
| 속성 | 내용 |
| value = "텍스트" | 서버에 전달될 값 |
| checked = "텍스트" | 항목 생성 |
| name = "텍스트" | radio에만 사용한다. * 이름이 같아야만 중복선택이 불가능하다. |
number, range 속성
| 속성 | 내용 |
| min = "숫자" | 최소값 (기본값 0) |
| max = "숫자" | 최대값 (기본값 100) |
| step = "숫자" | 조정할 단위값 (기본값 1) |
| value | 초기값 |
submit, reset 속성
| 속성 | 내용 |
| value = "텍스트 전송" | 버튼에 표시할 내용 |
image 속성
| 속성 | 내용 |
| src = "텍스트" | 이미지 경로 |
| alt = "텍스트" | 대체 텍스트 * 스크린 리더기에서 읽히는 부분 |
button 속성
| 속성 | 내용 |
| value = "텍스트" | 버튼에 표시할 내용 |
| onclick = "속성값" | 클릭 시 실행할 JS함수 |
input의 다른 주요 속성
| 속성 | 내용 |
| autofocus | 페이지를 불러오자마자 마우스 포인터가 표시 되게 한다. |
| placeholder = "텍스트" | text창에 힌트를 표시한다. |
| readonly = "속성값" | 읽기 전용 |
| required = "속성값" | 필수 입력 필드 |
'개발공부 > HTML' 카테고리의 다른 글
| HTML : input 태그의 모든것 (0) | 2022.07.12 |
|---|
댓글