서블릿 -> 동적으로 응답 결과를 만들어낸다 = 이미 응답할 페이지를 만들어서 가지고 있는 것이 아니라 요청이 들어왔을 때 이 서블릿이 실행되면서 응답할 코드를 만들어내고 그때 그 코드로 응답을 하는 것! 

  

<실습>

1. Eclipse에서 exam31 project 생성 후 1-10 출력하는 페이지 보여주는 'TenServlet.java'서블릿 작성. (Servlet 3.1사용)

이것이 annontation 방법이다. 'ttt'을 변경하면 페이지 url 주소가 바뀐다. 

http://localhost:8080/exam31/ten -> http://localhost:8080/exam31/ttt

2. 서블릿 2.5 spec으로 exam25 프로젝트 생성. 1-10 출력하는 TenServlet 작성

web.xml이 기본적으로 생성된다. 

  url - /ten 요청이 들어오면 url mapping에서 찾아내고 여기서 찾지 못하면 404라는 not found 페이지가 출력된다. 여기서 확인하는 것이 <servlet-name>태그 안의 contents와 실제 <servlet>태그 안에서 똑같은 이름의 servlet 이름을 비교하여 내가 실행할 서블릿 이름을 찾아내는 것. (3.x 버전 이상에서는 이것을 annotation 이 알아서 해주는 것)

* servlet의 버전에 따라 서블릿 작성 방법은 같지만 등록 방법은 달라짐을 유념 할 것 *

Servlet클래스 작성 시 HttpServlet 클래스를 상속하지 않았다면 어떻게 동작 할까?

: HttpServlet이 제공하는 메소드의 사용이 불가능. 즉 doGet 메소드의 상속과 재정의가 불가능 하기 때문에 개발자가 직접 http protocol에 맞게 메소드를 생성해야 하는 불편함이있다. 

3. 서블릿의 생성주기 (Life Cycle)

<실습>

서블릿 생명주기를 확인할 수 있는 LifecycleServlet을 작성

HttpServlet의 3가지 메소드를 오버라이딩(재정의) 

- init() / service(request, response) / destroy()

해당 url로 client-server 요청. 서버는 url을 받아서 Lifecycle이라는 url 은 mapping을 통해 LifecycleServlet이라는 것을 알아냄. 메모리에 존재하는지 확인 후 ( 처음 호출했기 때문에 올라와있지 않음) 존재하지 않는 경우 LifecycleServlet을 생성한다. 따라서 

생성자에 넣어는 메세지가 출력되는것

이어서 init , service 메소드가 실행됨을 확인할 수 있다. 

브라우저에서 새로고침을 실행하는 경우 service 메서드만 호출됨을 알 수 있다. 

서블릿은 객체를 여러번 만드는 것이 아니라 메모리에 객체가 있다면 service 객체만 호출하기 때문이다

servlet java 파일을 수정하고 저장하면 destroy 메소드가 호출 되고, 창을 새로고침하면 새로운 서블릿파일에 대한 객체가 없기때문에 생성자, init, service가 차례로 호출됨을 볼 수 있다. 

• 정리

if(메모리에 없음) {

    해당 서블릿 클래스를 메모리에 올림 (=객체의 생성)

    init()메소드 실행

}

service () 메소드 실행 

-> 요청이 들어왔을 때 응답해야 하는 모든 내용은 service()에 구현되어야 되는 것 기억

WAS가 종료되거나, 웹 어플리케이션이 새롭게 갱신될 경우 destroy()메소드 호출됨

- service 메서드 

service 메서드는 Servlet의 template methode pattern으로 구현

클라이언트의 호출이 GET일 경우 자신이 가지고 있는 doGet(request, response)메서드 호출

클라이언트 호출이 POST일 경우 자신이 가지고 있는 doPost(request, response)메서드 호출

<실습>

service(request, response)메서드 주석 처리 

HttpServlet doGet(request, response) / HttpServlet doPost(request, response) 오버라이드

4. HttpServletRequest / HttpServletResponse

