CSS의 display와 JSP의 태그

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

1. css 에서의 display 종류와 속성에 대하여 설명하시오.

  • none: 구현 화면 상에서 보이지 않게 하는 속성. 실제로 공간 또한 차지하지 않는다.
  • block: display 기본값으로 구현 화면 상에서 한 라인을 전부 차지하여 설정한 너비(width)에 따라 보여준다.
  • inline: 한 라인을 넘기지 않고 적용한 텍스트의 길이만큼만 너비를 적용한다.(임의의 크기 조절을 할 수 없다.)
  • inline-block: inline의 기본 속성을 가지고 있으면서 크기 조절을 할 수 있는 속성이다.

 

 

2. px 과 em 의 차이는?

px(픽셀)em(폰트 사이즈)

출력 화면상(모니터)을 기준으로 하여 크기를 지정한다. 폰트의 대문자의 너비를 기준으로 크기를 지정한다.
모니터의 특성을 더 이용할 수 있다. 플랫폼 간 호환이 유리하다.
1 px = 0.0625 em (구글 크롬 기준) 1 em = 16 px (구글 크롬 기준)

 

 

3. inline-block 태그의 종류는?

inline 속성과 block 속성을 모두 가지고 있으므로 태그 또한 포용적으로 사용할 수 있다.

  • div: block 단위로 영역을 잡는 태그로 개행이 필요하고자 할 때 사용할 수 있다.
  • span: inline 단위로 영역을 잡는 태그로 개행을 하지 않고 나열해서 표현하고자 할 때 사용할 수 있다.

 

 

4. opacity 속성의 사용법은?

: 적용된 영역의 투명도(Alpha)를 표시하는 속성으로 0에서 1사이의 소수점 값으로 지정한다.

 

 

5. display:none 과 visibility:hidden 의 차이는?

display:none visibility:hidden
화면 이외에도 웹 브라우저 상에서 실제로 공간을 차지하지 않는다. 공간을 차지하되 화면상에서만 보이지 않게끔 한다.

 

 

7. 정적문서와 동적문서의 차이는?

7-1. 정적문서

: 웹 브라우저, 로컬 웹 문서(HTML) 간 페이지 요청 및 전달만 하는 문서로 웹 문서의 내용을 보여주기 때문에 항상 동일한 값만 표시한다.

 

7-2. 동적문서

: 웹 브라우저, 웹 서버, 웹 어플리케이션 간 페이지 요청 및 전달을 하는 문서로 매 번 웹 페이지를 불러올 때마다 새로운 값을 표시한다. 이는 JSP와 같은 서버 사이드 언어를 이용하는 것이 특징인데 웹 문서의 내용을 보여주는 것이 아닌 특정 소스 코드로 구현하여 웹 브라우저가 읽을 수 있도록 변환과정을 거친다. 따라서 별도의 코드를 추가하지 않아도 되는 점과 보안이 코드 또한 보여줄 필요가 없는 특징들이 있다.

 

 

8. 아래를(JSP 태그) 설명하시오.

  • 지시자 : 스크립트릿 선언 및 모듈을 불러올 때 사용되는 태그. 
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> <!-- 스크립트릿 선언 -->
<%@page import="java.util.Arrays"%> <!-- 자바의 Arrays 모듈 불러오기 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<%
		int[] iArr = {10, 20, 30};
		out.println(Arrays.toString(iArr));
	%>
</body>
</html>​
  • 주석 : 실제 구현상에서는 반영되지 않지만 코드의 부가 설명 및 개발자 간 협업에 이용될 수 있는 기능 
    <!-- 이것은 주석입니다. -->
<!-- 여러 줄 단위로도 주석을 지정 할 수 있다.
홍길동<br>
-->​
  • 선언 : 변수나 혹은 메소드를 선언하고자 할 때 이용되는 태그 
    <%! int var = 10; %>​
  • 표현식 : 변수의 값이나 메소드의 리턴 값을 표현할 때 이용되는 태그 
    <!-- 선언 -->
<%!
	int i = 10;
	String str = "abc";
  	
	private int sum(int a, int b) {
		return a + b;
	}
%>
  
<!-- 표현 -->
<%= i %><br>
<%= str %><br>
<%= sum(1, 5) %><br>​
  • 스크립트릿 : JSP에서 Java와 같은 문법을 구현하고자 할 때 사용되는 태그 
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%> <!-- 지시자를 통해 스크립트릿의 기능을 사용할 수 있다. -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<%
		int i = 0;
		while(true) {
			i++;
			out.println("2 * " + i + " = " + (2*i) + "<br>");
	%>
	=========<br>
	<%
		if(i >= 9)
			break;
		}
	%>
