[JSP] jsp 홈페이지 만들기 (1)

섬·2023년 10월 25일
Javaeclipsejsp
0

jsp

목록 보기
1/18

https://three-flag-66c.notion.site/231025-JSP-9f8e4516aafd4c3ea607e6e311922d3d?pvs=4
// 설치 및 기본 정리

장고를 공부할 때도 느꼈지만 프론트엔드 쪽은 내가 아는 걸 따로 정리해 두지 않으면 나중에 하나도 정말 단 하나도 기억이 안 난다.
얼핏 아 쉽고 나 이해 다 했구나 싶어도 뒤돌아서면 갑자기 chat GPT를 겁박하고 있는 나 자신을 발견하는 것이다.

블로그를 작성하면서 느끼는 거지만 내가 진짜 이해해야 하는 중요한 것만 정리하고 넘어가야지 인터넷 뒤져서 금방 나오는 거 정리하고 있으면 하기 싫어서 그냥 던져 버린다.

아무튼 이거 빨리 공부하고 나서 sqld 조금씩 공부해야 하니까 후딱 그날그날 한 거 복습하기로 약속하자.

목, 금, 토는 못 하지만... 월요일부터 또 발품 팔아야지.

br, p, hr 태그

< br > : 얘는 벨로그에서도 적용되는 html 태그라 띄어쓰기를 했는데 한 줄 띄어주는 enter 태그이다.
< p > : 단락을 구분해 주는 태그이다.
< hr > : 선을 그어주는 태그이다. 

<html> <!-- html 의 시작을 나타내는 태그 -->
<head> 
	<!-- title 혹은 설정 값을 기록하는 곳 -->
	<title>	HTML 문서 만들기 </title> 
</head>
<body>
	<!-- 실제 웹 화면에 보여지는 부분 -->
	이클립스로도 HTML 문서를 만들 수 있다. <br><br>
	안녕하세요.<p>
	반갑습니다.
	<hr>
	<hr color="red">
	<hr width="300" color="blue">
	<hr width="300", color="blue", align="right">
	<hr size="10", color="red">
	
</body>
</html>

<!-- html 주석입니다 -->
<!--  -->

제목과 폰트 조정하기

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test4</title>
</head>
<body>
	<h1>안녕하세요!</h1>
	<h2>안녕하세요!</h2>
	<h3>안녕하세요!</h3>
	<h4>안녕하세요!</h4>
	<h5>안녕하세요!</h5>
	<h6>안녕하세요!</h6>
	<font color="red" size="1">안녕하세요</font><br>
	<font color="red" size="2">안녕하세요</font><br>
	<font color="red" size="3" face="궁서">안녕하세요</font><br>
	<font color="red" size="4">안녕하세요</font><br>
	<font color="red" size="5">안녕하세요</font><br>
	<font color="red" size="6">안녕하세요</font><br>
	<font color="red" size="7">안녕하세요</font><br>
</body>
</html>

리스트 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test5</title>
</head>
<body>
	<ul>
		<li>번호 없는 리스트 만들기</li>
		
		<li>자바</li>
		<li>JSP</li>
		<li>HTML</li>
		<li>SPring</li>
	</ul>
	
	<ol>
		<li>번호 없는 리스트 만들기</li>
		<li>사과</li>
		<li>오렌지</li>
		<li>귤</li>
		<li>바나나</li>
	</ol>
	
	<div align="center">
		<img src="img/maxresdefault.jpg" width="640" height="360">
	</div>
	
	
	
</body>
</html>

href 링크 걸기

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test6</title>
</head>
<body>

	<!-- 링크 걸 때 사용 a 태그 -->
	<a href="test5.html">장원영 사진 보여 줘</a><p>
	<a href="http://www.google.com">구글</a><p>
	<a href="http://www.youtube.com">유튜브</a><p>
	<a href="https://youtu.be/pXeU9ZB41k8?si=RAaSZJR_oQ6EDUdj"> 
	<img src="img/maxresdefault.jpg" width="640" height="360"></a>

</body>
</html>