• WAS가 웹 브라우저로부터 Servlet요청을 받으면
• 요청할 때 가지고 있는 정보를 HttpServletRequest 객체 생성하여 저장
• 웹 브라우저에게 응답 보낼 때 사용하기 위한 HttpServletResponse 객체 생성
• 생성된 두 객체를 mapping된 서블릿에 전달

헤더 정보 읽어 들이기 

  웹 브라우저가 요청정보에 담아서 보내는 header값을 읽어 들이는 HeaderServlet 생성

파라미터 이름 = 파라미터 값

css는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해 적절한 스타일인 결정된다 => cascading

     div, p, h, li 태그 등. 가로영역을 모두 채우며 block 요소 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보임. width, height 속성을 지정할 수 있다.

     block과 달리 줄 바꿈이 되지 않고 width, height 지정불가. 글자나 문장에 볼드, 이탤릭, 색상, 밑줄 등의 효과를 주기 위해 존재하는 단위. span, b, i, a 태그 등이 있음. inline 요소 뒤에 나오는 태그는 줄바꿈 되지 않고 바로 오른쪽에 표시된다.

     block과 inline의 중간 형태. 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.

-글씨체 /글꼴

  이 외에 웹 폰트도 있음 , 대표적으로는 구글 웹폰트가 잇으며 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했다.
기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능함

 <div> 안녕하세요 &#x263a;</div> //☺  웹 화면에는 웃음 표시가 표현되는 코드

- CSS가 배치되는 방식

layout (rendering) : 엘리먼트를 화면에 배치하는 것
  위 > 아래, 순서대로 블럭을 이루며 배치되는 것이 기본이다. 하지만 웹사이트에서는 다양한 방식으로 엘리먼트를 배치해야 하기 때문에 추가적 속성을 제공한다.

display (block, inline, inline-block)
position ( static, absolute, relative, fixed)
float(left, right)

- position
상대적/ 절대적으로 어떤 위치에 엘리먼트를 배치하는 것을 수월하게 하기 위해

1. 기본으로 static
2. absolute
    기준점에 따라 top/left/right/bottom 으로 설정됨
    기준점 : 상위 엘리먼트중에 static이 아닌 position
    top, left 0,0이라도 꼭 주는게 좋다
3. relative
   원래 자신이 위치해야 할 곳을 기준으로 이동
   top/ left/right/bottom
4. fixed
   viewport(전체화면) 좌측, 맨위를 기준으로 동작

1position - body를 기준점으로 잡는다

- margin
간격을 준다
  ex ) margin-top, margin-left ...

- float
  기존의 배치에서 벗어나 예외적으로 둥둥떠다니는 형태로 배치된다.
  뒤에 나오는 block element는 float 된 element를 인식하지 못하고 중첩되어 배치된다.

- box-model
 border
 padding
 margin

 box-shadow : border 밖에 테두리를 그리는 속성, 일종의 박스 모델에 포함돼서 표현

* 엘리먼트의 크기는 기본적으로 부모의 크기를 그대로 상속받음

box - sizing
:  padding 값을 box size 보다 크게 주면 엘리먼트가 커질 수 있다.
box-sizing : content-box 일 경우 컨텐츠가 계속 커질 수 있지만
box-sizing : border-box -> 박스의 크기를 테두리border 라고 지정 해주는 것



<정리>

layout 구현방법은?
- 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근 css-grid, flex 속성 등 layout을 위한 속성이 나왔으니 확인 해 볼 것. 기본 배치는 float를 많이 사용
- 특별한 위치에 배치하기 위해서는 position absolute, relative등을 사용
- block element 를 inline-block으로 변경하여 가로로 배치하기도 함. 크기 지정도 가능해진다
- 엘리먼트 안의 텍스트 간격 - padding, 다른 엘리먼트 간 간격 - margin

- position 속성이 없는 클래스의 경우 position이 걸린 클래스 이전에 렌더링 됨. position은 float보다 우선 순위가 높다.

- layout 정리된 사이트
https://thrillfighter.tistory.com/480
https://ko.learnlayout.com/display.html
https://ofcourse.kr/

- 게임으로 배우는 layout
http://flukeout.github.io/#

• flex