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

21.01.04 Mon [029]

by 6^6 2021. 1. 4.
728x90

HTML

 

실전 HTML5 & CSS동영상강좌_11강_CSS 속성-II

padding 내부 간격

marging 외부 간격

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>

<style>
body {
	margin: 0;
}

div {
	width: 200px;
	height: 200px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

#content1 {
	background-color: red;
}

#content2 {
	background-color: green;
	margin: 10px 10px 10px 10px;
}

#content3 {
	background-color: blue;
	padding: 10px 10px 10px 10px;
}

#content4 {
	backgroung-color: yellow;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
}
</style>

</head>
<body>
	<div id="content1">
		200*200<br />
	</div>
	<div id="content2">
		200*200<br />
	</div>
	<div id="content3">
		200*200<br />
	</div>
	<div id="content4">
		200*200<br />
	</div>
</body>
</html>

 

 

 

 

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

    <style>
        body {
            margin:0;
            background-color:#dddddd;
        }

        div {
            width:200px;
            height:200px;
            margin:10px;
            padding:10px;
            border:10px solid #ff8d00;
        }

        div:nth-child(1) {
            margin:0;
            border:0;
            padding:0;
            background-color:#ff0000;
        }

        div:nth-child(2) {
            
            background-color:#00ff00;
            box-sizing:border-box;
        }

        div:nth-child(3) {
            
            background-color:#0000ff;
            box-sizing:content-box;
        }
    </style>

</head>
<body>
    <div>200*200</div>
    <div>200*200</div>
    <div>200*200</div>
</body>
</html>

 

box-sizing:border-box; - 컨텐츠 내에서 다 해결. 테두리를 기준으로 크기를 정함. 너비,높이 계산시 content, padding, border를 포함함(margin제외)

box-sizing:content-box - 이게 디폴트(아무것도 없으면 이 값으로) 기본값으로 너비, 높이는 content영역만을 의미함.콘텐트 영역을 기준으로 크기를 정함.(border, padding, margin제외)

 

 

 

content : 내용영역 (width 와 height은 content영역만의 너비와 높이이다.)

padding : 내용과 border 사이 여백

border : 선

margin :선과 바깥 과의 여백

 

border : 바깥 테두리 속성.

 

 

border 속성(solid, dotted, dashed, double, groove, ridge, inset, outset)

 

 

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

    <style>

        div:first-child {
            width:80%;
            margin:0 auto;
            height:400px;
            background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
            background-size:100%;
        }

        div:last-child {
            width:80%;
            margin:0 auto;
            height:400px;
            background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
            background-size:50%;
        }

    </style>

</head>
<body>
    <div></div>
    <div></div>
</body>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>

        div:first-child {
            width:80%;
            margin:0 auto;
            height:400px;
            background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
            background-size:30%;
        }

        div:last-child {
            width:80%;
            margin:0 auto;
            height:400px;
            background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
            background-size:30%;
            background-repeat:no-repeat;
        }

    </style>

</head>
<body>
    <div></div>
    <br />
    <div></div>
</body>
</html>

 

background-size에 30% 주니까 계속 repeat된다. 

 

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>

        div:first-child {
            width:80%;
            margin:0 auto;
            height:1200px;
            background-image: url('http://www.sba.seoul.kr/kr/images/index/visual5.jpg');
            background-size:30%;
            background-attachment:fixed;
        }

    </style>

</head>
<body>
    <div></div>
</body>
</html>

 

 

실전 HTML5 & CSS동영상강좌_12강_CSS 속성-III

 

<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
div {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
}

div:nth-child(1) {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', 'Arial', 'sans-serif';
}

div:nth-child(2) {
	font-family: MingLiU_HKSCS-ExtB;
}

div:nth-child(3) {
	font-family: 'MingLiU_HKSCS-ExtB';
	font-size: 32px;
}

div:nth-child(4) {
	font-family: 'Bernard MT';
	font-size: 2.0em;
}
</style>

</head>
<body>
	<div>hello</div>
	<div>hello</div>
	<div>hello</div>
	<div>hello</div>
</body>
</html>

font-family : ' ' , ' ', ' '; 폰트를 여러개 쓸수있다. - 이 폰트 첫번째부터 컴퓨터에 있는 폰트인지 찾아서 쓰는것. 없으면 그냥 기본 내장되어있는 폰트로 출력된다.

 

 

<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
div {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
	font-size:1.5em;
	font-style:italic;
}

div:nth-child(1) {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;\
}

