Advanced HTML 5 (2021-02-04)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

HTML Forms

- HTML에서 form 태그를 이용해서 폼(제출하는 양식)을 만들수 있다.
- input 태그를 이용해서 여러가지 형태의 입력을 받는 칸을 만들수 있다.

- email input에는 required 속성을 지정하여 꼭 입력하도록 했으며
- radio는 동그란 버튼을, 그리고 name을 통해 해당 radio 버튼이 어디에 속하는지 지정하여 한가지만 선택 가능하게 할 수 있다. 

- Select 태그를 이용하여 드랍다운 메뉴를 생성 가능하며 
- input 태그에 password를 이용해서 비밀번호 입력칸을 만들 수 도 있다. 

- Register! 버튼을 눌러서 제출하게된 정보(주소창에 나타난 정보)를 query스트링이라고 하며 백엔드 서버에게 정보를 전달 해주는 방식중에 하나다. 
- form tag의 method 를 따로 작성하지 않을 경우 get 메소드를 사용한다. -> "?" 이후 query스트링에 사용자 입력정보가 다 나오게된다. (?는 ?이후에 많은 정보가 표시될것임을 알려주는 역할을 한다.)
- 각 input 태그에 name이나 value를 지정해서 어떤 정보가 어떤 이름을 갖고 있는지 표시 해 줄 수 있다. 

 

-HTML 코드에서 주석을 다는방법은 <--! --> 으로 주석을 감싸면 된다(sublime text에서는 ctrl + /)
-<div> 태그를 이용하여 특정 구간을 나눌수있으며 css가 적용 받는 구간을 제한할 수 있다. 
-<span> 태그는 <div> 태그와 마찬가지로 css가 적용받는 구간을 나누지만 한 구역이 아닌 inline 범위를 가진다는 점이 다르다. 

HTML vs HTML 5

시대가 흐름에 따라서 다양한 브라우저가 나오고 다양한 기기(스마트폰, 타블렛)가 나옴에 따라 HTML도 발전이 필요하게 되었다. HTML5에서는 검색엔진등이 HTML 자료를 보고 해당 내용을 semantic(실제로 의미를 갖는것처럼) 하게 분류 할 수 있게 도와주는 기능등이 추가 되었다. 

HTML5 를 지원하는 검색엔진이있다면 위의 사진대로 작성된 HTML 파일을 읽어들였을때 semantic하게 더 잘분류 할 수 있을 것이다.