HTML
- 태그(<>) 형태의 언어
- <>여는 태그와 </ >닫는 태그로 이루어짐. (쌍태그)
-- 단일 태그는 < /> : /를 꼭 붙이지 않아도 실행은 되지만 /붙이는게 웹표준임.
- 인터프리트 언어. 컴파일과 동시에 실행됨. (저장X)
- 대소문자 구분 안 함.
<br/> : enter
<h1> </h1> ~ <h6></h6> : 단락 구분 & 글씨 크기 (1이 제일 큼)
<p></p> : 단락 구분
style 속성 : CSS 속성. 태그 당 지정할 수 있음. but, CSS에서 설정하는 것이 바람직.
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
가나다
<br />
<font face="궁서" size=7>라마바</font>
<h1>aaa</h1>
<h2>bbb</h2>
<h3>ccc</h3>
<h4>ddd</h4>
<h5>eee</h5>
<h6>fff</h6>
abcd<br/>asdf<br/>adfefg
<p style="background-color:yellow;color:blue;width:300px;text-align:right;font-family:고딕;font-size:20pt">efgh</p>
</body>
</html>
- 영역 구분
<div></div> : 영역 지정된 만큼 style 입혀짐, enter 쳐짐
<span></span> : style 크기 지정 적용 안됨, enter 없이 바로 옆에 붙음
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>영역 설정</h3>
가나다 <div style="width:200px;height:200px;background-color:green">라마바</div>
abc <span style="width:200px;height:200px;background-color:yellow">def</span>
</body>
</html>
경로 href / src
<a href = "이동할 url"> 텍스트 or 이미지 </a> : 하이퍼링크 (텍스트 or 이미지 누르면 url로 이동)
<img> : 웹 페이지에서 이미지 정의
<img src="이미지경로"/>
img 태그의 alt : 이미지를 불러오지 못했을 때 뜰 문구 설정
"/webApp1/img/daum_logo.png" -- 절대경로
"../img/daum_logo.png" -- 상대경로
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>링크 텍스트</h3>
<!-- <a href="이동할url">텍스트</a> -->
<a href="1.html">내 첫번째 페이지</a><br/>
<a href="http://www.daum.net">다음</a><br/>
<a href="http://www.naver.com">네이버</a><br/>
<!-- 절대 경로 -->
<img src="/webApp1/img/daum_logo.png"><br/>
<img src="/webApp1/img/naver.gif"><br/>
<!-- 상대 경로 -->
<a href="http://www.daum.net"><img src="../img/daum_logo.png" width="200" height="100"></a><br/>
<a href="http://www.naver.com"><img src="../img/naver.gif" style="width:200px; height:100px"></a><br/>
</body>
</html>
리스트 - li
<ul></ul> : 순서 없는 목록 (unordered list)
<ol></ol> : 순서 있는 목록 (ordered list)
<li></li> : 각 리스트 항목
<h3>목록 테스트</h3>
<h4>순서 없는 목록</h4>
<!-- <ul>: unordered list -->
<ul><li>자바</li><li>오라클</li><li>html</li></ul>
<ul type="circle"><li>자바</li><li>오라클</li><li>html</li></ul>
<ul type="square"><li>자바</li><li>오라클</li><li>html</li></ul>
<h4>순서 있는 목록</h4>
<!-- <ol>: ordered list -->
<ol><li>자바</li><li>오라클</li><li>html</li></ol>
<ol type="a"><li>자바</li><li>오라클</li><li>html</li></ol>
<ol type="I"><li>자바</li><li>오라클</li><li>html</li></ol>
표 - table
<table border = " " > : 표 테두리 지정
<tr></tr> : 각 행
<td></td> : 해당 행의 한 칸
<th></th> : td와 같지만 글씨가 더 진하게 나옴. (주로 제목칸)
<h3>테이블</h3>
<table border="1">
<!-- 표 테두리 -->
<!-- <tr> 행 // <td> 해당 행의 한 칸 -->
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
<h3>테이블</h3>
<table border="1">
<tr>
<th>img1</th><th>img2</th>
</tr>
<tr>
<td><img src="../img/daum_logo.png" style="width:150px;height:100px"/></td>
<td><img src="../img/naver.gif" style="width:150px;height:100px"/></td>
</tr>
</table>
colspan="칸 개수" : 칸 가로로 합치기
rowspan="칸 개수" : 칸 세로로 합치기
<h3>합치기 전 표</h3>
<table border="1">
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>
<h3>칸 가로로 합치기</h3>
<table border="1">
<tr><td colspan="2">aaa</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>
<h3>칸 세로로 합치기</h3>
<table border="1">
<tr><td rowspan="2">aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>eee</td><td>fff</td></tr>
</table>
폼 양식 - form / get / post
: 사용자가 입력한 데이터를 서버 페이지에 제출
=> 서버 페이지는 전달한 값들을 받아서 처리
<form action="서버 페이지 경로" method="전송방식(get/post)"></form>
- get (Servlet에서 doGet 호출) : 링크 이동 / url 쳐서 들어가는 것
: 데이터를 url 뒤에 붙여서 보냄. 보안 취약.
: url 길이의 제약이 있어 데이터 크기 제약됨.
: 한글이 더 많이 깨짐.
- post (Servlet에서 doPost 호출)
: 패킷에 데이터를 담아서 전송. => url 노출 되지 않음
: = 데이터 크기 제약 없음.
: 한글 덜 깨짐
Servlet - 자바 언어로 웹 통신을 구현해놓은 클래스 (요청을 받아 흐름 제어) (controller 역할)
client가 server에 요청을 보내면 (로그인 클릭)
servlet이 그 요청을 받아(id, pwd값) server(VO,DAO,Service)에 보내줌.
server는 Service에서 값을 비교하는 메소드를 통해 답을 보내면 (일치함)
servlet이 그 답을 받아 웹 화면에 띄워줌.
▼ id / pwd / phone / color / date ==> post & Servlet 실행
<h3>폼 양식</h3>
<form action="/webApp1/MyServlet" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd"><br/>
phone:<input type="number" name="phone"><br/>
color:<input type="color" name="color"><br/>
date:<input type="date" name="date"><br/>
<!-- 폼 제출 버튼 -->
<input type="submit" value="데이터전송">
</form>▼ Servlet
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet("/MyServlet")
public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MyServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("get request");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id"); // 폼파라메터 이름이 id인 요소의 값을 읽어옴.
String pwd = request.getParameter("pwd");
String phone = request.getParameter("phone");
response.getWriter().append("post request / id: " + id + " / pwd: " + pwd + " / phone: " + phone);
}
}
- 하나의 그룹으로 묶으려면 name을 똑같이 해주어야 한다.
-- name 중복 설정 가능
- id 는 중복 안됨! --> CSS에서 요소 호출 방법으로 유용함.
- 실제 서버에 전송되는 값은 value 값이다.
-- value를 지정하지 않으면 <> 밖의 텍스트가 서버에 전송된다.
- checked: 실행시 체크된 상태로 실행된다. (기본 옵션처럼 표시됨)
<input type="입력타입" name="Servlet에서 읽어올 파라메터 이름">
입력타입: text, password, number, color, date, checkbox, radio, hidden, button, reset, submit ...
checkbox: 복수 선택 가능한 선택창
radio: 하나만 선택 가능한 선택창
hidden: 화면에 노출되진 않지만 value 값을 서버로 전송
button: 자바스크립트 함수 실행하는 버튼
reset: 입력 내용 초기화하는 버튼
submit: 폼 입력 내용을 서버에 전송하는 버튼
<select name=" "><option value=" "> 옵션 이름 </option> </select>
select: 선택창에서 옵션 선택
<textarea rows=" " cols=" "> </textarea>
textarea: 글 여러줄 입력
<iframe src="화면에 띄울 페이지 주소"></iframe>
iframe: 화면에 다른 페이지 띄우기
<h3>폼 양식</h3>
<form action="/webApp1/MyServlet" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd"><br/>
phone:<input type="number" name="phone"><br/>
<!-- 하나의 그룹으로 묶으려면 name을 똑같이 해주어야 함 -->
<!-- 실제 서버에 전송되는 값은 사용자가 선택한 value 값 -->
<!-- value를 지정하지 않으면 <>밖의 텍스트가 서버에 전송됨 -->
<!-- checked: 실행시 체크된 상태로 실행됨. -->
<!-- checkbox: 복수 선택 가능 -->
체크박스:<input type="checkbox" name="ch" value="1" checked>오렌지
<input type="checkbox" name="ch" value="2">키위
<input type="checkbox" name="ch" value="3">사과
<input type="checkbox" name="ch" value="4">배<br/>
<!-- radio: 하나만 선택 -->
라디오버튼:<input type="radio" name="ra" value="f" checked>여성복
<input type="radio" name="ra" value="m">남성복
<input type="radio" name="ra" value="c">아동복<br/>
<!-- select: 선택창에서 옵션 선택 -->
콤보박스:
<select name="seL">
<option value="a">1학년</option>
<option value="b">2학년</option>
<option value="c">3학년</option>
<option value="d">4학년</option>
</select><br/>
<!-- textarea: 글자 여러줄 입력 -->
<!-- rows/cols: 화면에 보이는 크기 (초과해서 입력하면 스크롤바 생김) -->
여러줄입력:<textarea rows="5" cols="40">가입인사를 적어주세요.</textarea><br/>
<!-- iframe: 화면에 다른 페이지 띄우기 -->
<!-- src="화면에 띄울 페이지 주소" -->
약관:<iframe src="4.html" style="width:386px;height:100px"></iframe><br/>
<!-- hidden: 화면에는 안보이지만 value값을 서버로 전송할 때 사용 -->
<!-- value="사용자가 입력하지 않아도 되지만 서버에 전송되어야 할 값" -->
<input type="hidden" name="h" value="asdf">
<!-- 버튼의 value는 버튼에 표시될 텍스트 -->
<!-- onclick: 버튼을 클릭하면 실행될 js함수/js코드 -->
<!-- 폼 제출 버튼 -->
<input type="button" value="일반버튼" onclick="javascript:alert('아차차~')"">
<!-- 입력 내용 초기화 버튼 -->
<input type="reset" value="초기화">
<!-- 폼 제출 버튼 -->
<input type="submit" value="데이터전송">
</form>