div:nth-child(2) {
	font-family: MingLiU_HKSCS-ExtB;
	font-weight:bold;
}

div:nth-child(3) {
	font-family: 'MingLiU_HKSCS-ExtB';
	font-weight:bold;
	font-size: 50px;
}

div:nth-child(4) {
	font-family: 'Bernard MT';
	font-size: 2.0em;
}
</style>

</head>
<body>
	<div>hello</div>
	<div>hello</div>
	<div>hello</div>
	<div>hello</div>
</body>
</html>

 

<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
#nav {
	width: 800px;
	margin: 0 auto;
	border: 1px solid gray;
	overflow: hidden; /*집나간 토끼 안으로 잡기*/
}

#nav div {
	width: 150px;
	height: 100px;
	line-height:100px;/*핵심:height랑 line-height가 똑같,
						글자가 중앙정렬된다.*/
	float:left;
	text-align: center;
	font-size:1.5em;
	border-bottom: 1px solid gray; 
	border-top : 1px solid gray;
	margin:5px;
}
a{
text-decoration:none;
}



</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>

float:left와 부모에 overflow:hidden하기

 

 

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
       div {
           width:800px;
           margin:0 auto;/*가운데 정렬*/
           overflow:hidden;
           border:1px solid #cccccc;
           padding:10px;
           box-sizing:border-box;
       }

       div p:nth-child(1) {
           font-size:2.0em;
           text-align : center;
           height:100px;
           line-height:100px;
           text-decoration:underline;
       }

       div p:nth-child(2) {
           font-size:1.2em;
           text-align : left;
       }

       div p:nth-child(4) {
           font-size:1.2em;
           text-align : right;
       }

       div p:nth-child(6) {
           height:50px;
           line-height:50px;
           font-size:1.5em;
           text-align : center;
       }

       div p:nth-child(6) a {
           text-decoration:none;
       }

    </style>

</head>
<body>
    <div>
        <p>HTML5, CSS3 Document</p>
        <p>To. all member</p>
        <p>html5, CSS3 study is very easy html5, CSS3 study is very easy html5, CSS3 study is very easy</p>
        <p>From. SBA</p>
        <hr />
        <p><a href="http://sba.seoul.kr" target="_blank">서울산업진흥원</a></p>
    </div>
</body>
</html>
//내코드...-밑에 오늘의 문제에서 다시 제대로 수정!
<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
#nav {
	height: 300px;
	width: 700px;
	/* margin: 0 auto; */
	border: 1px solid gray;
	overflow: hidden; /*집나간 토끼 안으로 잡기*/
}

/* #nav div {
	width: 150px;
	height: 100px;
	line-height: 100px;
} */
div:nth-child(1) {
	text-align: center;
}

div:nth-child(2) {
	text-align: left;
	font-style:bold;
	
}

div:nth-child(3) {
	text-align: left;
	font-size: 0.8em;
}

div:nth-child(4) {
	text-align: right;
	padding: 10px;
}

div:nth-child(5) {
	text-align: center;
	border-top: 1px solid gray;
	height: 100px; line-height : 100px;
	margin: 5px;
	line-height: 100px;
}

/* div {
	float: left;
	text-align: center;
	
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	margin: 5px;
} */
h2 {
	text-decoration: underline;
}
</style>

</head>
<body>
	<div id="nav">
		<div>
			<p>
				<span><h2>HTML5, CSS3 Document</h2><br /></span>
			</p>
		</div>
		<div><p>To. all member<br /></p></div>
		<div><p>html5, CSS3 study is very easy html5, CSS3 study is very
			easy html5, CSS3 study is very easy</p><hr /></div>
		<div>
			<p><h4>From. SBA</h4></p>
		</div>
		<div>
			<a href="https://new.sba.kr/user/main.do">서울산업진흥원</a>
		</div>
	</div>
</body>
</html>

 

어떤걸 block으로 줄지, inline으로 줄 지 먼저 생각하는것이 핵심!(밑에 다시 복습!!)

 

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>

<p>태그 자체가 blocked요소

 

div를 따로따로 줄필요 없이 한번만 줘도 된다.

 

 

 

 

 

 

 

 

 

 

JSP

jsp_lecture_11

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

	<%
		out.println("서버 : " + request.getServerName() + "<br />");
		out.println("포트 번호 : " + request.getServerPort() + "<br />");
		out.println("요청 방식 : " + request.getMethod() + "<br />");
		out.println("프로토콜 : " + request.getProtocol() + "<br />");
		out.println("URL : " + request.getRequestURL() + "<br />");
		out.println("URI : " + request.getRequestURI() + "<br />");
	%>

