본문 바로가기
코딩/수업 정리

20.12.28 Mon [025]

by 6^6 2020. 12. 28.
728x90
  • html
  • jsp

 

 

 

 

 

 

 

 

 

 

강의 주소

www.youtube.com/watch?v=fVnuQAjmcks&list=PLOJ3X9PwqLzsba6W-e6LjFqpXOBquCU7W

실전 HTML5 & CSS동영상강좌_01강_web과 html

 

 

HTML은 Hyper Text Markup Language 의 약자이다.

 

 

 

 

 

CSS가 디자인.

 

 

 

 

실전 HTML5 & CSS동영상강좌_02강_HTML 기본-I

 

태그에는 이름과 속성이 있다.

 

태그는 그냥 외우는것. 달달외울필요는 없지만 프로그래머라면 HTML태그정도는 외우기

 

<!DOCTYPE html> //!DOCTYPE은 html 의 ??를 나타내는것이다.

<html>

   <head>

   </head>

   <body>

   </body>

</html>

→기본적인 골격

 

//HTML 파일 생성. 

<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	안녕하세요. 처음 입니다.<br />
	HelloWorld!!
</body>
</html>

출력화면

html을 확인하는 두가지 방법

 

태그들을 해석하는 주체는? 누가 해석해서 뿌려주는가? 웹브라우저임. 웹브라우저가 해석하는것임. 톰캣XXX.

톰캣은 html을 해석할 필요도없고 그냥 html을 보내줄뿐. 

 

 

↓이 태그들 걍외우는것.

//html 파일 예제
<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>h1 태그입니다.</h1>
	<h2>h2 태그입니다.</h2>
	<h3>h3 태그입니다.</h3>
	<h4>h4 태그입니다.</h4>
	<h5>h5 태그입니다.</h5>
	<h6>h6 태그입니다.</h6>

	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.<br />행바꿈 태그 입니다.</p>
	
	<p>주로 <b>본문에</b> 사용되는 태그로서 단락을 구분합니다.<br />행바꿈 태그 입니다.</p>

	<p><a href="http://www.google.com">구글 웹사이트로 이동</a></p>
	
	<p><i>KOREA</i></p>
	<p>KOREA<sup>SEOUL</sup></p>
	<p><ins>KOREA</ins></p>
	<p><del>DELETE</del><p>
</body>
</html>

 

//위 예제 태그 설명
<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>hahaha</title> <!--<title></title> 태그는 웹 페이지의
						 제목을 나타내는 태그입니다. 웹페이지 본문에는 
				보이지 않으며, 브라우저의 탭 등에서 확인 할 수 있습니다 -->
</head>
<body>
	<h1>h1 태그입니다.</h1>
	<h2>h2 태그입니다.</h2>
	<h3>h3 태그입니다.</h3>
	<h4>h4 태그입니다.</h4>
	<h5>h5 태그입니다.</h5>
	<h6>h6 태그입니다.</h6>

	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
<!-- p는 paragraph의 약자로 문단을 의미. <p>태그와 </p>태그 사이에 위치하는 내용이 하나의 문단을 구성-->
	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
	<p>주로 본문에 사용되는 태그로서 단락을 구분합니다.<br />행바꿈 태그 입니다.</p>
						<!-- br은 Line Break를 의미. 강제 줄바꿈 -->
	<p>주로 <b>본문에</b> 사용되는 태그로서 단락을 구분합니다.<br />행바꿈 태그 입니다.</p>
		<!-- bold 굵기 -->
	<p><a href="http://www.google.com">구글 웹사이트로 이동</a></p>
	
	<p><i>KOREA</i></p> <!-- 기울기 -->
	<p>KOREA<sup>SEOUL</sup></p> <!--<sup>태그-윗첨자를 넣고 싶을 때 사용. super subscript-->
		<!-- **<sub>태그 : 아래첨자를 넣고 싶을 때 사용합니다. subscript를 의미합니다. -->
	<p><ins>KOREA</ins></p> <!-- 밑줄 -->
	<p><del>DELETE</del><p> <!-- 취소선 -->
