본문 바로가기

bitcamp/면접족보

면접족보 20/12/29_Servlet 생명주기, CSS개념

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