</body>
</html>

↓출력결과

URI는 /절대경로를 나타냄.

 

request 객체 = 내장객체 (눈에 안보임)(onebyone1.tistory.com/44 에 내가 올린 사진 있음)

그래서 new~이런거 안해도됨. →다이렉트로 불러옴 out. 도 마찬가지

why? 어차피 servlet파일(.java) 로 만들어지기때문에.

 

 

 

 

 

 

필수 예제 반드시 외우기 필수!!

[.jsp - WebContent에 생성]
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%!
	String name, id, pw, major, protocol;
	String[] hobbys;
%>

<%
	request.setCharacterEncoding("EUC-KR");
	
	name = request.getParameter("name");
	id = request.getParameter("id");
	pw = request.getParameter("pw");
	major = request.getParameter("major");
	protocol = request.getParameter("protocol");
	
	hobbys = request.getParameterValues("hobby");
%>

이름 : <%= name %><br />
아이디 : <%= id %><br />
비밀번호 : <%= pw %><br />
취미 : <%= Arrays.toString(hobbys) %><br />
전공 : <%= major %><br />
프로토콜 : <%= protocol %><br />
</body>
</html>

 

[.jsp - WebContent에 생성]
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
	<form action="NewFile.jsp" method="get">
        이름 : <input type="text" name="name" /><br />
        아이디 : <input type="text" name="id" /><br />
        비밀번호 : <input type="password" name="pw" /><br />
        취미 : <input type="checkbox" name="hobby" value="kor" checked="checked" />한글, 
                   <input type="checkbox" name="hobby" value="read" />독서, 
                   <input type="checkbox" name="hobby" value="cook" />요리, 
                   <input type="checkbox" name="hobby" value="jog" />조깅, 
                   <input type="checkbox" name="hobby" value="swim" />수영,
                   <input type="checkbox" name="hobby" value="sleep" />취침<br />
                   
        전공 : <input type="radio" name="major" value="kor">국어, 
                    <input type="radio" name="major" value="eng">영어
                    <input type="radio" name="major" value="math">수학
                    <input type="radio" name="major" value="deign">디자인<br />
               
                <select name="protocol">
                 <option>ftp</option>
 
               </select><br />
 
        <input type="submit" value="전송"><input type="submit" value="초기화">
	    </form>
</body>
</html>

 

<form action = "requestparam.jsp" 라고 jsp를 다이렉트로 불러옴- 따라서 jsp파일은 같은 곳에 있어야함.

 

 

 

서버에는 페이지 두개. ng랑pass.

이걸 Redirect시키면 유저한테 한번갔다가 다시 오는거임.

 

Redirect : 현재 작업한거 상관없이 새로운 것을 요청. 클라이언트한테 다시 요청(유저로 하여금 다시 접근하게 하는것)

forward : 현재 작업한 것을 그대로 유지해서 이어나가게 하는것.

 

[requesttex.html] - WebContent에 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

	<form action="request_send.jsp">
		당신의 나이는 : <input type="text" name="age" size="5">
		<input type="submit" value="전송">
	</form>

</body>
</html>
[request.jsp] WebContent에 
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<%!
	int age;
%>

<%
	String str = request.getParameter("age");
	age = Integer.parseInt(str);
	
	if( age >= 20){
		response.sendRedirect("pass.jsp?age=" + age);
	} else {
		response.sendRedirect("ng.jsp?age=" + age);
	}
%>

<%= age %>

</body>
</html>

 

[ng.jsp]WebContent에 
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<%!
	int age;
%>

<%
	String str = request.getParameter("age");
	age = Integer.parseInt(str);
%>

미성년자 입니다. 주류구매가 불가능 합니다.

<a href="requestex.html">처음으로 이동</a>
</body>
</html>
[request.jsp] WebContent에 
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

<%!
	int age;
%>

<%
	String str = request.getParameter("age");
	age = Integer.parseInt(str);
%>

성인 입니다. 주류구매가 가능 합니다.

<a href="requestex.html">처음으로 이동</a>
</body>
</html>

 

 

sendRedirect = 넘겨주는것. pass.jsp?age(get방식으로 넘겨주는것) - 성인사이트에 나이제한 걸어뒀을때 이런거 씀

pass.jsp?age = 입력값 받는것. 

 

 

 

 

 

 

오늘의 문제

 

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

