1. 절대경로와 상대경로에 대하여 설명하시오.
· 절대경로는 웹페이지나 파일이 가지고 있는 고유한 경로를 말하며, c: http / 기호를 사용하여 표기한다.
(/기호는 ip주소까지만 표기되며, 컨텍트명은 표기되지 않는다)
· 상대경로: 자기자신(HTML)의 현재 위치를 기준으로 경로를 인식한다.
경로에 default인 상태로 표기된 경우 ./이 생략 되어 있는 상태이며, 상위폴더에서 검색이 필요한 경우에는 ../ 를 표기한다.
2. 아래의 action에 대하여 경로 3가지 케이스를 설명하시오.
1) 0105/request_send.jsp
· 상대경로, WebContent 폴더에서 하위 폴더인 0105를 찾아들어가 request_send.jsp로 접근하게 된다.
2) ../0105/request_send.jsp
· 상대경로, 현재 위치에서 상위폴더인 WebContent로 이동 후 0105 폴더에 있는 request_send.jsp로 접근하게 된다.
3) /0105/request_send.jsp
· 절대경로, http://localhost:8282/0105/request_send.jsp의 의미로 해석할 수 있으며, 컨텍스트명 이후의 0105 폴더에 있는
request_send.jsp로 접근하게 된다.
3. css에서의 position의 4가지 설명하시오. **반드시 외우기!!**
· position 속성이란? 웹 문서 안 요소들을 어떻게 배치할 것인지를 지정하는 속성이다.
1) static은 정적 위치 지정 방식으로 position default는 기본적으로 static으로 설정되어 있으며, 초기값으로 위치를
지정하지 않을 때와 같다. top, right, bottom, left 속성 값이 적용 되지 않기 때문에 position을 무시할 때 사용되기도 한다.
2) relative은 상대 위치 지정 방식으로 해당 HTML 요소의 정적 위치에 따라 위치를 재조정하는 방식이다.
(static을 기준으로 위치 설정)
부모-자식 관계일 때는 부모의 영향을 받고 동위 관계일 때는 바로 위 요소의 영향을 받아 위치가 설정된다.
3) fixed는 고정 위치 지정 방식으로 브라우저 화면을 기준으로 설정된다. 즉, 화면이 변경되더라도 고정된 위치로 설정된다.
웹페이지에서 따라다니는 광고나 공지가 바로 fixed로 위치 설정하였기 때문! (기준점은 브라우저 좌측 상단)
4) absolute은 static 속성을 가지고 있지 않은 부모를 기준으로 설정이 된다.
만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
4. float 속성에 대하여 설명하시오.
· '뜨다' 라는 의미로 웹페이지에서 이미지를 정렬할 때 사용되는 속성으로, Left/Right/None으로 정렬이 가능하다.
· 2차원 배열이므로 다음 요소에 float 미지정 시, 밑에 가라앉기 때문에 화면 상에 보여지지 않는다.
단, text나 인라인 요소는 자동으로 보이게 정렬된다.
5. Cookie란?
· 클라이언트 요청에 대한 응답을 마치고나면 채팅처럼 연결성이 지속되지 못하고 서버는 웹브라우저와의 관계를 종료하게된다.
why? 한 개의 서버에 다수의 클라이언트를 계속 연결해두면 서버는 다운되기 때문!
· 연결이 끊겼을 때 어떠한 정보를 지속적으로 유지(로그인 상태 유지)하기 위해 Cookie 혹은 Session을 사용한다.
· 데이터를 쿠키 파일에 저장하여 서버에서 응답할 때 쿠키와 함께 웹브라우저에 전송되고,
서버에서 응답받은 새로운 URL에 접근할 때 쿠키와 함께 전송되어 데이터가 유지된다.
(웹브라우저는 기본적으로 2개의 저장공간이 존재: 쿠키와 캐시영역(사진 중복 저장 방지))
6. 액션 태그란?
· 액션 태그는 JSP 페이지 내에서 어떠한 동작(페이지 이동/삽입)을 하도록 지시하는 태그이다.
1) <jsp:forward> 요청이 들어오면 현재의 JSP 페이지에서 다른 JSP 페이지로 전환할 때 사용한다.
첫 번째 URL에 먼저 접근한 후, 두 번째 URL로 유입되기 때문에 주소는 변경되지 않는다.
(첫 번째가 아닌 두 번째 URL의 실행 내용 출력)
2) <jsp:include> 현재 페이지에 다른 페이지를 삽입시킬 때 사용한다.
3) <jsp:param> 데이터 전달을 목적으로 사용되는 태그이며, 이름과 값으로 구성되어있다.
※연습문제※
♣HTML 문서에서 CSS를 이용하여 작성하시오♣
<구현 화면>
<html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
#header{
width:800px;
height:80px;
background-color:green;
}
#content{
overflow:hidden;
}
#content .left{
width:150px;
height:600px;
background-color:yellow;
float:left;
}
#content .center{
width:500px;
height:600px;
background-color:red;
float:left;
}
#content .right{
width:150px; height:600px;
background-color:grey;
float:left;
}
#footer{
width:800px;
height:60px;
background-color:blue;
}
</style>
</head>
<body>
<div id="header">헤더</div>
<div id="content">
<div class="left">컨텐츠LEFT</div>
<div class="center">컨텐츠CENTER</div>
<div class="right">컨텐츠RIGHT</div>
</div>
<div id="footer">푸터</div>
</body>
|
cs |
♣HTML 문서에서 CSS를 이용하여 작성하시오♣
<구현 화면>
<html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
#wrap {
border: 1px solid #cccccc;
width: 800px;
height: 700px;
text-align: center;
padding: 7px;
}
#header {
border: 1px solid #cccccc;
line-height: 100px;
margin-bottom: 5px;
}
#nav, #content, #footer {
border: 1px solid #cccccc;
margin-bottom: 5px;
}
#nav ul, #content {
overflow: hidden;
}
#nav ul li {
border: 1px solid #cccccc;
list-style: none;
float: left;
width: 140px;
line-height: 40px;
}
#content .left {
border: 1px solid #cccccc;
width: 570px;
height: 340px;
float: left;
margin: 7px;
}
#content .right {
border: 1px solid #cccccc;
width: 195px;
height: 340px;
float: left;
margin: 7px;
}
#footer {
line-height: 110px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">HEADER</div>
<div id="nav">
<p>NAVIGATION</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="content">
<p class="left">CONTENT</p>
<p class="right">BANNER</p>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
|
cs |
'bitcamp > 면접족보' 카테고리의 다른 글
| 면접족보 21/01/07_SQL문 (0) | 2021.02.13 |
|---|---|
| 면접족보 21/01/06_세션, DBMS (0) | 2021.02.13 |
| 면접족보 21/01/04_Redirect, Forward (0) | 2021.02.13 |
| 면접족보 20/12/31_CSS, JSP태그 (0) | 2021.02.13 |
| 면접족보 20/12/30_JSP 한글처리방식 (0) | 2021.02.13 |
