22-11-28 JSP시작, 서버와 클라이언트

JSP 수업 기록

22-11-28 JSP시작, 서버와 클라이언트

JadeStone 2022. 11. 29. 15:52

교안

JSP시작
<서버와 클라이언트>

- 웹브라우저 = 클라이언트

웹 프로그래밍이란?

- 웹 프로그래밍이란, 웹 어플리케이션을 구현하는 행위입니다. - 웹 어플리케이션이란 웹을 기반으로 작동되는 프로그램입니다. - 웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태입니다. - 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태를 말합니다.

<Html>

* HTML
- Hyper Text Markup Language의 약자
- 정적인 웹페이지를 만드는 언어, 프로그램 언어가 아니라 마크업 언어.
- 메모장, 한글, 워드, 문서작업이 가능한 프로그램에서는
모두 작성 가능하다.
- HTML 문서는 태그라는 명령어로 구성되어있다.

- 태그의 기본 형식
<태그이름>문서의 내용</태그이름>
여는태그 닫는태그

#자주사용하는 태그들.

*<h1>제목태그</h1> -> h옆에 숫자에 따라서 내용의 글자 크기가 달라짐.

*<p> 글내용 </p> -> <p> 태그는 문단(paragraph)을 정의할 때 사용

<form>
		<h3>입력양식</h3>
		아이디:<input type="text" placeholder="힌트:8글자" maxlength="8" size="10"><br>
		비번:<input type="text" placeholder="힌트:알면뭐하게" size="10">
		
		<!-- checkbox, radio속성은 반드시 name속성을 통일 시켜서 하나의 그룹으로 묶습니다 -->
		관심분야:
		<input type="checkbox" name="inter">JAVA
		<input type="checkbox" name="inter">JSP 
		<input type="checkbox" name="inter">JS
		<input type="checkbox" name="inter">HTML
		<input type="checkbox" name="inter">ORACLE
		<br>
		전공분야:
		<input type="radio" name="major">경영
		<input type="radio" name="major">컴퓨터
		<input type="radio" name="major">수학
		<input type="radio" name="major">기계공학
		
		<br>
		지역
		<select name="region">
			<option>서울</option>
			<option>경기</option>
			<option>부산</option>
			<option>인천</option>
		</select>		
		
		<br>
		정보입력:<br>
		<textarea rows="5" cols="30"></textarea>
		
		<br>
		<!-- form태그의 데이터를 서버로 전송하는 역할 -->
		<input type="submit" value="확인">
		<input type="button" value="목록">
		<button type = "button">목록</button>
		<input type="file">
		<input type="reset" value="폼초기화">
		<input type="number" value="숫자입력">
		
	</form>

#이미지파일 올리기

-같은 폴더내에 이미지 파일 저장이후.

	<!--  src에는 경로 들어갑니다 -->
	<img alt="제목" src="1.jpg" width="200px" height="200px">
	<img alt="제목" src="2.jpg" width="200px" height="200px">

#다른 페이지 링크 올리기. a 태그사용

	<!-- 다른 페이지 링크 -->
	<a href="https://blog.naver.com/shemagic2">네이버이동</a>
	<a href="hello.html">hello이동</a>

#위에 태그를 중첩 사용. -> 이미지 파일 누르면 페이지 이동

	<!-- 태그의 중첩 -->
	<a href = "https://www.daum.net">
		<img alt="제목" src="2.jpg">
	</a>

#테이블 만드는 태그

<table></table> 태그로 테이블 들어갈 내용을 감싸줌.

<tr></tr> 여기 사이에 들어가는 내용은 행

<td></td> 여기 사이에 들어가는 내용은 열

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

	<table border="1" align = "center">
		<tr>
			<td>제목</td>
			<td>내용</td>
			<td>성별</td>
			<td>주소</td>
			<td rowspan="4">비고</td>
		</tr>
		<tr>
			<td>안녕</td>
			<td>..?</td>
			<td>남</td>
			<td>서울</td>
		</tr>
		<tr>
			<td>ㅎㅇ</td>
			<td>ㅇㅋ</td>
			<td>굿</td>
			<td>ㅃ2</td>
		</tr>
		<tr>
			<td colspan="4" align="right">결과</td>
		</tr>
	</table>

</body>
</html>

# div태그, 인라인 태그

*div태그

블럭 태그로서 div태그가 있는 줄을 한 블럭으로 잡아서 그 공간을 오롯이 혼자 다사용하는 태그.

*인라인 태그

단순히 자기의 생김새만큼의 크기만 갖는 태그라고 생각하면 됨.

<body>
	<!--  둘다 영역 잡을 때 사용 -->
	
	
	<!-- 블럭요소
	1.블럭요소는 블럭의 성질을 가집니다. 줄바꿈 블럭크기를 가집니다.
	2.블럭요소는 블럭요소, 인라인요소를 자식태그로 가질 수 있습니다. -->
	<div>디아이브이</div>
	<div>디아이브이</div>
	
	<ul>
		<li>블럭</li>
		<li>블럭</li>
		<li>블럭</li>
	</ul>
	
	<ol>
		<li>블럭</li>
		<li>블럭</li>
		<li>블럭</li>
	</ol>
	
	<from>
		블럭
	</from>
	
	<table>
		<tr>
			<td>블럭</td>
		</tr>
	</table>
	
	<hr>
	
	<!-- 
	인라인요소
	1.인라인 요소는 줄바꿈이 없습니다. 한줄로 출력
	2.인라인 요소는 인라인요소만 자식으로 가질 수 있습니다. 
	-->
	
	<a href="#">인라인</a>
	<img src="#">
	<b>인라인</b>
	<i>인라인</i>
	<span>인라인</span>
	<strong>인라인</strong>
	<small>인라인</small>
	
</body>

위 코드를 웹 상에서의 실행모습