<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>태그</h1>
<p>태그는 BOX와 ITEM이 있다.</p>
<table>
<tr>
<th>웹사이트의 구조 :</th>
</tr>
<tr>
<td align="center">header</td>
</tr>
<tr>
<td align="center">nav</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>aside</td>
<td>main</td>
<td></td>
<td></td>
<td></td>
<tr>
<td></td>
<td align="light" >section</td>
<td>section</td>
<tr><td></td>
<td>article</td>
<td>article</td>
</tr>
<tr><td></td>
<td>article</td>
<td>article</td>
</tr>
<tr><td></td>
<td></td>
<td>article</td>
</tr>
</tr>
</tr>
<tr>
<td align="center">footer</td>
</tr>
<tr>
<td colspan="4">article이란? : 여러가지 아이템을 그룹화 해서 재사용 가능한 것들이 모여져있는 것</td>
</tr>
<td>이렇게 나눠서 봐야 한다.</td>
</table>
<table border="1" align="center">
<tr></tr>
<tr>
<th colspan="5" align="center">BOX</th>
<td colspan="2">/</td>
<th colspan="6" align="center">ITEM</th>
</tr>
<tr>
<td colspan="2">header</td>
<td>,</td>
<td colspan="2">section</td>
<td colspan="4">/</td>
<td colspan="2">a태그</td>
<td>,</td>
<td colspan="2">video</td>
</tr>
<tr>
<td colspan="2">footer</td>
<td>,</td>
<td colspan="2">article</td>
<td colspan="4">/</td>
<td colspan="2">button</td>
<td>,</td>
<td colspan="2">audio</td>
</tr>
<tr>
<td colspan="2">nav</td>
<td>,</td>
<td colspan="2">div</td>
<td colspan="4">/</td>
<td colspan="2">input</td>
<td>,</td>
<td colspan="2">map</td>
</tr>
<tr>
<td colspan="2">aside</td>
<td>,</td>
<td colspan="2">span</td>
<td colspan="4">/</td>
<td colspan="2">label</td>
<td>,</td>
<td colspan="2">canvas</td>
</tr>
<tr>
<td colspan="2">main</td>
<td>,</td>
<td colspan="2">form</td>
<td colspan="4">/</td>
<td colspan="2">img</td>
<td>,</td>
<td colspan="2">table</td>
</tr>
<tr>
<td colspan="13" align="center">이런게 있다. </td>
</tr>
</table>
<br/>
<br/>
<br/>
<div>
<table align="left" border="1" >
<tr>
<th>몰랐던 것</th>
</tr>
<tr>
<td>div 태그:아무곳에서나 쓰는 것 묶어서 스타일링을 할 때 사용한다.</td>
</tr>
<tr><td align="center">띄움</tdㅁ></tr>
<tr>
<td>nav 태그 : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크의 집합을 정의할 때 사용</td>
<td>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>nav태그의 괄호'<>(여기)<> 안에 a태그의 href=/thml/intro, /javascript: 등을 여기 모은다. </td>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>article 태그 : 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의 할 때 사용</td>
<tr>
<td>article에 포함 될 수 있는 내용은 다음과 같다</td>
<tr><td> 포럼 포스트, 블로그 포스트, 보도 기사, 논평 등</td></tr>
</tr>
</tr>
<tr><td align="center">띄움</td></tr>
<tr>
<td>map 태그 : '클라이언트 사이드 이미지맵'을 정의</td>
<tr>
<td>이미지맵(image-map)은 클릭할 수 있는 영역을 가지는 이미지를 의미합니다</td>
</tr>
<tr>
<td>
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
<area shape="rect" coords="210,200,70,130" alt="진실" href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">
<area shape="rect" coords="90,60,180,130" alt="거짓" href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">
</map>
</td>
</tr>
<tr><td>이미지를 클릭하면 해당 링크로 이동됨. 아쉽게도 이미지가 없음. </td></tr>
</tr>
<tr><td align="center">띄움</td></tr>
<tr><th>aside란?</th>
<tr><td> 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄 </td></tr>
<tr><td> 예를 들면 주석이나 본문과 섞이지 않는 글들 </td></tr>
<tr><td><img src ="/img/aside.png"></></td></tr>
</tr>
<tr><th>main이란?</th>
<tr>
<td>해당 요소의 주 콘텐츠를 표시하고 강조할 때 사용한다. </td>
</tr>
</tr>
<tr><td align="center">띄움</td></tr>
<tr><th>from태그란</th>
<tr><td>내가 생각할 때 html에서 가장 많이 사용하는 태그이다. </td>
<br/>
<br/>
<tr>
<td>이건 다른 페이지에서 다루겠다.</td>
</tr>
<tr>
<td><a href="/html/2022_10_11_html_from태그.html">form 태그 정리로 이동</a></td>
</tr>
<tr><td>Block와 Iinline</td></tr>
<tr><td><img src="/img/block&Inline.png"</td></tr>
</tr>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!--box vs item-->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<h1><img src="/img/block&Inline.png" height="150"></h1>
<h1>block과 Inline</h1>
<a href="https://google.com" target="_blank">click, _blank는 새 창으로 열수있다.</a>
<p> inline <b>b태그</b>는 볼드를 준다</p>
<p> inline <span>span태그</span>는 css를 이용해 꾸며줄 때 사용</p>
<p> block
<div>div태그</div>는 block를 준다</p>
<h1>ol 리스트 vs ul(un ol List)리스트 그리고 List item들</h1>
<h2>ol</h2>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<h1>ul</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<h3>input태그</h3>
<label for="input_name">name:</label>
<input id="input_name" type="text"> </br></br>
<label for="input_name1">버튼:</label>
<input id="input_name1" type="button"></br></br>
<label for="input_name2">체크박스:</label>
<input id="input_name2" type="checkbox"></br></br>
<label for="input_name3">color:</label>
<input id="input_name3" type="color"></br></br>
<label for="input_name3">file:</label>
<input id="input_name3" type="file"></br></br>
<p>lable의 for은 input의 id와 연결하여 그룹을 지어줄 수 있다</p>
<p>각 태그에 맞춰 기능이 다양하고 특히 file는 파일을 선택할 수 있다.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>from태그란</title>
</head>
<body>
<div align="center">
<table>
<h1>from태그의 동작 방법</h1>
<tr>
<th>1.폼이 있는 웹 페이지를 방문</th>
</tr>
<br />
<tr>
<th>2.폼 내용을 입력한다.</th>
</tr>
<br />
<tr>
<th>3.폼 안에 있는 모든 데이터를 웹 서버로 보냄</th>
</tr>
<br />
<tr>
<th>
4.웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
</th>
</tr>
<br />
<tr>
<th>5.웹 프로그램은 폼 데이터를 처리</th>
</tr>
<br />
<tr>
<th>6.처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.</th>
</tr>
<br />
<tr>
<th>
7.웹 서버는 받은 thml페이지를 브라우저(눈에 보이는 화면)에 보냄
</th>
</tr>
<br />
<tr>
<th>8.브라우저는 받은 html페이지를 보여줍니다.</th>
</tr>
<br />
<tr>
<th><img src="/img/from의 동작방식.png" /></th>
</tr>
</table>
<h1>폼 태그의 속성</h1>
<h3>폼 태그 속성에는 name, action, methhod, target등이 있다.</h3>
<tr>
<th>action : 폼을 전송할 서버쪽 스크립트 파일을 지정 ex>conroller</th>
</tr>
<br />
<tr>
<th>
name : 폼을 식별하기 위한 이름을 지정 vo, dto와 맞춰주고 getter,
setter과 맞춘다.
</th>
</tr>
<br />
<tr>
<th>accept-charset : 폼 전송에 사용 될 문자 인코딩을 지정</th>
</tr>
<br />
<tr>
<th>
targer : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에
열도록 지정
</th>
</tr>
<br />
<tr>
<th>metgod : 폼을 전송할 http 메소드 정의 GET, POST 두 방식</th>
</tr>
</div>
</body>
</html>