</body>
</html>

<h1>~<h6> 글자 크기

 <p>는 paragraph의 약자로 문단을 의미. <p>태그와 </p>태그 사이에 위치하는 내용이 하나의 문단을 구성

 <br>은 Line Break를 의미. 강제 줄바꿈

<b>는 bold 굵기

<i>는 기울기

<sup>태그-윗첨자를 넣고 싶을 때 사용. super subscript

<sub>태그 : 아래첨자를 넣고 싶을 때 사용합니다. subscript를 의미
<ins>: 밑줄 
<del>: 취소선

 

실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II

//html 예제1

<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>hahaha</title>

</head>
<body>
	<p>메뉴 리스트</p>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>	
	</ul>

	<p>지역리스트</p>
	<ol>
		<li>서울</li>
		<li>경기</li>
		<li>충청</li>
		<li>전라</li>
		<li>경상</li>	
		<li>강원</li>
	</ol>	
	
	<p>검색 사이트 리스트</p>
	<ol>
		<li><a href="http://www.google.com" target="_bland">google</a></li>
		<li><a href="http://www.yahoo.com" target="_self">yahoo</a></li>
	</ol>

</body>
</html>

출력화면

//위 예제 설명
<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>hahaha</title>

</head>
<body>
	<p>메뉴 리스트</p>
	<ul>
		<li>menu1</li>
	<!-- li태그 = list -->
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>	
	</ul>

<!-- <ol>태그는 ordered list약자. 숫자나 알파벳 등 순서가 있는 목록 만들때 사용
	<ul>태그는 unordered list약자. 순서가 필요 없는 목록을 만들때 사용 -->

	<p>지역리스트</p>
	<ol>
		<li>서울</li>
		<li>경기</li>
		<li>충청</li>
		<li>전라</li>
		<li>경상</li>	
		<li>강원</li>
	</ol>	
	
	<p>검색 사이트 리스트</p>
	<ol>
		<li><a href="http://www.google.com" target="_bland">google</a></li>
					<!-- "_bland"는 새 창으로 열게 함 -->
		<li><a href="http://www.yahoo.com" target="_self">yahoo</a></li>
					<!-- "_self"는 자기창으로 열게 함 -->
	</ol>

</body>
</html>

<ol>태그는 ordered list약자. 숫자나 알파벳 등 순서가 있는 목록 만들때 사용
<ul>태그는 unordered list약자. 순서가 필요 없는 목록을 만들때 사용

"_bland"는 새 창으로 열게 함

 "_self"는 자기창으로 열게 함

 

 

↓사용 거의 안함

 

 

//html 예제
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<table border="1">
		<tr>
			<td rowspan="4">중간고사 성적
		</tr>
		<tr>
			<td>국어</td>
			<td>영어</td>
			<td>수학</td>
		</tr>
		<tr>
			<td>100</td>
			<td>60</td>
			<td>80</td>
		</tr>
		<tr>
		<td colspan="2">평균</td>
			<td>80</td>
		</tr>
	</table>

</body>
</html>

출력화면

//html예제 해설
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<table border="10">
		<!--border은 테두리 굵기-->
		<tr>
			<td rowspan="4">중간고사 성적
		</tr>
		<tr>
			<td>국어</td>
			<td>영어</td>
			<td>수학</td>
			<!-- 1행3열 -->
		</tr>
		<tr>
			<td>100</td>
			<td>60</td>
			<td>80</td>
			<!-- 1행3열 -->
			<!-- 위에거랑 합치면 2행 3열 -->
		</tr>
		<tr>
			<td colspan="2">평균</td>
			<!--↑국어 영어 2칸 합치겠다.-->
			<td>80</td>
		</tr>
	</table>

</body>
</html>

 

border은 테두리 굵기

 

tr 행, td 셀.

tr=table row - 옆으로옆으로

td=table data.

