HTML - 정적
웹프로그램 - 동적 - JSP(Servlet), ASP(ASP.NET), PHP -> HTML
코드 만들어낸다. (출력 : 서버에서 클라이언트 쪽으로 전송)
- JSP 기본 객체
response(서버->클라이언트)
request(클라이언트->서버:URL+Header+body)
response.println() 인터페이스를 같은 걸 받고 있기 때문에 메서드가 같다.
: 클라이언트로 연결해 놔서 클라이언트 쪽으로 출력한다
System.out.println() : 콘솔쪽으로 출력한다.
JSP 코드
<td><%= name %></td> : name(자바변수)
ex) list.jsp -> list_jsp.java -> 컴파일하면 list_jsp.class -> 실행
java 파일이 만들어지는 이유
D:\dahee\workspace\web\.metadata\.plugins\org.eclipse.wst.server.core\tmp2\work\Catalina\localhost\ROOT\org\apache\jsp\board
jsp 파일로 만들어도 언어가 java이기 때문에 .java 프로그램을 만들고 컴파일해서 .class 파일을 만들어준다. 그래서 처음 실행할 때 이 파일들을 만드느라 속도라 느리다.
java파일을 열어보면 이런 주석이 맨 위에 뜬다
/*
* Generated by the Jasper component of Apache Tomcat
* Version: Apache Tomcat/9.0.69
* Generated at: 2023-01-18 04:49:25 UTC
* Note: The last modified time of this file was set to
* the last modified time of the source file after
* generation to assist with modification tracking.
*/ out.write("\r\n");
out.write("<!DOCTYPE html>\r\n");
out.write("<html>\r\n");
out.write("<head>\r\n");
out.write("<meta charset=\"UTF-8\">\r\n");
out.write("<title>Board List</title>\r\n");HTML에서 작성한 코드는 이렇게 시작하는데 out.write 통해 클라이언트에게 출력한다. jsp로 보고 있지만 실제적으론 자바 프로그램이다.
단독태그
<br>이라고 써도 되지만 <br/>이라고 써야 닫는 태그를 찾지 않는다.
<input/> value라는 속성을 써서 사용하게 된다.
onclick="처리문; 처리문"
onclick을 Event handeler라고 하고, 처리문에 사용되는 코드가 JS코드이다. 처리문이 많아지면 함수로 넘긴다. JavaScript에서 정규표현식을 이용해 데이터의 유효성을 검사 한 후에 서버로 전달해 DB에서 데이터 처리를 한다.
location.href = "URL"
href는 생략해도 된다. 페이지 이동을 시키는 JS 언어이다.
history.back()
history 객체 안에 back이라는 메서드를 호출해서 실행시킨 것이다.
이전페이지로 돌아간다.
Table 태그
<Caption>은 테이블을 세트로 움직이게 하려면 쓰고 그게 필요한게 아니면 따로 써도 된다.
<thead> <tbody> <tfooter>는 안쓰면 tbody가 자동 생성 된다.
<tr> : Table Row. 한 줄을 추가 시킨다
<th> <td> : 칸을 늘린다.
행과 열을 합치는건 가능하지만 나누는건 불가능하다.
id, class
id 한개
class 여러개
-> CSS에서 선택 tr: 태그 / .tr : class / #tr : id
div
<div> : 태그는 한줄을 차지하지만 width를 지정하면 크기를 줄일 수 있다.
float:left[right] : 다음 데이터의 위치와 상관이 있다. 왼(오)쪽으로 붙인다.
clear: both[left][right] : 데이터 영역이 겹치지 않게 해주는 속성.
그래서 만약에 다음 데이터를 붙이고 싶지 않으면 그 데이터에 지정 필요.
both는 양쪽에 아무것도 붙이지 않게 하는거. left는 왼 right는 오
div는 독립적인 영역을 사용할 수 있다.
ex)
position:absolute;
top:100px; 마우스의 top 위치
left:300px; 마우스의 left 위치
z-index:100;
display:none; 보이게
display:block; 안보이게
절대 위치를 만들 수 있는데 position: absolute로 지정하면 된다.
top과 left의 거리를 지정해서 잡아주고 고정시키면 된다.
z-index 숫자가 크면 클수록 앞으로 튀어나오게 된다.(x,y,z 할때 z임)
display:none; 안보이게 display:block; 보이게
공지사항을 띄울 때 새 창을 열지 않고 <div>로 띄워서 닫기를 누르면 display:none;으로 바꿔준다. 코드상으로는 존재하지만 사용자가 보기에 안보이게 된다.
~이런것들은 자바스크립트에서 하면 됩니다~
list
<ol> - <li> - data
<ul> - <li> - data
image
alt : 대체 문자 속성 - 이미지가 안보이게 되는 경우 보이게 되는 대체 문자.
src : source. 이미지 URL을 서버에다 요청 (2차요청)
-없으면 404오류가 난다. (F12 눌러서 소스보기를 누르면 빨간색 X가 보이고 404가 보인다)
style="opacity:0.5" : 이미지 투명도 0불투명~1투명
form
: 데이터를 사용자에게 요구할 때 사용하는 태그
<form> 태그 밑에 사용하는 태그들
-
<fieldset>
: fieldset 태그는 입력 항목들을 크게 구분하기 위해 사용한다. -
<legend>
: 이 태그로 묶게되면 테두리가 그려지고 묶어놓은 입력 항목들의 이름이 지정된다. -
<input>
: 단독태그.
-> type
: text, password, radio, checkbox, file,
submit, rest, button --> 이 세가지 타입들은 button 태그를 쓰는걸 추천.
-> 속성 :
readonly읽기 전용size크기(몇 자를 보여줄 건지)
maxlength최대 입력 글자 수multiple여러줄 입력할 때 사용 -> textarea
<pattern>: 정규표현식. 단, 길이가 1자 이상이어야 한다.
<placeholder>: 입력란이 비어있는 경우 배경 텍스트로 안내 멘트를 넣어준다.
ex) 아이디를 입력 해 주세요. 비밀번호는 4~20자로 입력 해 주세요.
<requird>: 필수 입력. pattern을 쓰려면 requird를 꼭 붙여야 한다.
requird를 안쓰면 자바스크립트에서 0보다 크냐 안크냐 비교를 해야 한다.
<autofocus>페이지가 로딩 될 때 입력 커서를 위치 시킨다. 단 한개만 사용.
<autocomplement>입력한 내용을 다시 재사용 할 수 있도록 일부만 입력해도 자동 완성. on, off를 사용해서 기능을 사용할 지 안할지 정할 수 있다.
name="name"-> 서버에서 데이터 입력 받는 이름으로 사용. name=data로 전달된다. -
<textarea> </textarea>
name="name"-> 서버에서 데이터 입력 받는 이름으로 사용. name=data로 전달된다.
<requird>필수 입력. -
<select>
name="name"-> 서버에서 데이터 입력 받는 이름으로 사용. name=data로 전달된다.
-> option -> data : 선택된 data가 data로 넘어간다. 그런데 넘기려는 데이터가 다른 경우 option태그 안에 value 속성으로 값을 넣으면 그 value 속성의 값이 넘어간다. -
<button>
정규표현식
<table>
<tbody>
<tr>
<!-- title : 테이블에 마우스를 갖다 대면 나오는 풍선 도움말 -->
<th>아이디</th>
<td>
<!-- placeholder : 데이터가 비어있는 경우 배경글자
required : 필수 입력. pattern : 유효성 검사
autocomplete : 자동완성기능(on/off)
title : 풍선 도움말.
-> input tag의 패턴과 같이 쓰면 데이터가 유효하지 않을 때 나타나는 메시지-->
<input name="id" id="id" placeholder="아이디"
required="required" maxlength="20"
pattern="[a-zA-Z]\w{3,19}" autocomplete="off"
title="아이디는 영숫자_ 영문자로 시작 해야 하고 4~20자 사이로 입력하세요.">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input name="pw" id="id" type="password"
placeholder="비밀번호" maxlength="20"
required="required" pattern=".{4,20}"
title="비밀번호는 4~20자 사이로 입력하세요.">
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input id="pw2" type="password"
placeholder="비밀번호 확인" maxlength="20"
required="required" pattern=".{4,20}"
title="비밀번호는 4~20자 사이로 입력하세요.">
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input name="name" id="name"
placeholder="이름" maxlength="10" autocomplete="off"
required="required" pattern="[가-힣]{2,10}"
title="한글로만 2~10자 입력 가능합니다.">
</td>
</tr>
<tr>
<th>성별</th>
<td>
<!-- type="radio" : 같은 이름의 input 태그가 여러개 있다.
그 중에 하나만 선택 할 수 있다. -->
<input name="gender" type="radio" value="여자" style="width:50px"> 여자
<input name="gender" type="radio" value="남자" style="width:50px"> 남자
</td>
</tr>
<tr>
<th>생년월일</th>
<td>
<input name="birth" id="birth" placeholder="ex) 19910101"
required="required" pattern="[19|20]\d{6}[0-9]" autocomplete="off"
title="생년월일은 YYYYMMDD 형식으로 연속된 숫자 8자를 입력 해 주세요.">
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<!-- name="tel"이 3개가 있다. 배열로 받는다.
request.getParameterValues("tel") -->
<select name="tel" id="tel" style="height:2.2em">
<option>010</option>
<option>02</option>
<option>031</option>
<option>032</option>
<option>033</option>
<option>041</option>
<option>042</option>
<option>043</option>
<option>051</option>
<option>052</option>
</select> -
<input name="tel" id="tel2" pattern="[0-9]{3,4}"
maxlength="4" style="width:50px; border:1px solid #aaa"> -
<input name="tel" id="tel3" pattern="[0-9]{4}"
maxlength="4" style="width:50px; border:1px solid #aaa">
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input name="email" id="email" placeholder="ex) abcd@naver.com"
required="required" autocomplete="off"
pattern="[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}"
title="이메일 형식은 abcd@naver.com으로 입력 해 주세요.">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- 2칸을 합친것. 위의 tbody는 칸이 2개여서 여기서는 합쳐서 쓰면 된다.
지정을 하지 않으면 <th>에 해당하는 한 칸에 모든 내용이 다들어가게 되고
그 옆칸은 빈 칸이 되기 때문에 tbody에서 구현한 칸 수 만큼 합쳐야 맞는다.-->
<td colspan="2" style="border:none">
<button>가입하기</button>
<button type="reset">새로입력</button>
<!-- history.go(-2) : 전전페이지로 돌아간다. -->
<!-- /뒤에 아무것도 쓰지 않으면 index.html으로 간다. -->
<button type="button" onclick="location='/'">취소하기</button>
</td>
</tr>
</tfoot>
</table>