경로, CSS의 Position, JSP의 액션태그 및 쿠키

WebDev/본과정 / / 2021. 5. 15. 19:04

1. 절대경로와 상대경로에 대하여 설명하시오.

경로(디렉토리)를 트리 구조의 관점으로 설명하면 다음과 같다.

해당 그림은 경로의 최상위에 해당되는 루트 디렉토리(Root Directory)를 시작으로 여러 노드들을 계속 거쳐 내려오면 목적지(파일)가 있는 것으로 설명하고 있다. 따라서 만약에 ‘File5’라는 것을 열고 싶으면 ‘Root - DirA - DirC’ 순으로 한 단계식 내려와야 접근이 가능하다.

  • 절대경로: 루트 디렉토리부터 해당되는 위치까지 쭉 나열하여 표기한 경로를 일컫는다. 받는 위치(To)를 관점으로 진행되는 것이 특징이다.File4 -> File1 현재 내가 있는 파일의 위치 Root:\DirA\DirC\File4 보내고자 하는 파일의 위치 Root:\DirA\File1
  • 상대경로: 현재 문서에서부터 해당되는 위치까지 나열하여 표기한 경로를 일컫는다. 보내는 위치(From)를 관점으로 진행되는 것이 특징이다.File4 -> File1 현재 내가 있는 파일의 위치 Root:\DirA\DirC\File4 보내고자 하는 파일의 위치 ..\File1 <-- DirC 폴더 상위에 DicA 폴더가 있으므로 상위 단계로 건너는 키워드인 '..'을 사용한다.

 

 

2. 아래의 action 속성에 대하여 아래의 3가지 케이스에 대하여 테스트 하고 결론을 내려 보세요.

0105/request_send.jsp
../0105/request_send.jsp
/0105/request_send.jsp

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

: 세 가지 테스트를 하기 위해 위치(디렉토리) 조건을 다음과 같이 정했다.

  1. Test 폴더를 기준으로 이 안에 0105 폴더와 0106 폴더를 생성했다.
  3. 0105에는 request_send.jsp 파일을, 0106 폴더에는 main.html 파일을 생성하였다.
  5. request_send.jsp와 main.html 파일의 소스코드를 각각 기입하였다.

 

2-1. 0105/request_send.jsp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Test/0106/main.html</title>
</head>
<body>
	<form action="0105/request_send.jsp">
	당신의 나이는 : <input type="text" name="age" size="5">
	<input type="submit" value="전송">
</form>
</body>
</html>

main.html의 현재 위치(0106)를 기준으로 삼았으므로 0106 폴더에 0105 폴더가 있을리 없다! 따라서 404 에러가 뜬다.

 

2-2. ../0105/request_send.jsp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Test/0106/main.html</title>
</head>
<body>
	<form action="../0105/request_send.jsp">
	당신의 나이는 : <input type="text" name="age" size="5">
	<input type="submit" value="전송">
</form>
</body>
</html>

main.html의 현재 위치를 기준, 상위 폴더(Test)로 올라가는 키워드인 ‘..’을 이용하여 0105 폴더안에 있는 request_send.jsp를 지칭하였다. 즉, 참이므로 해당 페이지가 읽어진다.

 

2-3. /0105/request_send.jsp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Test/0106/main.html</title>
</head>
<body>
	<form action="/0105/request_send.jsp">
	당신의 나이는 : <input type="text" name="age" size="5">
	<input type="submit" value="전송">
</form>
</body>
</html>

상대경로를 지정할 때 자주 저지르는 실수로 보내는 위치와 받는 위치의 관계가 명확하지 않을시 발생한다. 따라서, 해당 폴더 및 파일의 위치가 보내는 위치와의 관계가 어떤지 반드시 파악하고 기입한다.

 

 

3. css에서의 position 의 4가지 설명하시오.

  • static: 정적 위치. HTML의 기본값으로 위치 지정에 영향을 받지 않아 순서대로 적용된다.
  • relative: 상대 위치. 최근 위치를 기준으로 해당 수치만큼 추가적으로 적용된다.
  • absolute: static 속성을 가지지 않은 부모 기준으로 움직인다.
  • fixed: 원래 위치에 구애받지 않고 고정된 지점에 설정할 수 있다. 웹 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

 

 

4. float 속성에 대하여 설명하시오.

: HTML 요소가 주변의 요소들과 자연스럽게 어울러지도록 만들어주는 속성으로 공간을 차지하되 다른 요소의 배치에 영향을 주지 않는 특징을 가진다. 즉, 해당 속성이 적용되면 이 후에 붙는 여러 데이터들은 block 태그와 같은 특성에 구애 받지 않고 나란히 출력될 수 있다.

 

 