tr이 먼저 만들어지고, 그 안에 td가 들어가는 방식.

colspan 속성은 열 병합 (<td colspan="2">평균</td> 은 옆에 두칸 합친다~는 뜻.)

rowspan 속성은 행 병합.

셀 병합을 할 경우, 병합된 개수 만큼의 셀은 뺄 것.

 

 

 

 

//예제 및 설명
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<p><img src="Navi_dr.png" alt="꿈 Story"></p>
		<!--src=source뒤에는 경로이다. -->
	<p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png" alt="꿈 Story"></p>
	<p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr1.png" alt="꿈 Story"></p>
	<p><img src="Navi_dr.png" alt="꿈 Story" width="500"></p>
</body>
</html>

 

경로에는 절대경로와 상대경로가 있다.

절대경로 http://www~~.png, d:\file, c:\file\img.jpg 등 어떠한 웹페이지나 파일이 가지고 있는 고유한 경로

상대경로 Navi_dr.png  ,  /~~ ,  ./~~ ,  ../~~  '현재 위치한 곳을 기준'으로 해서 '그곳의 위치'

 

//블로그 출처 https://88240.tistory.com/122
2. 상대경로

- 상대경로를 풀어서 보면 '현재 위치한 곳을 기준'으로 해서 '그곳의 위치'이다.

- 다시한번 설명하자면 (Web이라고 기준하에) html 파일이 위치한 폴더를 기준으로 상대적인 경로라는 것.

- 예를 들어 C:\users\documents\sehee라는 폴더 밑에 A라는 폴더와 B라는 폴더가 있다고 가정하고,



   A라는 폴더안에 index.php 파일이 위치한다고 가정하고 현재 내가 B라는 폴더에 위치한다면,

   A폴더 안에 index.php파일을 가져오기 위해서는 B라는 폴더를 기준으로 계산을 한다.

   따라서 ../A/index.php이라고 하여 index.php로 간다는것.

- 여기서 참고할 것!

   / : 루트

   ./ : 현재 위치

   ../ : 현재 위치의 상단 폴더

ex) index.php가 C:\index\a에 위치한다면,

      여기서 / 는 C:

               ./ 는 a

              ../ 는 index라는 것.



- 3가지를 간단히 정리하자면,
   1  '/'    -> 가장 최상의 디렉토리로 이동한다.(Web root)
   2  './'   -> 파일이 현재 디렉토리를 의미한다.
   3  '../'  -> 상위 디렉토리로 이동한다.

- 만약 두단계 상위 디렉토리로 이동하려면
   '../../' 이렇게 사용하면 된다.

 

 

 

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<audio src="34ex1.mp3" controls="controls" autoplay="autoplay"
		loop="loop"></audio>
</body>
</html>

autoplay는 자동플레이

loop는 무한 반복

controls는 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시합니다.

(controls 속성은 불리언(boolean) 속성입니다. 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.)

오디오는 누가 틀어줌? 웹브라우저가 틀어줌. <audio > 얘가 틀어줌.

 

 

 

//내가 만든 코드
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<table border="2">
		<tr>
			<td><h1>주간 히트 노래</h1></td>
		</tr>

		<tr>
			<td>
				<ol>
				<li><img src="C:\Users\X\eclipse-workspace\servlet_hello2\WebContent/img01.png"><a href="한번 더 말해줘">어머님이 누구니</a></li>
				<li><img src="./img02.PNG"><a href="한번 더 말해줘">한번 더 말해줘</a></li>
				<li><img src="./img03.png"><a href="다른 남자 말고 너">다른 남자 말고 너</a></li>
				<li><img src="./img04.png"><a href="모두가 내 발아래">모두가 내 발아래</a></li>
				<li><img src="./img05.png"><a href="조만간 봐요">조만간 봐요</a></li>
				
				</ol> <audio src="34ex1.mp3" style='Filter: black' width='400' height='10' controls="controls" autoplay="autoplay"
					loop="loop"></audio>
			</td>
		</tr>
	</table>
</body>
</html>

