Web_programming(Chap.03)

교재 : 명품 HTML5 + CSS3 + Javascript

---

시멘틱 웹

- HTML 문서를 구조화 하는데 사용되는 방식

태그

tag list

<header>, <nav> - 하이퍼링크 모아둔 섹션

<section> - 문서의 장 혹은 절을 구성하는 역할

<article> - 독립적인 content

<aside> - 부수적인 관련 기사

<footer> - 저자나 저작권 정보

 

---

시맨틱 블록 태그

<figure> - 본문에 삽입된 그림을 블록화하는 태그

<details>, <summary> - 상세 정보 태그 ( toggle 생김 )

 

<details>
	<summary> text </summary>
    	<p> text1 </p>
</details>

 

 

웹 폼

사용자의 입력을 받는 폼

<form action = "웹 서버 응용 프로그램 URL" name ="fo" method ="get|post" target ="폼 이름">
...
</form>

폼 요소	설명
<input type ="text">	한 줄 텍스트 입력 창
<input type ="password">	암호
<input type ="button">	단순 버튼

<textarea cols="열 개수" rows="행 개수" name ="요소 이름">
text
</textarea>

---

데이터 리스트

test <input type = "text" list="countries">
<datalist id="countries">
	<option value="t1">
        <option value="t2">
</datalist>

input의 list 속성값의 내용과 datalist의 id 속성값을 lin, option 태그로 내용물 작성

datalist는 옵션 리스트에서 선택하거나 직접 입력할수 있지만 select는 옵션 리스트에서만 선택 

버튼

<input type ="button|reset|submit|image" name ="버튼 이름" value="문자열" src ="이미지 URL">
<button type ="button|submit|reset">text</button>

선택 입력

<input = type ="checkbox|radio" name ="요소 이름" value ="요소 값" checked>

checkbox는 name이 같이도 여러개를 동시에 선택 가능

radio는 name이 같으면 그중 하나만 선택 가능

콤보박스

<form>
  <select name ="이름">
     <option value ="1">text1</option>
     <option value ="2">text2</option>
  </select>
</form>

<label>으로 통해 grouping 할 수 있다. label 속성에 for을 통해 추후 input 속성에 id와 링킹할수 있음

또한, checkbox,datalist,radio는 label 묶을시 text를 클릭해서 선택 박스내로 인식해서 클릭 할 수 있다.

 

색 입력

<input type = "color" value ="">

시간 정보

<input type = "month|week|date|datetime-local">

스핀, 슬라이드바

<input = "range|number" min ="0" max ="10">

입력 정보 힌트

<input type ="text" placeholder ="ddd">

 

폼 요소 그룹핑

<fieldset>
	<legend>text</legend>
    	이메일: <input type = "text"><br>
        비밀번호: <input type = "password"><br>
</fieldset>