1. 선택자란?
· HTML에서 CSS style을 주기 위해서 선택자를 통해 특정 태그를 선택하며, 해당 태그의 속성을 변경하는 목적으로 사용된다.
· tag 선택자는 특정 태그를 선택하여 적용, * 선택자느 문서 전체를 선택하여 적용, 이 외에도 다양한 선택자가 사용된다.
2. CSS 문법은?
· Cascading Style Sheets의 약자로, HTML, XML과 같은 문서를 디자인적으로 보기 좋게 구성하여 정보를 전달하는 언어이다.
· 화면 상의 레이아웃 등을 컨트롤 하는 문서로서, 글꼴, 배경색, 너비와 높이, 위치 등을 지정하거나,
장치에 따라서 화면을 다르게 표시될 수 있도록 하는 기능을 가진다.
3. 시멘틱 태그와 그 종류에 대해 설명하시오.
· <div> 태그란? non-semantic 태그라고 할 수 있으며, <div>는 개별자마다 태그의 이름을 각자 지정하기 때문에 구별이
힘들고, 내용의 의미와 구조를 명확하게 정의 할 수 없는 태그이다.
· 이러한 단점을 보완하여 HTML5부터는 의미가 더해진 시멘틱 태그를 지원하며, 문서의 구조와 의미를 브라우저와 개발자
모두에게 명확하게 보여주고 정확한 의미를 부여한 태그라고 볼 수 있다.
- <header> : 헤더, <nav> : 네비게이션, <section> : 본문, <footer> : 꼬리
4. bootstrap
· bootstrap은 각종 레이아웃, 버튼, 입력창 등의 디자인을 HTML, CSS, JavaScript를 기반으로하여 만들어진 프레임워크이다.
· 여러 개발자들의 공동작업이 이루어질때, 디자인 불일치, 방대한 코드량, 관리 어려움 등의 일관성을 유지하기가
힘든 문제점을 개선하기 위해 개발되었다.
5. overfolw 속성
· overfolw란? 특정요소가 정해진 크기의 범위를 초과 할 때 어떠한 방식으로 처리할 것 인지 결정할 수 있는 속성으로,
부모가 자식보다 크기가 더 작을 때 사용된다.
1) overfolw: visible 범위를 넘어 가더라도, 있는 그대로를 나타내도록 처리한다.
2) overfolw: hidden 범위를 넘어가는 부분은 보이지 않도록 처리한다.
3) overfolw: scroll hidden에서 보이지 않는 부분을 사용자가 확인 할 수 있도록 스크롤바로 표시하여 처리한다.
4) overfolw: auot 범위에 따라 스크롤바를 추가할지 안할지 자동으로 결정한다.
6. class 와 id 선택자의 차이와 어떨 때 사용하는가?
※id 선택자: style을 적용할 때는 #id 형태로 사용되며, 한 페이지에서 하나의 정의로 하나의 태그만 사용가능하다.
즉, 한 페이지 내에서 같은 id로 정의 내릴 수 없다.
※class 선택자: style 적용할 때는 .class 형태로 사용되며, 한 페이지에서 반복적으로 사용되는 스타일을 정의할 수 있다.
7. Servlet의 생명주기에 대하여 설명하시오.
· 클라이언트 요청 시 Servlet은 바로 호출되지 않고, 다음과 같은 주기로 작동한다.
1) 최초 요청 시 Servlet 객체가 생성되어 메모리에 저장된다.
2) 서버는 Init() 메소드를 맨 처음 한 번만 호출한다.
3) doGet()과 doPost() 메소드는 요청 시마다 매번 호출되어 작업을 수행하여 결과를 출력한다.
4) 종료 단계에서 반드시 마무리를 지어야 될 때는 destroy() 메소드를 호출하여 종료한다.
※연습문제※
♣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
73
74
75
76
77
|
<html>
<head>
<meta charset="EUC-KR">
<title></title>
<style>
#header {
width: 500px;
background-color: #ffd800;
border: 1px solid #808080;
text-align: center;
}
#wrap {
width: 500px;
background-color: #66dbf6;
border: 1px solid #808080;
text-align: center;
overflow: hidden;
}
#content {
width: 350px;
border: 1px solid red;
float: left;
}
#banner {
border: 1px solid red;
float: left;
}
#footer {
clear: both;
width: 500px;
border: 1px solid #808080;
background-color: #ffd800;
text-align: center;
}
.menu1 {
color: #1822e2;
font-weight: bold;
}
.menu1, .menu3, .menu5 {
font-size: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="wrap">
<div id="content">
<h1>CONTENT</h1>
<ul>
<li class="menu1">menu1</li>
<li class="menu2">menu2</li>
<li class="menu3">menu3</li>
<li class="menu4">menu4</li>
<li class="menu5">menu5</li>
</ul>
</div>
<div id="banner">
<h1>BANNER</h1>
<a href="http://www.sba.seoul.kr" target="_blank"><img src="img01.jpg"></a>
</div>
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</body>
</html>
|
cs |
♣HTML과 Servlet으로 작성하시오♣
<구현 화면>
<FormEx.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
|
<body>
<form action="FormEx"method="post">
이름 : <input type="text" name="name" size="10"><br/>
아이디 : <input type="text" name="id" size="10"><br/>
비밀번호 : <input type="password" name="pw" size="10"><br/>
취미 : <input type="checkbox" name="hobby" value="read">독서
<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" checked="checked">국어
<input type="radio" name="major" value="eng">영어
<input type="radio" name="major" value="mat">수학
<input type="radio" name="major" value="des">디자인<br/>
<select name="protocol">
<option value="http">http</option>
<option value="ftp">ftp</option>
<option value="smtp">smtp</option>
<option value="pop">pop</option>
</select><br/>
<input type="submit" value="전송">
<input type="submit" value="초기화">
</form>
</body>
</html>
|
cs |
<FormlEx.java>
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
|
@WebServlet("/FormEx")
public class FormEx extends HttpServlet {
private static final long serialVersionUID = 1L;
public FormEx() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost");
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");
response.setContentType("text/html; charset=EUC-KR");
PrintWriter writer = response.getWriter();
writer.println("<html><head></head><body>");
writer.println("아이디 : " + id + "<br/>");
writer.println("비밀번호 : " + pw + "<br/>");
writer.println("취미 : " + Arrays.toString(hobby) + "<br/>");
writer.println("전공 : " + major + "<br/>");
writer.println("프로토콜 : " + protocol + "<br/>");
writer.println("</body></html>");
}
}
|
cs |
'bitcamp > 면접족보' 카테고리의 다른 글
면접족보 20/12/31_CSS, JSP태그 (0) | 2021.02.13 |
---|---|
면접족보 20/12/30_JSP 한글처리방식 (0) | 2021.02.13 |
면접족보 20/12/28_HTML 개념, GET/POST 방식 (0) | 2021.02.12 |
면접족보 20/12/24_프로토콜, WAS, JSP 개념 (0) | 2021.02.12 |
면접족보 20/12/23_Stack, Queue, Map (0) | 2021.02.06 |