결과물

//사진이나 오디오 안나오는경우 : 이클립스 왼쪽 사이드를 Project Explorer로 변경. - html파일이 있는 폴더에 해당 파일 넣어주기. - 폴더랑 Project Explorer 둘다 F5눌러서 새로고침 시켜주기 - 성공

 

 

 

 

 

 

 

 

jsp

 

HttpServlet을 상속받아 Servlet이랑 GenericServlet 둘다 사용가능.

기본적으로 Servlet은 HttpServlet을 상속받는 구조로 되어있다.  

 

클라이언트 ㅡ요청들어옴.request→  웹서버(WAS)

클라이언트 ←정보줌. responseㅡ  웹서버(WAS)

이때 웹서버(web application)에서는 자동적으로 request 와 response의 객체가 생성됨. 이건 톰캣에서 생성해줌.

요청하는 객체 = 클라이언트로 부터 오는 정보를 입력 ex.로그인페이지 - 회원이면 로긴, 비회원이면 로긴x.이럴때 입력한 id와 패스워드는 클라이언트에서 요청해서 웹서버로 가는것. = request

db에서 검색하고 회원인지 아닌지 검색. 그다음 페이지에 넘김.  = response객체에 실어서 보내는 것임.

 

response.setContentType("text/html"); 해설

response응답객체가 ContentType의 응답을 처리해주는데 그 처리해주는 형태를 html로 응답을 처리를 해주겠다.

 

jsp같은경우엔 html문에다가 jsp코드를 넣으면 되니까 바로 코딩되는데,

servlet같은 경우에는 java파일이기 때문에 html코드가 없다.

그래서 PrintWriter 객체를 생성해줘서 writer.println으로 찍어주는것임.

 

 

 

 

개발자라면 무조건 알아야 할

get방식과 post방식

 

html문서에서 메소드가 get방식이면 doGet이 호출, post방식이면 dopost의 로직이 호출 

 

Get방식 

(네이버 = 클라이언트)

네이버검색창에 뉴스를 검색하면 -search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=1&acr=1&acq=뉴스&qdt=0&ie=utf8&query=뉴스

뉴스라는 키워드가 네이버 서버로 보내짐.

-서버로 보내지는 방법에는 2가지가 있음. 바로 get방식과 post방식 

 

1.get방식

주소에 ?붙어서 url을 통해서 보냄,  URL값으로 정보가 전송되어 보안에 약함.

2.post방식

body{ }영역, head영역이있는데 body 영역에 숨겨져서 보냄(html상에서의 body와는 다름)

 

 

 

 

 

 

doGet메소드에 태그 적어주면 출력됨

//servlet 프로그래밍 예제!

package edu.bit.ex;

import java.io.IOException;
import java.io.PrintWriter;

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 helloworld
 */
@WebServlet("/hw")
public class helloworld extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public helloworld() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("HelloWorld~~");
		
		response.setContentType("text/html; charset=euc-kr");
		PrintWriter writer = response.getWriter();
		writer.println("<html>");
		writer.println("<head>");
		writer.println("</head>");
		writer.println("<body>");
		writer.println("<h1>HelloWorld~~~</h1>");
		writer.println("</body>");
		writer.println("</html>");

		writer.close();
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

 

 

 

 

 

doGet()이 호출되는 방법:

1.html문서에서 form태그의 메소드속성이 get일경우,

2.웹브라우저의 주소창을 이용하여 servlet을 요청한 경우.

doGet메소드는 매개변수로 HttpServletRequest와 HttpServletResponse를 받는다.

 

euc-kr 써야 한글이 안깨지고 제대로 나옴

 

첫번째 빨간밑줄 response. → 객체가 생성되어서 넘어온다는 말임 - 객체는 누가 생성?톰캣.

request객체 와 response객체의 실체는 tomcat이다.

hw치고들어가면 tomcat이 구동.

 

내부적으로 

갖다주려고 만들어놓은 객체가 response객체

 