5. 쿠키에 대하여 설명하시오.

: http 프로토콜의 성질 상 웹 브라우저 - 서버 간 요청(Request) 후 응답(Response)이 끝날 때, 서버는 웹 브라우저와의 관계를 종료한다. 이렇게 관계가 끊겨도 정보를 유지하기 위한 수단이 필요한데 이 때 필요한 것이 쿠키이다.

쿠키는 서버에서 생성 후 웹 브라우저에 정보를 저장하여 요청할 때마다 지속적으로 참조 및 변경을 할 수 있는 특징이 있다. 이때, 최대로 저장할 수 있는 용량은 4kb이다.

 

 

6. 액션 태그에 대하여 설명하시오.

: JSP에서 스크립트와 주석, 디렉티브등과 함께 해당 페이지를 이루고 있는 요소로 페이지 간 제어와 다른 페이지의 실행 결과를 현재 페이지에 포함할 수 있는 기능을 가진다.

 

 

7. 실습문제 1번

7-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	
	<style type="text/css">
		#header {
			width: 600px;
			height: 50px;
			background-color: green;
		}
		#content {
			width: 600px;
			height: 500px;
			overflow: hidden;
		}
		
		#left {
			width: 100px;
			height: 500px;
			background-color: yellow;
		}
		
		#center {
			width: 400px;
			height: 500px;
			background-color: red;
		}
		
		#right {
			width: 100px;
			height: 500px;
			background-color: gray;
		}
		
		#content #left,  #content #center, #content #right {
			float: left;
		}
		#footer {
			width: 600px;
			height: 50px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div id="header">
		헤더
	</div>
	<div id="content">
		<span id="left">컨텐츠 LEFT</span>
		<span id="center">컨텐츠 CENTER</span>
		<span id="right">컨텐츠 RIGHT</span>
	</div>
	
	<div id="footer">
		푸터
	</div>
</body>
</html>

7-2. 구현화면

 

 

8. 실습문제 2번

8-1. 소스코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HBF02</title>
	
	<style type="text/css">
		#wrapper {
			padding: 5px;
			width: 625px;
			height: auto;
			border: 1px solid #cccccc;
			text-align: center;	
		}
		
		#header {
			margin-bottom: 5px;
			padding: 25px 0px 25px 0px;
			border: 1px solid #cccccc;
			text-align: center;
		}
		
		#nav {
			height: 80px;
			margin-bottom: 5px;
			padding: 10px auto 10px auto;
			border: 1px solid #cccccc;
			text-align: center;
		}
		
		#nav #nav_main {
			padding: 10px 0px 15px 0px;
		}
		
		#nav .nav_menu {
			margin-bottom: 10px;
			padding: 5px 20px 5px 20px;
			border: 1px solid #cccccc;
		}
		
		#con {
			margin-bottom: 5px;
			padding: 10px;
			border: 1px solid #cccccc;
			height: 350px
		}
		
		#con #content {
			float: left;
			width: auto;
			min-width: 400px;
			height: 325px;
			margin-right: 10px;
			padding: 5px 0px 5px 0px;
			border: 1px solid #cccccc;
			text-align: center;
		}
		
		#con #banner {
			float: right;
			width: 188px;
			height: 325px;
			padding: 5px 0px 5px 0px;
			border: 1px solid #cccccc;
			text-align: center;
		}
		
		#footer {
			padding: 25px 0px 25px 0px;
			border: 1px solid #cccccc;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			HEADER
		</div>
		
		<div id="nav">
			<div id="nav_main">NAVIGATION</div>
			<span class="nav_menu">menu1</span>
			<span class="nav_menu">menu2</span>
			<span class="nav_menu">menu3</span>
			<span class="nav_menu">menu4</span>
			<span class="nav_menu">menu5</span>
		</div>
		
		<div id="con">
			<span id="content">CONTENT</span>
			<span id="banner">BANNER</span>
		</div>
		
		<div id="footer">
			FOOTER
		</div>
	</div>
</body>
</html>

 

8-2. 구현화면

저작자표시

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

DB 기초 쿼리문과 JDBC 개요  (0) 2021.05.15
DB의 개요와 JSP의 Session, Exception, Java Bean  (0) 2021.05.15
CSS의 Box 속성과 JSP의 내장객체  (0) 2021.05.15
CSS의 display와 JSP의 태그  (0) 2021.05.15
CSS의 여러 선택자와 서블릿의 데이터 처리  (0) 2021.05.14
WebDev/본과정 관련 글
글 더보기

티스토리툴바