(4) HTML5 심화 문법

*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 2019년 7월 4일(목)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

1. form 태그

HTML에는 사용자의 정보를 입력받을 수 있는 <form> tag가 존재한다. <form> element는 하위에 정보를 입력받을 다양한 종류의 element tag가 존재한다.

<input> : 사용자가 정보를 입력할 수 있는 input field를 생성하는 tag이다. 다양한 종류의 input type이 존재한다.
- <input type="text"> : text 입력할 수 있는 box
- <input type="submit"> : 입력한 정보를 제출하는 button 생성
- <input type="reset"> : 입력한 정보들을 reset하는 button 생성
- <input type="date"> : 날짜 선택 가능
- <input type="radio"> : 여러 선택지 중 하나를 선택할 수 있는 radio button 생성. name attribute를 동일하게 설정해야 같은 group으로 인식해 하나만 선택하도록 할 수 있다.
- <input type="checkbox"> : 다중선택 checkbox button 생성
- <input type="password"> : 비밀번호 입력 field 생성. min=5 와 같이 최소 x글자 이상 입력하도록 설정할 수있다.
- <input required> : 필수로 입력해야 한다. 입력하지 않을 경우 form 제출이 불가능하다.
<select> : dropdown 메뉴가 생성된다. 마찬가지로 여러 attribute를 설정할 수 있다.
- <option> : dropdown 메뉴의 value(선택지)를 설정하는 태그이다.
- multiple : 여러 option을 다중선택 가능하도록 한다.
<div>, <span> : content들을 group으로 묶고 나눌 때 사용되며, html 내에서는 묶는 기능 외에 큰 의미는 없지만, 필요한 content를 묶어서 CSS에서 styling을 적용할 때 사용된다. <span> 은 <div> 와 같은 기능이지만, <div> 는 block element인 반면 <span> 은 inline element이다.

// form tag 내 각종 tag들의 사용 예시
<body>
  <form>
    First Name : <input type="text" name="firstname"><br>
    Last Name : <input type="text" name="lastname"><br>
    Email : <input type="email" required name="email"><br>
    Password: <input type="password" min="5" name="password">
    Birthday : <input type="date" name="birthday"><br>
    Gender:<br>
    <input type="radio" name="gender" value="Male">Male<br>
    <input type="radio" name="gender" value="Female">Female<br>
    <input type="radio" name="gender" value="Other">Other<br>
    Pets: <br>
    <input type="checkbox" name="cat">Cat<br>
    <input type="checkbox" name="dogs">Dogs<br>
    Cars: <br>
    <select name="cars" multiple>
      <option value="volvo">Volvo</option>
      <option value="Audi">Audi</option>
    </select><br>
    <input type="submit" value="Register!">
    <input type="reset">
  </form>
</body>

2. Form 제출하기

# 쿼리 스트링(Query String)으로 제출하기

<form> tag를 통해 사용자에게 입력받은 정보를 제출하면 아래와 같은 정보들이 백엔드의 server로 전달이 된다. 이 같이 전달되는 정보를 query string이라고 한다.

?
firstname=hyunsol
&lastname=do
&email=dhs0113%40gmail.com
&password=aewfaer2r
&birthday=2017-11-29
&Gender=Male
&Pets=Dogs&Pets=Turtles
&Cars=volvo

? : 앞으로 나올 정보가 query string임을 백엔드에 알려주는 기호이다.(html에서 DOCTYPE 같은 것)
위 html 코드에서 각 tag 내의 name attribute가 query string에서의 property(ex. lastname, email 등)가 되고, 사용자가 입력한 정보가 value(ex. do, dhs0113%40gmail.com 등)가 된다.
%40 : query string에서 특정 기호들이 특정한 의미를 나타내도록 사전에 정의된 경우가 있다. 이 경우 해당 기호를 사용하는 것이 불가능하기 때문에 대체 문자들이 사용되며, 이 경우 @ 기호 대신 %40 이 사용되는 것이다.

# Form tag의 attribute

method : form-data를 전송하는 방식을 설정한다. 상황에 따라 다르겠지만, "POST" 사용이 권장된다.
- "GET" : form-data를 query string으로 변환하여 URL에 붙인다. URL을 통해 사용자가 입력한 정보를 확인할 수 있기 때문에 보안적인 측면에서 매우 취약하다.
- "POST" : <body> tag 내 HTTP request에 form-data를 추가하는 방식이다.
- ☞ form method w3schools
action : form-data가 제출되었을 때, 해당 정보를 어디로 보낼지를 결정한다.(HTML5에서는 action은 더 이상 요구되지 않는다고 한다.)
- ☞ form action w3schools

3. HTML5의 특징 : 태그에 의미적 요소를 더하다!

HTML5의 가장 큰 특징은 semantic element를 구체화 한 것이다. 즉, 각 element 이름에 의미를 부여함으로써 website를 더 descriptvie하게 만든다. 더 자세한 정보는 아래 링크에서 확인 가능하다. :)

☞ HTML5 in w3schools

HTML4까지는 개발자들이 대부분 div 태그 안에 고유의 class, id를 부여하는 방식으로 element들을 구분하고 스타일링 했었다. 이러한 방식은 검색엔진이 정확하게 웹 페이지의 내용이 어디에 있는지 찾는 데에 어려움을 줄 수 밖에 없었다. HTML5에서 semantic element가 적용되면서, 검색엔진은 더 쉽고 빠르게 웹 페이지에서 내용을 찾을 수 있게 되었다.

저작자표시

'Javascript 공부 > Zero To Mastery(-)' 카테고리의 다른 글

(6) CSS3 심화 문법 (0)	2019.08.27
(5) CSS3 기본 문법 (0)	2019.08.27
(3) HTML5 기초 문법 (0)	2019.08.26
(2) 웹의 역사 (0)	2019.08.26
(1) 인터넷은 어떻게 동작할까? (0)	2019.08.26