syso는 System 클래스 안에 있는 out 이라는 스트림을 가지고 println 메서드를 호출했기 때문에 콘솔창에 출력하는 것.
writer.println은 PrintWriter라는 데이터 타입의 writer변수에 response 변수에 담긴 HttpSevletResponse 클래스의 getWriter()메서드로 PrintWriter객체를 담아 넣은것. html에 출력.★

 

 

 

 

위에 내가 했던 예제임

 

 

//html doPost()방식
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

	<form action="PostMethod" method="post">
		<input type="submit" value="post">
	</form>

</body>
</html>

<form> 태그를 통해서 post방식으로 보낼건지 get방식으로 보낼건지 정해짐

 

 

↓"PostMethod"를 "hw"로 변경해주면

doPost방법
doGet 방법
method에 아무것도 없을땐 doGet방식으로 출력됨.

action은 클릭했을때 주소. (미리 @WebServlet("/hw")를 만들었기 때문에 해당 주소로 감.)

form태그는 form안에 있는 내용들(<input~~>)을 서버로 보낼때 쓰는것. 

method="post"는 post방법, method="get"은 get방법

<input type="submit" 은 보내지다 라는 뜻. 

value="click" 버튼안에 써있는 글자.

 

오버라이딩으로 받기때문에 method="post"면 doPost를 실행, method="get"이면 doGet을 실행

 

근데 method=를 없애면 기본적으로 doGet방식으로 넘어간다. post띄우려면 무조건 post넣어야함

 

 

 

 

ㅓ

Context Path는 웹어플리케이션을 구분하기 위한 path.

지금 배우는 Context(컨텍스트) 톰캣관련. 나중엔 os관련 Context를 배운다.

 

 

 

 

오늘의 문제

<HTML>

1. <blockquote>를 참고하시오.

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<table border="1">
	<tr><td>
	<h1>제주 이색 여행지</h1>
	<h3>야외 텐트를 닮은 건축물 "테쉬폰"</h3>
	<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 
	목장 숙소로 짓기 시작한 후 사료공장,성당으로 활용됐습니다.</p>
	<p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이
	남아있는데,<br/>국내 근현대 건축사의 한 페이지를 보여주는 가치를
	 지닌다고 전문가들은 평가합니다.</p>
	</td></tr>
		

	<tr><td>
	<blockquote>
	<p>성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 
	특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 
	1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 
	면양을 사육하였던 것으로 알려져 있다. 이시돌목장의 특색있는 
	건축양식으로 테쉬폰도 유명하다 (출처:향토문화전자대전)</p></blockquote>
	</td></tr>
</table>
</body>
</html>

 

 

 

 

2. <em>, <i> - 이탤릭체로 표시하기

<strong>, <b> - 굵게 표시

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<blockquote><h3>제주 이색 여행지 - 이중섭 거리</h3>
			<p><strong>주말</strong>마다 '서귀포<b>문화예술</b>디자인<b>시장'</b>이 열립니다.</p>
			
			<p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <em>공연관람</em>을 할 수 도 있고
			작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p></blockquote>
</body>
</html>

 

 

 

3. <mark> - 형광펜 효과 <span> - 줄안에서(인라인)묶기

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<blockquote><span><h3><b>야외 텐트를 닮은 건축물</b> <mark>"테쉬폰"</mark></h3></span>
	<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 
	목장 숙소로 짓기 시작한 후 사료공장,성당으로 활용됐습니다. 
	제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이
	남아있으며, <font color=blue> 국내 근현대 건축사의 
	한 페이지를 보여주는 가치를 지닌다</font>고 전문가들은 평가합니다.</p></blockquote>
			
			
</body>
</html>

 

 

 

 

4. <ol> 태그의 속성

type 속성 : 불릿 앞의 숫자 조정

start 속성 : 중간 번호부터 수정

