TAG

tag는 Element라고 불리우며 그리고 <></>안에 있는 것을 content라고 한다.
웹페이지의 내용과 구조에 맞게 태그가 갖고 있는 의미와 역할을 고려에 사용해야한다.

Attributes (속성)

tag의 시작태그인 <>안에 들어가는 것으로
id, class를 넣어 고유명사로 혹은 태그들을 묶어서 사용하고 다른 속성으론
src은 이미지 경로, alt은 이미지 설명, stlye은 글자의 속성,
type은 텍스트인지 이미지인지, 혹은 버튼의 종류를 나타내기도 한다.

많이 쓰는 Tag의 종류

• div : 아무의미는 없지만 속성이 한줄로 되어있는 태그
• span : 역시 아무의미 없지만 content의 영역이 곧 자신의 영역인 태그
• ul, li, a
  • ul : 번호가 붙지 않는 리스트 목록 태그
  • li : 리스트 태그
  • a : 리스트 속 다른 페이지 링크나 같은 페이지에서의 이동가능한 태그
• br : 띄워쓰기 태그
• h1~h6 : 글자 크기를 정해져있는 속성으로 지정해주며 보통 제목이나 부제목으로 쓰는 태그
• form : 입력 양식 전체를 감싸는 태그
• input : 사용자에게 받아오는 데이터 태그
  (한 페이지안에 너무나 많이 사용되기 때문에 id를 통해서 고유한 식별자를 줘야 한다.)

---

form 태그

form안에는 input, textareat, select, label 등이 있다.

form의 attributes값은

• name : 서버로 보내질 때의 form의 데이터 이름 값
• action : form의 데이터 서버가 보내지는 url와 html 값
• method : 서버로 데이터를 통신하는 방법 (get과 post가 있음)
  • get은 기본 값이며, 항상 노출이 된다, URL 최대 256자까지,되도록 영문과 숫자 정도만 전송
  • post는 데이터를 url에 숨겨서 전송하는 방법, 데이터 노출이 없음(보안상 조금 더 안전), 무제한, 한글 상관없이 전송
• autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용
• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

input 태그

각 특징과 역할이 있는 태그로써 attributest 값인 name, type 이 있는데
name은 서버로 전송되는 태그 이름 값
type은 입력 형식으로 text, password, button, submit, reset, radio, checkbox, hidden, file 등이 있다.

text태그

text의 기본 형식
<input type = 'text' name = '' value = '' placeholder = ''>

---

<input type = 'text' name = 'id' value = '' placeholder = '안녕'>
name => 태그의 이름
value => 기본으로 적혀있는 값, 지우고 새로운 내용 적어도 됨
placeholder => 커서를 누르기 전에 보여지는 값

=> 결과 값

password태그

password의 기본 형식
<input type = 'password' name = '' value = '' placeholder = ''>

---

<input type = 'password' name = 'pwd' value = '' placeholder = 'password'>
name => 태그의 이름
vlaue => 기본으로 주는 값, password라 기본값도 문자가 아닌 '·'으로보임 
placeholder => 커서를 누르기 전에 보여지는 값

=> 결과 값

button태그

button의 기본 형식
<input type = 'button' name = '' value = '' onclick = ''>

---

<input type = 'button' name = 'bt' value='button' onclick='alert("hello world")'>
name => 태그의 이름
vlaue => 기본으로 주는 값
onclick = 'alert()' => 클릭해서 나타나는 창

=> 결과 값

submit태그

submit의 기본 형식
<input type = 'submit' name = '' value = '' onclick = ''>

---

<input type = 'submit' name = 'sub' value='제출하기' onclick='alert('hello world')'>
name => 태그의 이름
vlaue => 기본으로 주는 값
onclick = 'alert()' => 클릭해서 나타나는 창

=> 결과 값

radio태그 (단일선택 태그)

radio의 기본 형식
<input type = 'radio' name = '' value = '' onclick = ''>

---

<br><input type="radio" name="color" value="red"> 빨간색 
<br><input type="radio" name="color" value="green"> 초록색
name => 태그의 이름
vlaue => 가지고 있는 데이터 값

=> 결과 값
빨간색
초록색

checkbox태그 (다중선택 태그)

checkbox의 기본 형식
<input type = 'radio' name = '' value = '' onclick = ''>

---

<br><input type="checkbox" name="color" value="red"> red 
<br><input type="checkbox" name="color" value="green"> green
<br><input type="checkbox" name="color" value="blue" checkd> blue
name => 태그의 이름
vlaue => 가지고 있는 데이터 값
chedck => 절대로 체크되어 있게 설정

=> 결과 값
red
green
blue

---

Q&A

input type = 'button' vs input type = 'submit'

button은 보통 JS를 이용하여 다양한 역할을 하게 하지만 submit은 말 그래도 제출하다라는 뜻으로 데이터 값을 어디로 보내는 역할을 한다.

input type="submit" vs button

button의 type 기본 값이 submit이기 때문에 기능적으로 동일하지만 button이 CSS적인 부분에서 월등하다고 말하고 있다.
<button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다.

---