JSP는 기초다.
실제 실무에선 프레임워크를 사용하고 JSP는 잘 사용하지 않는다.
JSP는 프레임워크를 공부하기 전에 해야 되는 절차다.
웹 프로그래밍이란
웹 프로그래밍이란 웹 어플리케이션을 구현하는 행위이다.
웹 어플리케이션이란 웹을 기반으로 작동되는 프로그램이다.
웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한 가지 형태이다.
인터넷이란 1개 이상의 네트워크가 연결되어있는 형태를 말한다.
웹 어플리케이션의 장점
-사용자: 별도의 설치 없이 프로그램을 사용할 수 있기 때문에 접근성이 용이
-개발자: 사용자용 프로그램을 별도로 제작하지 않고, html을 이용하여 사용자 UI를 구축하기 때문에, 개발에 소요되는 시간과 노력이 줄어듬.
JSP 웹어플리케이션의 장점.
1. 풍부한 java API를 사용하여 제작됨.
2. JSP기반의 엡어플리케이션은 특정 운영체제가 아니더라도 호환성의 문제가 없음.
3. 실제 코드가 프로그램에서 노출되지 않기 때문에 보안상의 장점이 있다.
HTTP 요청과 응답
- 브라우저를 통해 인터넷의 자원을 사용할 때 대부분의 경우 HTTP 프로토콜을 사용한다.
- HTTP 프로토콜은 hyper text문서 즉 HTML 문서를 전송하는 프로토콜이다.
-브라우저가 서버의 페이지를 요청(request)하면 서버는 해당 파일을 찾는 다음 HTTP 응답 (response)를 통해 클라이언트에 전송하는 방식으로 사용자의 요청을 처리한다.
-서버로부터 전송된 페이지를 응답 페이지라고 하며, 브라우저는 이 응답 페이지를 해석(렌더링)하여 화면을 보여준다.
Cliet( HTML, CSS, JavaScript ) <=========> Server( JSP & 서블릿 ) <===========> DB (SQL)
서버를 해석하기 위한 클래스를 서블릿이라고 한다.
UI공부는 w3schools.com에서 공부하면 좋다.
JSP(Java Server Pages)
- JSP는 HTML 페이지를 만들기 위한 방법 중 하나이다.
- JSP는 사용자가 코드를 작성한 다음 컴파일 과정을 거치지 않고 서버에서 실행시킬 수 있다.
- JSP는 웹 서버에 의해 서블릿으로 변환된 다음 실행된다.
Java Servlets
- 서블릿은 서버에서 실행되는 자바 프로그램이다.
- 서블릿이 사용자에 의해 요청되면 서버에서는 HTTP request에 응답하기 위해 웹 서버에서 서블릿 객체를 생성하고 이를 통해 사용자의 요청을 처리한다.
1. 프로토콜 : 네트워크상에서 약속한 통신규약(HTTP, FTP, SNTP, POP, DHCP)
2. IP주소 : 네트워크상에서 특정 컴퓨터를 식별할 수 있는 주소
3. Port 번호 : IP주소가 컴퓨터를 식별할 수 있게 해 준다면, 포트번호는 해당 컴퓨터의 구동되고 있는 프로그램을 구별할 수 있는 번호
4. 도메인(DNS) : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열.
HTML
- 정적인 웹페이지를 만드는 언어
- 메모장, 한글, 워드... 문서작업이 가능한 모든 프로그램에서는 모두 작성이 가능하다.
아래 코드를 메모장에 작성 후 저장하면. txt텍스트로 저장이 된다. 이를. html로 수정 후에 클릭하면 현재 코딩이 어떻게 보이는지 실시간으로 확인할 수 있다.
동시에 수정을 하려면 파일 > 연결 프로그램 > 메모장 수정을 하면서 F5를 통해 수정이 가능하다.
<!-- HTML주석입니다. -->
<!-- 이 문서는 html표준 규약을 준수합니다.-->
<!DOCTYPE html>
<html> <!-- html문서의 시작 -->
<head> <!-- 페이지의 속성과 정보를 설정 -->
<meta charset="EUC-KR"> <!-- 페이지인코딩을 한글로 -->
<title>html기초 연습</title>
</head>
<body> <!-- 웹 브라우저에 실제로 보여질 내용 -->
HTML 첫 연습!!!!! <br/> <!-- br태그는 줄개행입니다.(\n) -->
2022년 7월 30일 JSP학습!!
<!-- h1 ~ h6태그는 제목태그입니다. h1태그가 가장 글자 크기가 크며 h6가 가장 작은 글자크기를 가지고 있습니다. 자동으로 줄개행이 일어납니다. -->
<h1>Hello JSP~!!!!</h1>
<h2>Hello JSP~!!!!</h2>
<h3>Hello JSP~!!!!</h3>
<h4>Hello JSP~!!!!</h4>
<h5>Hello JSP~!!!!</h5>
<h6>Hello JSP~!!!!</h6>
<a href="D:/hsg/HTML/img_link.html">이미지링크 페이지로~~</a>
</body>
</html>
2022년 7월 30일 JSP학습!!
같은 폴더 내에선 상대 경로가 가능하다.
 |
 image파일안에 있는 상어 이미지. |