reserved 속성 : 역순으로 표시

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<h1>1박 2일 가족 여행 코스</h1>
	<ul>
		<li>1일차
		<ol type='a'>
  		<li>해녀박물관</li>
  		<li>낚시체험</li>
		</ol></li>
		
		<li>2일차
		<ol type='a' start='3'>
  		<li>용눈이오름</li>
  		<li>만장굴</li>
  		<li>카약체험</li>
		</ol></li>
	</ul>		
			
			
</body>
</html>

 

 

 

 

5. colspan rowspan 사용

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
	<table border="1">

		<tr height="50">
			<td>이름</td>
			<td width="90"></td>

			<td>연락처</td>
			<td width="150"></td>

		</tr>

		<td>주소</td>
		<td colspan="3"></td>

		</tr>

		<tr height="50">
			<td>자기<br />소개
			</td>
			<td colspan="3"></td>

		</tr>

	</table>

</body>
</html>

 

//선생님코드 - 이름옆에 잘 안나오니 수정필요 
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="test/css">
	.td_blank{
	width:40px;
	}
</style>
</head>
<body>
	<table border="1">
		<tr>
			<td>이름</td>
			<td class="td_blacnk"></td>
	

			<td>연락처</td>
			<td class="td_blacnk"></td>


		</tr>
		<tr>
			<td>주소</td>
			<td colspan="5"></td>

		</tr>

		<tr>
			<td>자기<br />소개
			</td>
			<td colspan="5"></td>

		</tr>

	</table>

</body>
</html>

 

 

<JSP>

1.html 이란 무엇인가?

HTML=  Hyper Text Markup Language

웹문서를 만들기 위한 뼈대. 태그를 이용해 웹페이지를 만든다.

Markup(마크업)이란 ? <></> 이렇게 치고 들어가는것.

 

 

2.css 란 무엇인가?

CSS = Cascading Style Sheets

HTML이 뼈대를 만들면 스타일을 꾸밀때 CSS를 사용한다.

<style></style> 태그에 들어가는것

 

3.아래의 태그에 대하여 설명하시오.
<del> 취소선
<ins> 밑줄
<span> 셀병합

  colspan 속성은 열 병합 (ex. <td colspan="2">평균</td> 은 옆에 두칸 합친다~는 뜻.)

  rowspan 속성은 행 병합.

 

4.block 태그와 non block 태그에 대하여 설명하시오.

 

block태그는 개행이 있다. 

inline(nonblock)태그는 개행이 없다.

 

block 요소

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

 

inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

 

 

 

5.get 방식과 post 방식에 대하여 설명하시오.

html문서에서 메소드가 get방식이면 doGet이 호출, post방식이면 doPost의 로직이 호출 

 

1.get방식

주소에 ?붙어서 url을 통해서 보냄,  URL값으로 정보가 전송되어 보안에 약하다.

2.post방식

body{ }영역, head영역이있는데 body 영역에 URL이 숨겨져서 전송되기 때문에 보안이 필요한 상황에 사용하기 적합하다.

 

6.컨텍스트 패스란 무엇인가?

 웹어플리케이션을 구분하기 위한 path.

ex. <Context docBase="servlet_new01" path="/servlet_new01" reloadable="true" source="org.eclipse.jst.jee.server:servlet_new01"/></Host>

 

7.아래의 객체에 대하여 설명하시오.
HttpServletRequest

HttpServletReponse

 

클라이언트 ㅡ요청들어옴.request→  웹서버(WAS)

클라이언트 ←정보줌. responseㅡ  웹서버(WAS)

이때 웹서버(web application)에서는 자동적으로 request 와 response의 객체가 생성되는데 이건 톰캣에서 생성해준다.

728x90
저작자표시 비영리 변경금지

'코딩 > 수업 정리' 카테고리의 다른 글

20.12.30 Wed [027]  (0) 2020.12.30
20.12.29 Tue [026]  (0) 2020.12.29
20.12.24 Thu [024] JSP  (0) 2020.12.24
20.12.22 Tue [022]  (0) 2020.12.22
20.12.21 Mon [021]  (0) 2020.12.21

관련글

댓글

티스토리툴바