📌Today I Learned

HTML

ex15_table

표, Table

1. <table>
   • 큰 상자
   • 전체 컨테이너
     
2. <tr>, table row
   • 중간 상자
   • 행 역할
     
3. <td>, table data
   • 작은 상자
   • 셀 역할
   • 데이터를 담는 역할
     
4. <th>, table header
   • 작은 상자
   • 제목을 출력하는 셀 역할

(중요) 모든 셀의 너비의 합 == 테이블 너비
(중요) 모든 셀의 높이의 합 == 테이블 높이

<h1>2행 2열 테이블</h1>
<table border="1" width="200" height="200">
	<tr> <!-- 여기는 width, height 안씀 -->
		<td width="100" height="100">1</td> <!-- 테두리 빼고 100임. 숫자가 안맞으면 비율로 적용 -->
		<td width="100">2</td>
	</tr>
	<tr>
		<td height="100">3</td> <!-- 테이블이 늘어남. 보더 3개 높이만큼 추가로 늘어남. 너비는x 높이는 늘어남 -->
		<td>4</td>
	</tr>
</table>

---

ex16_table

테이블 작업

1. 기본 작업(table, tr, td)
2. 데이터 작성
3. 크기 > 전체 너비 > 열 너비
   ** 높이(X) > 데이터 추가/삭제 > 높이 변경해야 하기 때문에
   
   

테이블 헤더 <th>

• 자동으로 가운데정렬, 굵은 글씨가 적용된다.
  
  

테이블 본문(데이터)

1. 고정폭 > 왼쪽, 가운데
2. 가변폭 > 왼쪽
3. 숫자 > 우측(자릿수)

---

ex17_table

셀 병합

1. 가로 셀 병합
2. 세로 셀 병합

<!-- *** 각가의 <tr>내의 <td>개수는 동일해야한다. -->
<h1>가로 셀 병합</h1>
<table border width="200" height="200">
	<tr>
		<td colspan="2">1</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</table>


<h1>세로 셀 병합</h1>
<table border width="200" height="200">
	<tr>
		<td rowspan="2">1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>4</td>
	</tr>
</table>

---

ex18_form

폼, form

• 입력 양식, 입력 컨트롤
• 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)을 통해서 데이터를 입력받는 역할
• 입력 데이터 > 서버로 전송 > 업무 활용 or 데이터베이스 저장 등...
  ex) 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등 ...
• <form> + <form>의 자식 태그들...
  
  

<form>

• 모든 입력 컨트롤을 감싸는 컨테이너
• 스스로는 랜더링 결과가 없다.(출력X)
• 입력한 답을 서버로 전송하는 역할(매우중요)
  
  

form.method

• 데이터를 전송하는 방식
• 택배(일반 우편 | 등기 우편)

1. POST
   • ex18_server.jsp
   • 데이터를 상자안에 담아서 전송
   • 데이터가 노출 X > 보안 O
   • 전송하는 데이터의 최대 길이 제한 > 무제한
2. GET
   - ex18_server.jsp?age=20
   - 데이터를 송장에 붙여서 전송
   - 전송되는 데이터가 노출(주소창) > 보안 X
   - 전송하는 데이터의 최대 길이 제한 > 256자 > 8,000 바이트
   - 긴 데이터는 전송 X
   
   

form.action

• 데이터를 수신하는 서버측 URL
• 받는 사람 주소
• 서버측 동작하고 있는 프로그램 주소 > JSP, Servlet, Spring 주소

<form method="POST" action="ex18_server.jsp">
	나이: <input type="text" name="age"> <br> 
    <input type="submit" value="보내기">
</form>

<input>

• 인라인 태그
• 단독 태그
• input.type: 입력 컨트롤 종류 지정
• input.name: 식별자. HTML에서 사용. 서버측과 연동할 때 사용
• input.id: 식별자. CSS, JavaScript에서 사용
• input.class: 식별자. CSS, JavaScript에서 사용
• input.size: 길이(글자수)
• input.maxlength: 최대 입력 길이(글자수) + 유효성 검사
• input.value: 컨트롤의 입력값(현재 입력값)
• input.readonly: 읽기전용(전원 ON) > 서버로 전송이 가능
• input.disabled: 비활성화(전원 OFF) > 서버로 전송이 불가능
• input.accesskey: 바로가기 (Alt + 조합키)
• input.autofocus: 자동 포커스
• input.autocomplete: 자동 완성 끄기

텍스트 박스(단일 라인):
<input
	type="text"
	name="txt1"
	id="txt1"
	class="txt"
	size="30"
	value="Hong"
	accesskey="s"
	autofocus
	autocomplete="off"
/>

암호 상자, Password Box, Masked Text Box