<!doctype html>
<html>
<head>
<meta charset="EUC-KR">
</head>
<body>
<!-- 페이지 링크를 걸려면 a태그를 사용합니다. -->
<!-- a태그의 href속성을 사용하여 연결할 페이지의 주소를 적습니다. -->
<a href="D:/hsg/HTML/basic.html">BASIC 페이지로 이동하기</a>
<hr/> <!-- 구분선을 만들어주는 태그 -->
<a href="https://www.naver.com">네이버로 이동</a>
<!-- 페이지 내부에 이미지 삽입은 img태그를 사용합니다.
img태그의 src속성에 이미지파일의 경로를 지정합니다. -->
<hr/> <!-- 풀 경로는 절대경로이다. -->
<img src="D:/hsg/HTML/금붕어.jpg" width="200px" height="200px" alt="금붕어그림"/>
<hr/>
<img src="D:/hsg/HTML/image/상어.jpg" width="200px" height="200px" alt="상어그림"/>
<hr/> <!--동일 파일 라인에 있기 때문에 상대경로가 가능하다. -->
<img src="금붕어.jpg" width="200px" height="200px" alt="금붕어그림"/>
<hr/> <!--상어는 같은 파일 라인이 아니라 image파일에 들어가야하므로 ...-->
<img src="image/상어.jpg" width="200px" height="200px" alt="상어그림"/>
</body>
</html>
이번엔 또 다른 상대 경로에 대해 알아보자.
<!doctype html>
<html>
<head>
<meta charset="EUC-KR">
</head>
<body>
<img src="상어.jpg" alt="상어그림~" width="150px" height="150px" />
<hr/>
<img src="../금붕어.jpg" alt="금붕어그림~" width="150px" height="150px" />
<hr/>
<a href="../basic.html">
<img src="상어.jpg" alt="상어그림~" width="150px" height="150px" />
</a>
</body>
</html>
표 만들기
<!doctype html>
<html>
<head>
<meta charset="EUC-KR">
</head>
<body>
<!-- table태그는 표를 작성하는 태그입니다. -->
<table border="1" align="center">
<!-- table태그의 자식태그 tr은 표의 행을 나타냅니다. -->
<tr>
<!-- tr의 자식태그 td는 한 행에 들어갈 열들을 나타냅니다. -->
<td>이름</td>
<td>나이</td>
<td>성별</td>
<td>주소</td>
</tr>
<tr>
<td>홍길동</td>
<td>43세</td>
<td>남자</td>
<td>서울시</td>
</tr>
<tr>
<td>박영희</td>
<td>45세</td>
<td>여자</td>
<td>세종시</td>
</tr>
</table>
</body>
</html>
회원가입 양식 만들기
<!doctype html>
<html>
<head>
<meta charset="EUC-KR">
</head>
<body>
<h2>회원가입 양식</h2> <hr/>
<!-- input태그는 입력창을 만드는 태그입니다. type속성으로 여러가지를 지정할 수 있습니다. -->
# 아이디: <input type="text" /> <br/>
# 비밀번호: <input type="password" /> <br/>
<!-- radio타입은 동그라미 체크버튼을 만듭니다. 는 스페이스바 명령입니다. -->
# 전공: <input type="radio" name="major" /> 경영학
<input type="radio" name="major" /> 화학과
<input type="radio" name="major" /> 한국미술
<input type="radio" name="major" /> 컴퓨터공학 <br/>
# 취미: <input type="checkbox" name="hobby" /> 독서
<input type="checkbox" name="hobby" /> 수면
<input type="checkbox" name="hobby" /> 축구
<input type="checkbox" name="hobby" /> 게임 <br/>
# 지역:
<select>
<option>서울</option>
<option>경기</option>
<option>세종</option>
<option>제주</option>
</select> <br/>
<input type="button" value="확인" />
<input type="reset" value="초기화" />
</body>
</html>
'IT' 카테고리의 다른 글
| 2-1. JSP 기본 태그 학습 (0) | 2022.09.02 |
|---|---|
| 2. JSP 개발환경설정(JDK, 이클립스, Tomcat) (0) | 2022.09.02 |
| 10. 자바 - 자바 실행파일 만들기 (0) | 2022.08.28 |
| 8. 자바 - 메서드 (0) | 2022.08.27 |
| 6. 자바 - Enhanced for loop문, do~while문 (0) | 2022.08.20 |
