[HTML 기본 태그]

<h1~6></h1~6> : 제목태그 1~6

글자크기 큰 순서대로 1~6

<p></p> : 문단태그 (paragraph)

자동 줄 바꿈x

<br> : 줄 바꿈 태그 

빈 요소 태그 (닫는태그x)

<lorem> : 더미태그_자동 text 완성 기능 

영어만 지원 ex) lorem5 

<ul></ul> <li></li> : 순서가 없는 목록태그 (un ordered list)

ul 부모태그 li 자식태그

<ol></ol> <li></li> : 순서가 있는 목록태그 (ordered list)

ol 부모태그 li 자식태그 

<dl></dl> : 정의형 목록태그

<dt>/<dt> : 정의할 목록의 제목태그

<dd></dd> : 정의할 목록의 내용태그 

dl 부모태그 dt,dd 자식태그

<!/__주석내용__> : 주석태그 ctrl+/ 

<strong></strong> : 강조태그_진하게

<em></em> : 강조태그_눕혀서

<a></a> : 이동태그

<a href="경로"></a> : 하이퍼링크 태그_현재 페이지에서 바로 열림

a 태그 클릭시 어떤 일이 일어나는지 title 태그로 설명하는 게 좋음, 웹 접근성을 높임

ex) <a href="경로" title="기존 페이지에서 네이버 이동"></a>

<a href="" target="-blank"></a> : 하이퍼링크 태그_새 탭으로 열기

<img src="경로" alt=""> : 이미지태그 (<img 

빈요소태그

src : 이미지 소스 경로 지정

alt : 이미지 대체 텍스트 입력 (웹 접근성을 위해 반드시 입력)

<video src=""></video> : 비디오태그 (<video

src : 비디오 소스 경로 지정

- video 속성값

controls : 재생 가능하게 

muted : 자동 음소거

autoplay : 자동재생

loop : 무한 반복재생

poster : 동영상 썸네일 지정 (loop 속성 없을 때)

poster="경로"

<audio src="경로"></audio> : 오디오태그 

- audio 속성값

controls : 재생 패널 보이기

muted : 음소거

autoplay : 자동재생

loop : 무한 반복재생

<table></table> : 테이블태그 (부모태그) 

- table 속성값

border="" : 칸 테두리 태그

width="" : 칸 너비값 태그 

<tr></tr> : 행(줄) 태그 (자식태그)

ex) <tr><td>1</td><td>2</td><td>3</td></tr> : 한 줄에 1,2,3이 쓰여진 3칸 

<td></td> : 칸 태그 (자자식태그)

<colspan=""> : 열 합치기

ex) <td colspan="2">1,2</td> 

<td colspan="2"> : 2칸 합친다 1,2 : 1,2가 쓰여진 가로 칸

<rowspan=""> : 행 합치기 

ex) <td rowspan="2"><4,8></td>

<td rowspan="2"> : 2칸 합친다 4,8 : 4,8이 쓰여진 세로 칸

<caption></caption> : 테이블 제목태그 

테이블 위 제목 

<thead></thead> : 테이블 데이터 제목태그 

table>caption>tr>th=td

ex) <thead><tr><th>제목</th></tr></thead>

<th></th> : 테이블 데이터 제목 칸태그

th : 진하게 td : 기본 

<form action="/" method="get"></form> : 폼태그 (입력태그) 부모태그

 action="/" : 현재 페이지로 값을 전송 method="get" : 주소줄에 값을 문자형태로 전송

<input type"@"> : 인풋태그 자식태그

빈요소태그

form 태그에 input type 여러 속성, select 태그는 추가로 옵션값 필요

 

*사용자에게 값을 입력 받을 때

-type 속성 (@)

1. text 태그 : name 지정, 입력값이 글자로 표시됨 ex) <input type"text" name=userid>

2. password 태그 : name 지정, 입력값이 점으로 표시됨 ex) <input type"password" name=pwd>

3. submit 태그 : 제출 버튼이 표시됨 ex) <input type"submit">

4. reset 태그 : 초기화 버튼이 표시됨 ex) <input type"reset">

*사용자가 값을 선택할 때_복수 가능

id : html 요소의 고유 ID 지정, 중복될 수 X

name : 웹에 전송되는 이름(주소창에 name값이 표시), 해당 값이나 전달된 데이터를 가져올 수 있음, form 태그 내부에서 사용 (input 태그에 존재하는 속성) 

value : 서버로 전송시 name값에 어떤 내용을 담을지

submit : 해당 요소 name값에 value값을 담아 action 위치로 전송

-type 속성 

1. checkbox 태그 (+label,name,id), 네모 박스 눌러 체크 선택

구조 :

<label for"@"></label>

<input type="checkbox" name="@" id="@">

ex) 취미 (중복O)

<label for "soccer">축구</label>

<input type="checkbox" name="habbit" id="soccer">

*사용자가 값을 선택할 때_복수 불가능 

 -type 속성

1. radio 태그 (+label, name, id), 둥근 박스 눌러서 체크 선택

<label for="@"></label>

<input type="radio" name="@" id="@">

ex) 성별 (중복X)

<label for "female">여성</label>

<input type="radio" name="gender" id="female">

2. select 태그 (+label, name, id,option), 드롭다운하여 선택

<label for="@"></label>

<select name="@" id="@"></select>

<option value="@"></option>

value : 서버로 전송시 name값에 어떤 내용을 담을지

ex) 최종학력 (중복X)

<label for="edu">최종학력</label>

<select name="education" id="edu"></select>

<option value="elementary">초등학교</option>

<option value="middleschool">중학교</option> 

*그 밖의 input 태그

<input type="color"> : 색 지정

<input type="date"> : 날짜 지정 

<input type="datetime"> : 시간 입력

<input type="email"> : 이메일 주소 입력

<input type="range"> : 범위 지정 

<textarea name="comments" id="comments" cols="30" rows="10"></textarea> : 글 입력 가능한 박스 만들기 

* input type 속성 정리

text,password => name

checkbox,radio => label,name,id

select => label,name,id,option 

<div></div> : 그룹화 태그 ctrl+i 

영역을 나누기 위한 가상의 레이아웃을 설계, 연관된 컨텐츠 그룹화 

ex) 도시별

<div>

  <h1>파리</h1>

  <p>lorem20</p>

  <a href="#">view</a>  

</div>