마크업 언어와 서블릿의 출력

WebDev/본과정 / / 2021. 5. 14. 12:28

1. html 이란 무엇인가?

: 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)의 약자로 웹 문서를 기술하기 위한 문서를 일컫는다. 또한 이러한 마크업 언어의 표현은 구글 크롬(Chrome)과 같은 웹 브라우저에서 담당한다.

 

 

2. css 란 무엇인가?

: 캐스케이딩 스타일 시트(Cascading Stype Sheets)의 약자로 종속형 시트라고도 하며, HTML과 같은 마크업 언어를 웹 페이지에서 표현하고자 할 때 좀 더 폭넓게 해주는 기능을 가진다. 이른바 HTML은 웹 페이지의 뼈대를 담당하고자 하면 CSS는 이에 살을 덧붙이는 역할을 수행한다.

 

 

3. 아래의 태그에 대하여 설명하시오.

  • del: 취소선의 의미로 문장에 가로 그은 줄을 표현하는 태그이다.
    <del>Example</del>
    Example
  • ins: 새로 추가된 내용의 의미로 밑줄을 표현하는 태그이다. 
    <ins>Example</ins>​
    Example
  • span: 웹 페이지의 일부분에 css와 같은 스타일을 적용하고자 할 때 사용되는 태그로 한 줄 단위로 인식을 하는 특징을 지닌다. 
    <span style ="display:block; width:100px; height:50px; background:cyan">Example</span>
    Example

 

 

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

  • block: 자신의 내용과 앞/뒤 태그의 내용을 다른 라인에 출력하는 태그로 자신의 내용만으로 한 라인을 독점해서 출력하고 내용물의 크기와 상관없이 너비는 항상 100%, 높이는 내용물의 크기에 맞춰 변화한다. 
    <ol>
    <li>Example.1</li>
    <li>Example.2</li>
</ol>​
    1. Example.1
    2. Example.2
  • non block: 인라인 태그(Inline Tag)라고도 하며, 줄을 바꾸지 않고 필요한 만큼만 너비를 차지하며 여는 태그와 닫는 태그로 둘러쌓은 공간만을 영역으로 한다. 
    <img src="https://i.stack.imgur.com/0TvxO.png">​

 

 

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

  • get: 서블릿을 통해 URI 값으로 정보가 전송되어 JSP 파일에 받아 이를 출력한다. 이러한 방식으로 인해 보안이 상대적으로 취약한 문제점을 가지고 있다. 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doGet 방식입니다.");
  		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter writer = response.getWriter();
  		
		writer.println("<html>");
		writer.println("<head>");
		writer.println("</head>");
		writer.println("<body>");
		writer.println("<h1>Get 방식입니다.</h1>");
		writer.println("</body>");
		writer.println("</html>");
  		
		writer.close();
}​
  • post: 서블릿에서 JSP로 정보가 전송된 뒤 해당 내용의 action 태그를 통해서 다시 참조하여 출력하는 방식이다. header를 이용해 정보가 전송되므로 상대적으로 보안에 강하다. 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doPost 방식입니다.");
  		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter writer = response.getWriter();
  		
		writer.println("<html>");
		writer.println("<head>");
		writer.println("</head>");
		writer.println("<body>");
		writer.println("<h1>Post 방식입니다.</h1>");
		writer.println("</body>");
		writer.println("</html>");
  		
		writer.close();
	}
    <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>post 버튼 입력페이지</title>
</head>
<body>
	<form action="../hw" method="post">
		<input type="submit" value="버튼이라네">
	</form>
</body>
</html>

 

 

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

: 웹 어플리케이션 서버(WAS)에서 웹 어플리케이션(프로젝트와 같은 단위)을 구분하기 위한 경로(Path)로 Eclipse에서 프로젝트를 생성할 때 자동으로 server.xml에 추가된다.

...
	<!-- 여기서 컨텍스트 패스에 있는 '프로젝트 명'이 곧 '컨텍스 명'이 된다. -->
      <Context docBase="JSPWebDev" path="/JSPWebDev" reloadable="true" source="org.eclipse.jst.jee.server:JSPWebDev"/></Host>
    </Engine>
  </Service>
</Server>

 

 

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

  • HttpServletRequest: 서블릿이나 JSP와 같은 클라이언트에서 톰캣과 같은 서버로 정보를 요청(Request)하는 기능을 가진 객체
  • HttpServletResponse: 클라이언트에게 요청받은 정보를 다시 클라이언트에게 응답(Response)하는 기능을 가진 객체

 

 

8. 실습문제-1

8-1. 구현 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tour01</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				<h1>제주 이색 여행지</h1>
				<h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
				<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소롤 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.</p>
				<p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데,<br> 국내 근현대 건축사의 한
				페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>
				
			</td>
		</tr>
		<tr>
			<td>
				<blockquote>성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 
					특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 
					1961년 11월 말 제주시 한림읍 금악리에 세워
					양돈 사업을 시시하였으며 면양을 사육하였던 것으로 알려져 있다. 
					이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토 문화전자대전)</blockquote>	
			</td>
		</tr>
	</table>
</body>
</html>

 

8-2. 구현 결과

 

 

9. 실습문제-2

9-1. 구현 코드

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

 

9-2. 구현 결과

 

 

10. 실습문제-3

10-1. 구현 코드

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

 

10-2. 구현 결과

 

 

11. 실습문제-4

11-1. 구현 코드

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

 

11-2. 구현 결과

 

 

12. 실습문제-5

12-1. 구현 코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tour05</title>
</head>
<body>
	<table border="1">
		<tr height ="40" align="center">
			<td>이름</td>
			<td width="150" colspan="2"> </td>
			<td>연락처</td>
			<td width="150" colspan="2"> </td>
		</tr>
		<tr height ="40" align="center">
			<td>주소</td>
			<td colspan="5"> </td>
		</tr>
		<tr height ="60" align="center">
			<td>자기소개</td>
			<td colspan="5"></td>
		</tr>
	</table>
</body>
</html>

 

12-2. 구현 결과

저작자표시

'WebDev > 본과정' 카테고리의 다른 글

CSS의 여러 선택자와 서블릿의 데이터 처리  (0) 2021.05.14
CSS 기초 및 서블릿의 사이클  (0) 2021.05.14
JSP 개요  (0) 2021.05.14
Set, Queue, Map 자료구조와 정렬 및 탐색  (0) 2021.05.14
List와 Set  (0) 2021.05.13
WebDev/본과정 관련 글
글 더보기

티스토리툴바