• 모든 속성이 텍스트 박스와 동일
• value 속성은 사용 금지!!

텍스트 박스(암호): <input type="password" />

텍스트 박스(다중 라인)

• <textarea>
• 쌍태그
• 대부분의 속성은 텍스트 박스와 유사
• maxlength 속성이 없다. > 많은 양의 텍스트를 입력받는 컨트롤

<textarea cols="50" rows="5" style="resize: none">
하나
둘
셋
</textarea>

체크박스

• 논리값 입력
• 다중 선택 컨트롤

체크박스: <input type="checkbox" />

라디오 버튼

• 체크 박스와 유사
• 단일 선택 컨트롤

<input type="radio" name="rbGender" /> 남자

셀렉트 박스

• 콤보 박스(Combo)
• 드랍 다운 리스트(DropDown List)
• 단일 선택 컨트롤
• 다중 선택 컨트롤

!-- 드래그해서 여러개 가능 -->
<select size="5" multiple>
	<option>강아지</option>
	<option>고양이</option>
	<option>병아리</option>
</select>

셀렉트 박스:
<select>
	<optgroup label="자바">
		<option>클래스</option>
		<option>메소드</option>
		<option>배열</option>
	</optgroup>
	<optgroup label="오라클">
		<option>테이블</option>
		<option>서브쿼리</option>
		<option>조인</option>
		<option>프로시저</option>
	</optgroup>
	<optgroup label="HTML">
		<option>태그</option>
		<option>엔티티</option>
		<option>PCDATA</option>
	</optgroup>
</select>

파일 업로드

• 첨부 파일
• Open File Dialog Box(열기 대화 상자) 호출

파일 선택: <input type="file" />

히든 태그

• 눈에 보이지 않음
• 개발자용
• 서버로 보낼 데이터 > 사용자에게 보이고 싶지 않은 경우
• 눈에 안보이는 텍스트 박스

히든 태그: <input type="hidden" />

버튼들

전송버튼: <input type="submit" value="전송하기" />
<!-- value는 적힐 값이다. -->
<br />
취소버튼: <input type="reset" value="초기화" /> <br />

<!-- 이미지버튼(=전송버튼): <input type="image" src="images/submit.png"> -->

버튼:
<input
  type="button"
  value="버튼"
  onclick="location.href='http://naver.com';"
/>

버튼: <button type="button" value="<img src=''">버튼</button>

<input type="button" value="<img src=''> 버튼" />

<button><img src="images/button.png" />버튼</button>

ex01.html ~ ex18.html : HTML 4.01 + XHTML 1.0 (~2014년까지의 웹)
ex19.html ~ : HTML 5

---

ex18_server

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- ex18_server.jsp -->

	<h1>서버 페이지</h1>

	<%
	//자바 영역
	//int a = 10;
	//System.out.println(a);
	
	String txtAge = request.getParameter("age");
	String txt1 = request.getParameter("txt1");
	%>
	
	<p>나이: <%= txtAge %></p>
	<p>나이: <%= txt1 %></p>
</body>
</html>

---

ex19

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
  </head>
  <body>
    <!-- ex19.html -->

    <h1>HTML 5</h1>

    <form method="POST" action="ex18_server.jsp">
      <input type="submit" value="전송하기" />
      <hr />

      <input type="text" value="이름을 입력하시오." onfocus="this.value='';" />

      <hr />

      <input type="text" placeholder="이름을 입력하시오." />
      <br />
      <input type="password" placeholder="암호 입력" />
      <br />
      <textarea cols="40" rows="5" placeholder="자기 소개"></textarea>

      <hr />

      <h3>로그인</h3>
      아이디: <input type="text" required value="aaa" /><br />
      암호: <input type="password" required value="111" /><br />
      <input type="submit" value="로그인" />

      <hr />

      이메일: <input type="email" />

      <hr />

      URL: <input type="url" />

      <hr />

      전화번호: <input type="tel" />

      <hr />

      나이: <input type="number" min="0" max="100" step="10" />

      <hr />

      범위:
      <input
        type="range"
        onchange="document.getElementById('txt1').value=this.value;"
        min="10"
        max="120"
        step="10"
      />
      <br />
      <input type="text" id="txt1" size="10" />

      <hr />

      색상: <input type="color" onchange="document.body.bgColor=this.value;" />

      <hr />

      날짜 시간: <input type="date" />
      <br />
      <input type="month" />
      <br />
      <input type="week" />
      <br />
      <input type="time" />
      <br />
      <input type="datetime" />
      <!-- 지원 안하는 듯 -->
      <br />
      <input type="datetime-local" />
      <!-- 통합본 -->
    </form>
  </body>
</html>