box-sizing:border-box; - 컨텐츠 내에서 다 해결. 테두리를 기준으로 크기를 정함. 너비,높이 계산시 content, padding, border를 포함함(margin제외)

box-sizing:content-box - 이게 디폴트(아무것도 없으면 이 값으로) 기본값으로 너비, 높이는 content영역만을 의미함.콘텐트 영역을 기준으로 크기를 정함.(border, padding, margin제외)


2.margin 과 padding의 차이는?

margin은 외부크기, padding은 내부크기 조절이다.


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

간과하지 말아야할것. 코드블럭외에 코드블럭이 있다. 제스퍼가 만들어낸 써블릿에는 내가 모르는 변수들이 있을수있다.

제스퍼는 자기가 필요한 변수들을 이미 만들어놓은게 있다.(내장객체) 

따라서 이미 있는거라 new 객체 생성 안하고 사용할 수 있다. (jsp를 무조건 servlet class로 바꾸기 때문에(java로) 그런것임.)

제스퍼가 만들어낸 서블릿안에 있는 미리 선언된 변수 우리가 그것을 이용해서 코드블럭에서 사용할 수 있다.

request, response, out, 등등 전부 다.

 

우리가 사용했던 것 중

내장객체 request : HttpServletRequest

getParameterNames(), getParameter(name), getParameterValues(name), getMethod()

 

내장객체 response : HttpServletResponse

sendRedirect(url), setContentType(type)

 

내장객체 out : javax.servlet.jsp.JspWriter

→직접쓰진않는다.

 

내장객체 session : javax.servlet.http.HttpSession

시간관련한 내장객체 메소드

 

내장객체 application : javax.servlet.ServletContext

값을설정하거나 얻을 수 있는 기능.

 

 

변수가 선언되면 변수가 중복되었다는 Duplicate local variable 메세지 오류가 뜬다.


4.구구단을 세로로 나타내도록 jsp 로 짜시오.
  - out.println 을쓰지 말고 <%= expression을 사용 하시오.

 

→문제 잘못해석.. expression을 변수로 넣으라는게 아니라 <%= %>이 expression인거임....

[gugu.jsp]
<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<%
		request.setCharacterEncoding("EUC-KR");

	String expression = request.getParameter("expression");
	%>


	구구단
	<table border="1">
		<%
			for (int j = 1; j < 10; j++) {
		%>
		<tr>
			<%
				for (int i = 2; i < 10; i++) {
				expression = (i + "*" + j + "=" + i * j);
			%>
			<td><%=expression%></td>
			<%
				}
			%>
		</tr>
		<%
			}
		%>

	</table>

</body>
</html>

↓구현방법


5.redirect forward 의 차이는? ★★★★★

Redirect : 현재 작업한거 상관없이 새로운 것을 요청. 클라이언트한테 다시 요청(유저로 하여금 다시 접근하게 하는것)

forward : 현재 작업한 것을 그대로 유지해서 이어나가게 하는것.

 

 

1. 다음을 구현하시오

<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
#nav {
	width: 580px;
	padding: 8px;
	border: 2px solid lightgray;
	overflow: hidden;
}

div:nth-child(n) {
	text-align: center;
	width: 110px;
	height: 70px;
	line-height: 70px;
	display: inline-block;
	border-top: 2px solid lightgray;
	border-bottom: 2px solid lightgray;
}
</style>

</head>
<body>
	<div id="nav">
		<div>menu1</div>
		<div>menu2</div>
		<div>menu3</div>
		<div>menu4</div>
		<div>menu5</div>
	</div>
</body>
</html>

 

2. 다음을 구현하시오

<meta charset="utf-8" />

<html>
<head>
<title></title>
<style>
#nav {
	height: 300px;
	width: 700px;
	padding: 10px;
	border: 2px solid lightgray;
	overflow: hidden;
}

div:nth-child(1) {
	text-align: center;
}

div:nth-child(2) {
	text-align: left;
	font-style: bold;
}

div:nth-child(3) {
	text-align: left;
	font-size: 0.8em;
}

div:nth-child(4) {
	text-align: right;
}

div:nth-child(5) {
	text-align: center;
	border-top: 2px solid lightgray;
	height: 70px;
	line-height: 70px;
	box-sizing: border-box;
}

h2 {
	text-decoration: underline;
}

a {
	font-size: 1.5em;
	text-decoration: none;
}
</style>