</body>
</html>​
  • 액션태그 : 스크립트와 주석 및 디렉티브 등 페이지 간 제어나 다른 페이지의 결과 값을 참조하여 가져올 수 있는 기능을 가진다.
  1. include: 다른 페이지의 실행 결과를 현재의 페이지에 포함한다. 
    <jsp:include> ... </jsp:include>​
  2. forward: 페이지 간 이동을 제어한다. 
    <jsp:forward> ... </jsp:forward>​
  3. plug-in: 웹 브라우저에서 자바 애플릿을 사용한다. 
    <jsp:plug-in> ... </jsp:plug-in>​
  4. useBean: 자바빈을 JSP 페이지에서 사용한다. 
    <jsp:useBean> ... </jsp:useBean>​
  5. setProperty: 프로퍼티 값을 set할 때 사용한다. 
    <jsp:setProperty> ... </jsp:setProperty>​
  6. getProperty: 프로퍼티 값을 get할 때 사용한다. 
    <jsp:getProperty> ... </jsp:getProperty>​

 

 

9. 실습문제 1번

9-1. 소스코드

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 GuGu02
 */
@WebServlet("/GuGuMarkTwo")
public class GuGu02 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GuGu02() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter writer = response.getWriter();

		writer.println("<html><head></head><body><table border=\"1\">");
		for (int i = 2; i <= 9; i++) {
			writer.println("<tr>");
			for (int j = 1; j <= 9; j++) {
				writer.println("<td>" + i + "*" + j + "=" + i*j + "</td>");
			}
			writer.println("</tr>");
		}
		writer.println("</table></body></html>");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}
}

 

9-2. 구현화면

 

 

10. 실습문제 2번

10-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 = 2; i <= 9; i++) {
			out.println("<tr>");
			for (int j = 1; j <= 9; j++) {
				out.println("<td>" + i + "*" + j + "=" + i*j + "</td>");
			}
			out.println("</tr>");
		}
	%>
	</table>
</body>
</html>

 

10-2. 구현화면

 

 

11. 실습문제 3번

11-1-1. forward.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>forward</title>
</head>
<body>
	<h4>구구단 출력하기</h4>
	<jsp:forward page="forward_data.jsp">
		<jsp:param value="5" name="dan"/>
	</jsp:forward>
</body>
</html>

 

11-1-2. forward_data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>forward_data</title>
</head>
<body>
	<%
		String dan = request.getParameter("dan");
		int temp = Integer.parseInt(dan);
		out.println(temp + "단<br>");
		for(int i = 1; i <= 9; i++) {
			out.println(temp + "*" + i + "=" + (temp*i));
		}
	%>
</body>
</html>

 

11-2. 구현화면

 

 

12. 실습문제 4번

12-1-1. form01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form01</title>
</head>
<body>
	<form action="form01_progress.jsp">
		이름:<input type="text" name="name"><br>
		주소:<input type="text" name="addr"><br>
		이메일:<input type="text" name="email"><br>
		전송:<input type="submit" value="전송"><br>
	</form>
</body>
</html>

 

12-1-2. form01_progress.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form01_progress</title>
</head>
<body>
	<%
		String name = request.getParameter("name");
		String addr = request.getParameter("addr");
		String email = request.getParameter("email");
		
		out.println("아이디: " + name + "<br>");
		out.println("주소: " + addr + "<br>");
		out.println("이메일: " + email + "<br>");
	%>
</body>
</html>

 

12-2. 구현화면

 

 

13. 실습문제 5번

13-1-1. 소스코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form03</title>
</head>
<body>
	<form action="form03_progress.jsp">
		오렌지<input type="checkbox" name="fruit" value="오렌지">
		사과<input type="checkbox" name="fruit" value="사과">
		바나나<input type="checkbox" name="fruit" value="바나나">
		<input type="submit" value="전송"><br>
	</form>
</body>
</html>

 

13-1-2.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form03_progress</title>
</head>
<body>
	<%
		String[] fruit = request.getParameterValues("fruit");
	%>
	<h4>선택한 과일</h4>
	<%
		for(int i = 0; i < fruit.length; i++) {
			out.println(fruit[i]);
		}
	%>
</body>
</html>

 

13-2. 구현화면

 

 

14. 실습문제 6번

14-1-1. 소스코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>현재 시각</title>
</head>
<body>
	<h1>몇시 일까요??</h1>
	<% Date time = new Date(); %>
	<%= time %>
</body>
</html>

 

14-2. 구현화면

 

저작자표시

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

경로, CSS의 Position, JSP의 액션태그 및 쿠키  (0) 2021.05.15
CSS의 Box 속성과 JSP의 내장객체  (0) 2021.05.15
CSS의 여러 선택자와 서블릿의 데이터 처리  (0) 2021.05.14
CSS 기초 및 서블릿의 사이클  (0) 2021.05.14
마크업 언어와 서블릿의 출력  (0) 2021.05.14
WebDev/본과정 관련 글
글 더보기

티스토리툴바