CSS의 Box 속성과 JSP의 내장객체

WebDev/본과정 / / 2021. 5. 15. 18:57

1. box-sizing 속성들에 대하여 설명하시오.

  • content-box: 기본값. 콘텐트 영역을 기준으로 크기를 지정한다.
  • border-box: 보더라인 테두리를 기준으로 크기를 지정한다.
  • initial: 기본값으로 설정한다.
  • inherit: 부모 요소의 속성값을 상속(Inheritance) 받는다.

 

 

2. margin과 padding의 차이는?

marginpadding

margin padding
Content를 둘러싼 영역에서 외부의 크기를 담당한다. Content를 둘러싼 영역에서 내부의 크기를 담당한다.
margin 값의 변동이 있더라도 Content의 크기는 영향X padding 값의 변동이 있으면 Content 크기에 영향을 준다.

 

 

3. 내장객체에 대하여 설명하시오.

: JSP에서 객체 생성을 따로 하지 않아도(new 키워드를 이용한 생성자 사용 불필요) 적용되는 객체를 칭한다.

  • request: 웹 브라우저의 요청 정보를 저장한다.
  • response: 웹 브라우저의 요청에 대한 응답정보를 저장한다.
  • out: JSP에 출력할 내용을 가지고 있는 출력 스트림 객체.
  • session: 하나의 웹 브라우저 정보를 저장하기 위한 세션 정보들을 저장한다.
  • application: 웹 어플리케이션 context의 정보를 저장한다.
  • page: JSP 페이지를 구현한 자바 클래스 객체.
  • pageContext: JSP 페이지에 대한 정보를 저장하고 있는 객체.

 

 

4. 구구단을 세로로 나타내도록 jsp 로 짜시오.

out.println 을쓰지 말고 <%= expression을 사용 하시오.

 

4-1. 소스코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>구구단을 외자!</title>
</head>
<body>
	<table border="1">
		<% for(int i = 1; i <= 9; i++) { %>
			<tr>
			<% for (int j = 2; j <= 9; j++) { %>
				<td>
				<%= j %>
				 * 
				<%= i %>
				 = 
				<%= i*j %>
				</td>
			<% } %>	 
			</tr>
		<% } %>
	</table>
</body>
</html>

 

4-2. 구현화면

 

 

5. forward와 redirect의 차이는?

5-1. forward

: 요청을 받은 서버가 다른 서버에게 정보를 전달(forward)하여 마지막으로 전달 받은 서버가 웹 브라우저에게 응답을 하는 방식

 

5-2. redirect

: 웹 브라우저에게 최초로 요청을 받고나서 리다이렉트(redirect)를 하고 다시 새로운 형태로 응답을 하는 형태

 

 

6. 실습문제 1번

6-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	
	<style type="text/css">
		a {
			text-decoration:none
		}
		
		a:link {
			color: black;
		}
		
		#nav {
			margin: 20px 20px 20px 20px;
			padding: 20px 0px 20px 0px;
			width: auto;
			height: auto;
			max-width: 450px;						
			border: 1px solid #cccccc;		
			text-align: center;	
		}
		
		#nav div {
			display: inline;
			padding: 15px 15px 15px 15px;
			border-top: 1px solid #cccccc;
			border-bottom: 1px solid #cccccc;
		}
	</style>
</head>
<body>
	<div id="nav">
        <div><a href="#">menu1</a></div>
        <div><a href="#">menu2</a></div>
        <div><a href="#">menu3</a></div>
        <div><a href="#">menu4</a></div>
        <div><a href="#">menu5</a></div>
	</div>
</body>
</html>

 

6-2. 구현화면

 

 

7. 실습문제 2번

7-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	
	<style type="text/css">
		a {
			text-decoration: none;
		}
	
		#wrapper {
			padding: 20px 10px 20px 10px;
			width: auto;
			height: auto;
			border: 1px solid #cccccc;
		}
	
		#header {	
			width: auto;
			font-weight: bold;
			font-size: 2em;
			text-decoration: 3px underline;
			text-underline-position: under;
			text-align: center;
		}
		
		#content {
			padding: 20px 0px 20px 0px;
			border-bottom: 1px solid #cccccc;
		}
		
		#content #to {
			padding: 15px 0px 15px 0px;
			font-weight: bold;
			text-align: left;	
		}
		
		#content .main_text {
			padding: 15px 0px 15px 0px;
			text-align: left;			
		}
		
		#content #from {
			padding: 15px 0px 15px 0px;
			font-weight: bold;
			text-align: right;
		}
		
		#footer {
			padding: 35px 0px 15px 0px;
			font-weight: bold;
			font-size: 1.5em;
			text-align: center;
			line-height: 20px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			HTML5, CSS3 Document
		</div>
		
		<div id="content">
			<div>
				<div id="to">To. all member</div>
				<div class="main_text">html5, CSS5 study is very easy</div>
				<div id="from">From. SBA</div>
			</div>
		</div>	
		
		<div id="footer">
			<a href="#">서울산업진흥원</a>
		</div>
	</div>