</head>
<body>
	<div id="nav">
		<div>
			<p>
				<span><h2>HTML5, CSS3 Document</h2> <br /></span>
			</p>
		</div>
		<div>
			<p>
				To. all member<br />
			</p>
		</div>
		<div>
			<p>html5, CSS3 study is very easy</p>

		</div>
		<div>
			<h4>From. SBA</h4>
		</div>
		<div>
			<a href="https://new.sba.kr/user/main.do">서울산업진흥원</a>
		</div>
	</div>
</body>
</html>

↓출력 결과

 

 

 

 

 

3. 다음을 구현하시오

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
<style>
#wrap {
	box-sizing: border-box;
	border: 2px solid lightgray;
	padding : 5px;
}

h1 {
	color: green;
	border: 2px solid lightgray;
}
</style>
</head>
<body>
	<div id="wrap">
		<h1>세계 3대 미항</h1>


		<a><img src="캡처.jpeg"></a>


		<p>시드니(Sydney), 호주</p>
		<p>리우데자네이루(Rio de Janeiro), 브라질</p>
		<p>나플리(Naples), 이탈리아</p>
	</div>
</body>
</html>

↓구현 결과

4. JSP로 다음을 구현하시오.

 

[.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<form action="requestparam.jsp" method="post">
		이름 : <input type="text" name="name" /><br />
		아이디 : <input type="text" name="id" /><br />
		비밀번호 : <input type="password" name="pw" /><br />
		취미: <input type="checkbox" name="hobby" value="book"/>독서 ,
		<input type="checkbox" name="hobby" value="cook" />요리 ,
		<input type="checkbox" name="hobby" value="run" />조깅,
		<input type="checkbox" name="hobby" value="swim" />수영,
		<input type="checkbox" name="hobby" value="sleep" />취침<br />
		전공 : <input type="radio" name="major" value="kor">국어,
			<input type="radio" name="major" value="eng">영어
            <input type="radio" name="major" value="math">수학
            <input type="radio" name="major" value="deign">디자인<br />
               
                <select name="protocol">
                 <option>ftp</option>
 
               </select><br />
		 전송 : <input type="submit" value="전송">
	</form>
</body>
</html>
[.jsp]
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<%
request.setCharacterEncoding("UTF-8");

String name=request.getParameter("name");
String id=request.getParameter("id");
String pw=request.getParameter("pw");
String[] hobby=request.getParameterValues("hobby");
String major=request.getParameter("major");
String protocol=request.getParameter("protocol");
%>

이름 : <%=name%><br />
아이디 : <%=id%><br />
비밀번호 : <%=pw%><br />
취미 : <%= Arrays.toString(hobby)%><br />
전공 : <%=major%><br />
프로토콜 : <%=protocol%>
</body>
</html>

★<%@page import="java.util.arrays"%> 이거 무조건 넣어야 배열 출력가능

 

 

상대경로, 절대경로

절대경로는 기준이 root이다.(C:\(근데 이거 쓰면 절대안됨.) , http://, / 등)

상대경로는 자기자신이 기준. 1)물리적인 경로(C:\User\bit\블라블라\WebContent) 2)웹사이트에서 치고 들어올때의 경로. (http://local.co.kr(아이피)/컨테스트명/)여기서마지막 / 이 바로 /WebContent이다. 그래서 WebContent안에 있는 파일이나 폴더 불러오고 있으면 컨테스트명/Webcontent/.jpg가 아니라 그냥 컨테스트명/.jpg로 해야한다

만약 WebContent 안에 생성된 폴더 안의 파일을 가져오고싶으면 ../생성된폴더/.jpg(상대경로) 로 해야함. ../는 상위폴더를 나타내기 때문

그냥 생성된폴더/.jpg로 쓰게되면(상대경로) 디폴트가 WebContent가 아닌 내가 갖고있는 주소 부터 그 앞의 모든주소가 다 기준이된다. 따라서 블라블라/생성된폴더/생성된폴더/.jpg 가된다.

그럼 /생성된폴더/.jpg 는?(절대경로) 절대경로는 아이피까지 붙여준다. (http://localhost:8282/)이게 알아서 붙음.

 request.getURI();가 절대경로 - 결론:아이피/블라블라/생성된폴더/.jpg 라고하면 /블라블라/생성된폴더/.jpg를 써줘야 된다.

itthis.tistory.com/104

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

21.01.06 Wed [031]  (0) 2021.01.06
21.01.05 Tue [030]  (0) 2021.01.05
20.12.31 Thu [028]  (0) 2020.12.31
20.12.30 Wed [027]  (0) 2020.12.30
20.12.29 Tue [026]  (0) 2020.12.29

관련글

댓글

티스토리툴바