table 그리기

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test9</title>
</head>
<body>
	<h2>자동차 정기 점검</h2>
	
	<table border="2" bordercolor="red" width="60%" height="15%"
	cellpadding="5" > <!-- 표 그리기 시작 -->
		<tr bordercolor="red">  <!-- 줄 그리기 시작 -->
			<th>점검 장소</th>
			<th colspan="2">차종</th>
		</tr>
		<tr align="center" valign="center" bordercolor="red">
			<td rowspan="8">1급 정비 사업소</td>
		</tr> 
		<tr align="center" valign="center" bordercolor="red">
			<td rowspan="3">비사업용</td>
			<td>승용자동차</td>
		</tr> 
		<tr align="center" valign="center" bordercolor="red">
			<td>피견인 자동차</td>
		</tr> 
		<tr align="center" valign="center" bordercolor="red">		
			<td>기타 자동차</td>
		</tr> 
		
		<tr align="center" valign="center" bordercolor="red">
			<td rowspan="4">사업용</td>
			<td>승용자동차</td>
		</tr> 
		
		<tr align="center" valign="top" bordercolor="red">
			<td>소형화물자동차</td>
		</tr> 
		
		<tr align="center" valign="top" bordercolor="red">
			<td>피견인자동차</td>
		</tr> 
		
		<tr align="center" valign="top" bordercolor="red">
			<td>기타자동차</td>
		</tr> 
		

		
	</table>
</body>
</html>

jsp 내에서 자바 코드 사용하기

음... 글 쓰기에서는 코드 html 로 설정해 두면 잘 알아먹는데 왜 포스팅 부분에서는 안 보이냐?

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test9</title>
</head>
<body>

	
	<table border="2" width="60%" height="15%"
	cellpadding="3" > <!-- 표 그리기 시작 -->
		<tr>  <!-- 줄 그리기 시작 -->
		<% for(int i = 2; i <= 9; i++){ %>
			<th> <%= i %> </th>
		<%}%>
		</tr>
		<tr>
		<% for(int i = 2; i <= 9; i++){ %>
		<tr>
			<% for(int j = 2; j <= 9; j++){ %>
				<td><%=i %> X <%=j %> = <%=i*j %></td>
			 <%} %>
			<%} %>
		</tr>
		

		
	</table>
</body>
</html>

form 태그와 데이터 get 방식, post 방식

form 태그와 post 방식으로 text 전송

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>form 태그</title>
</head>
<body>
	<h2>회원 정보 입력</h2>
	<form name="f" action="test12.jsp" method="post">
		이름 : <input type="text" name="name"><br>
		전화번호 : <input type="text" name="tel"><br>
		하고 싶은 말 : <br>
		<textarea name="content" rows="10" cols="50"></textarea><br>
		과목 선택 : <select name="sub">
			<option value="java">자바</option>
			<option value="c">c언어</option>
			<option value="python">파이썬</option>
			<option value="go">GO언어</option>
		</select><br>
		<input type="submit" value="전송">
		<input type="reset" value="취소">
	</form>
	
	<!-- 폼 태그? : 앙케이트나 코멘트 수집에 이용되는 입력 가능한 섹션 
	action : submit 버튼이 눌러졌을 때 가야 하는 경로
	method : get, post
	get : 주소 값에 파라미터 값을 담음
	post : body에 파라미터 값을 담음 / 보안을 요구할 때에는 post / 긴 것 보낼 때는 post
	form 태그를 사용할 때 메서드는 무조건 post 를 추천한다.
	
	주소, header(ip, 포트 번호 등), body
	
	주의 : 한글 쓰지 않기
	-->
</body>
</html>

post 방식으로 text 받아오기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>test12</title>
</head>
<body>
	
	<%
	request.setCharacterEncoding("EUC-KR");
	// post 전송 방식의 한글 전송 되게 만들기
	// get 방식은 안 된다
	String name = request.getParameter("name");
	String tel = request.getParameter("tel");
	String content = request.getParameter("content");
	String sub = request.getParameter("sub");
	%>
	
	<h2><%=name %> 님의 전화번호는 <%=tel %>입니다.</h2><br>
	<h2>하고 싶은 말</h2><br>
	<%= content %>
	<h2>선택 과목 : <%=sub %></h2>
	
	
</body>
</html>

이렇게 받아오면 쉽게 데이터를 전송할 수 있다.
jsp 는 tcp 통신을 이용해 연결성을 지향하고 서버가 온전하게 데이터 수신 발신을 책임진다고 한다.

profile
섬
자바 백엔드 개발자 개인 위키
다음 포스트

[JSP] 홈페이지 만들기 (2)

0개의 댓글

관련 채용 정보