</body>
</html>

 

7-2. 구현화면

 

 

8. 실습문제 3번

8-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Most Beautiful Port</title>
	
	<style type="text/css">
		#outer_wrap {
			padding: 0px 0px 1px 1px;
			width: auto;
			height: auto;
			border: 1px solid black;
		}
		
		#inner_wrap {
			padding: 10px 0px 10px 5px;
			border: #cccccc;
			border-style: none none solid solid;
		}
		
		#header {
			margin: 5px 0px 5px 0px;
			border: 3px solid #cccccc;
			border-radius: 5px;
			
		}
		
		#header h1 {
			color: green;
		}
		
		#content {
			margin: 15px 0px 10px 0px;
			max-width: 400px;
			max-height: 300px;
		}
		
		#footer {
			line-height: 30px;
		}
	</style>
</head>
<body>
	<div id="outer_wrap">
		<div id="inner_wrap">
			<div id="header">
				<h1>세계 3대 미항</h1>
			</div>
			<div id="content">
				<img alt="port" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Cruise_Ship_Costa_Serena_docked_in_Rio_de_Janeiro_%28city%29_-_Feb._2011.jpg/1200px-Cruise_Ship_Costa_Serena_docked_in_Rio_de_Janeiro_%28city%29_-_Feb._2011.jpg" width="400px">
			</div>
			<div id="footer">
				시드니(Sydney), 호주<br>
				리우 데 자네이루(Rio de Janeiro), 브라질<br>
				나폴리(Naples), 이탈리아<br>
			</div>
		</div>
	</div>
</body>
</html>

 

8-2. 구현화면

 

 

9. 실습문제 4번

9-1-1. 소스코드 (HTML)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Information</title>
</head>
<body>
	<form action="getInfo.jsp">
		이름 : <input type="text" name="uname"><br>
		아이디 : <input type="text" name="id"><br>
		비밀번호 : <input type="password" name="pw"><br>
		취미 : <input type="checkbox" name="hb" value="Book" checked="checked">독서 
			<input type="checkbox" name="hb" value="Cook">요리 
			<input type="checkbox" name="hb" value="Jog">조깅
			<input type="checkbox" name="hb" value="Swim">수영
			<input type="checkbox" name="hb" value="Sleep">취침<br>
		전공 : <input type="radio" name="subject" value="Kor">국어
			<input type="radio" name="subject" value="Eng">영어
			<input type="radio" name="subject" value="Math">수학
			<input type="radio" name="subject" value="Design">디자인<br>
		<select name="protocol">
			<option>ftp
			<option>utp
			<option>http
			<option>tcp
		</select><br>
		<input type="submit" value="전송">
		<input type="reset" value="초기화">
	</form>
</body>
</html>

 

9-1-2. 소스코드 (JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Your Information</title>
</head>
<body>
	<%
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String[] hb = request.getParameterValues("hb");
		String subject = request.getParameter("subject");
		String protocol = request.getParameter("protocol");
		
		response.setContentType("text/html; charset=UTF-8");
		
		out.println("<h1>아이디 : " + id + "</h1>");
		out.println("<h1>비밀번호 : " + pw + "</h1>");
		out.print("<h1>취미 : ");
		for (int i = 0; i < hb.length; i++) {
			out.print(hb[i] + " ");
		}
		out.println("</h1>");
		out.println("<h1>전공 : " + subject + "</h1>");
		out.println("<h1>프로토콜 : " + protocol + "</h1>");
	%>
</body>
</html>

 

9-2. 구현화면

저작자표시

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

DB의 개요와 JSP의 Session, Exception, Java Bean  (0) 2021.05.15
경로, CSS의 Position, JSP의 액션태그 및 쿠키  (0) 2021.05.15
CSS의 display와 JSP의 태그  (0) 2021.05.15
CSS의 여러 선택자와 서블릿의 데이터 처리  (0) 2021.05.14
CSS 기초 및 서블릿의 사이클  (0) 2021.05.14
WebDev/본과정 관련 글
글 더보기

티스토리툴바