libertyfromthinking-blog

[libertyfromthinking-blog]

톰캣서버와 자바서블릿연결

root/web-inf/src 에다가 .java 소스파일 root/web-inf/classes 에다가 컴파일된 .class 클래스파일

web-inf/web.xml 에 <servlet>        <servlet-name>Servlet</servlet-name>        <servlet-class>com.Servlet</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>Servlet</servlet-name>        <url-pattern>/projectname/Servlet</url-pattern>    </servlet-mapping>

추가해줄 것, url패턴은 url에 들어갈 주소이므로 정확히 기입, url은 html파일 내에 하이퍼링크에도 똑같이 기입하면 됨. 서블릿파일과 html파일은 한 폴더에 있는 것 처럼 취급할 것.

**css파일이 적용되지 않을 때 css파일 href태그끝에 "?ver=1"추가

[libertyfromthinking-blog]

브라우저의 작동방식

HTTP의 특징 : HTTP는 비연결형, 연결이 유지되는 것이 아니라 connect와 접속해지를 반복함. 때문에 이전의 정보 저장을 위해 cookie라는 개념등장

브라우저의 구성

1. UI : 뒤로가기, 홈, 주소표시줄, 북마크 등

2. 브라우저 엔진 : UI와 렌더링 엔진사이의 동작을 제어

3. 렌더링 엔진 : HTML과 CSS를 파싱해 화면에 표시함, 크롬은 각탭마다 각각의 렌더링 엔진 인스턴스 유지

4. 네트워킹 : 네트워크 호출에 사용

5. 자바스크립트 인터프리터 : 자바스크립트 코드를 파싱 후 실행

6. UI백엔드 : OS마다 UI가 바뀜에 따라 UI를 그려줌

7. 자료저장소 : 쿠키와 같은 자료 저장

렌더링 엔진 – 사파리 웹킷, 크롬의 크로미움

 파싱 – 문자를 해석해서 객체단위로 변환, 최상위 객체부터 차례대로 파싱한다고 생각하면 됨

렌더링 엔진의 흐름

1.     HTML문서를 DOM으로 파싱

2.     CSS를 파싱

3.     HTML과 CSS합쳐서 렌더 트리 형성

4.     렌더트리를 기준으로 레이아웃 형성

5.     화면에 페인팅작업(렌더링)

6.     출력

[libertyfromthinking-blog]

서블릿의 Response, Request

Httpservletrequest 객체

-      웹브라우저로부터 받은 요청정보를 저장함

-      웹브라우저의 http요청정보를 서블릿에게 전달하기 위한 목적

-      헤더정보, 파라미터, 쿠키, URI, URL등을 읽어들임

-      Body의 Stream을 읽어들임

Httpservletresponse 객체

-      요청을 보낸 클라이언트에게 응답을 보내기 위한 객체, 서블릿에게 전달됨

-      Contenttype, 응답코드, 응답메시지등을 전송

[libertyfromthinking-blog]

자바서블릿의 생애주기

서블릿의 라이프싸이클

1.     서블릿 생성자로 생성

2.     서블릿 init메소드로 초기화

3.     서블릿 service(request, response)메소드로 서비스, 응답내용은 여기에 구현

4.     destoy메소드로 파괴

** 서블릿을 실행했을 때 메모리를 확인하고 메모리에 존재할 시 service메소드만 호출된다

** 웹앱의 내용이 바뀌거나 WAS가 종료되면 destroy메소드로 파괴되고 새로 생성된다.

[libertyfromthinking-blog]

CSS의 애니메이션 속성

애니메이션 속성

Animation-name : 애니메이션 키프레임 이름 지정

Animation-duration : 한번 재생 후 지연 설정

Animation-iteration-count : 재생횟수 설정, 무한대일 경우 infinite

Animation-timing-function : 재생될 때 시간차 설정, 균등하게 할 경우 linear, 나머지는 검색

Animation-direction : 반복패턴 설정, from->to 반복이 일반적이지만 from->to->from도 가능함

Animation : 축약 속성, name duration timing-function iteration-count 순서대로 기입

Animation:spin 2s linear infinite;  //linear는 속도 균등, infinite는 무한대로

[libertyfromthinking-blog]

CSS의 Flex

 Flex 속성

크기가 알려지지않은 엘리먼트의 경우에도 공간을 배치, 정렬, 분산하는데 효율적인 방법을 제공.

Display:flex로 사용.st

Flexcontainer와 flexitems로 나뉨.

Flexcontainer는 6가지 속성을 가짐

1.     요소들의 방향 : Flex-direction:row || column || row-reverse || column-reverse

2.     개수초과했을때 다음줄 넘어감 : Flex-wrap || wrap || wrap-reverse || no-wrap

3.     Flex-direction과 flex-wrap의 요약버전 : flex-flow:row wrap

4.     주축(수평)기준으로 아이템을 정렬하는법 : Justify-content:center||flex-start||flex-end||space-between||space-around

5.     교차축(수직)기준으로 아이템을 정렬하는 법 : Align-items:center||flex-start||flex-end||stretch||baseline

6.     여러줄의 요소들의 정렬 : align-content:stretch || flex-start || flex-end || center;

[libertyfromthinking-blog]

CSS의 Float

Float 속성

Float:left;또는 Float:right; 로 정의하며 주로 이미지와 텍스트 배치, 레이아웃 나누기에 쓰임, 박스의 크기를 차지하지않고 텍스트나 이미지의 크기만큼만 공간을 차지하고 붕 떠 있음, 무시하려면 clear:right;속성 사용

[libertyfromthinking-blog]

CSS의 Position

Positioning

요소의 위치를 변경할 수 있게 해주는 속성, top, bottom, left, right 속성을 사용하여 위치 될 수 있으며 position 속성이 먼저 설정되어 있어야 함.

Static Positioning

기본적인 흐름에 따라 배치되며 top, bottom, left, right 속성이 사용불가능

 Relative positioning

Static과 같지만 Top, left, right, bottom 을 이용가능

 Fixed Positioning

광고창처럼 스크롤을 움직여도 고정되어 있음

 Absolute positioning

위치의 지정기준이 static이 아닌 부모 엘리먼트를 기준으로 잡기 때문에 기존의 요소들을 무시하고 겹친상태로 배치됨

[libertyfromthinking-blog]

박스모델의 요소들

박스모델의 요소

margin : 선과 바깥의 간격

border : 선굵기

padding : 선과 내부엘리먼트 사이의 간격

 inline element : 한라인에 복수개가 올 수 있는 요소

block element : 한라인에 하나만 올 수 있는 요소

** 인접한 요소가 margin값이 서로 다르다면?

Inline element인 경우 margin값이 더 큰쪽으로

Block element인 경우 margin값의 합

[libertyfromthinking-blog]

CSS의 우선순위

CSS의 우선순위

Inline(body태그내에명시)>Internal(head에명시)>external(외부에서불러옴)

div p > p                //구체적으로 명시한 것이 우선순위높음

동일하다면 더 아랫줄에 있는 것이 우선순위높음

Id>class>tag

[libertyfromthinking-blog]

JavaScript : 클라이언트 사이드 스크립트 언어, 커서를 이미지위에 올려놓으면 이미지가 바뀐다거나 하는 이용자의 조작에 반응하는 동적인 페이지 언어, 원래 서버와 데이터를 주고 받지 않았지만 HTML5에서 바뀜 ex)

<body>

<script type=”text/javascript”>

Function sum(a,b){

          Var c = a + b;

          Return c;

}

Document.write(sum(4,6)(;

</script>

</body>

  작성하는 장소에 따라 세종류로 나뉨

1.     Body 요소 안에 직접 작성 ex)

<body>

<script type=”text/javascript”>

     Document.write(“<p>javascript로 작성했습니다.</p>”);

</script>

</body>

 2.     Header 요소 안에 작성하여 호출 ex)

<head>

<script type=”text/javascript”>

Function byJS(){

     Document.write(“<p>javascript로 작성했습니다.</p>”);

}

</script>

</head>

<body>

<script type=”text/javascript”>

     byJS();

</script>

</body>

 3.     외부파일로부터 읽어들이는 방법

<head>

<script type=”text/javascript” src=”mylib.js”>

</script>

</head>

<body>

<script type=”text/javascript”>

          byJS()

    </script>

</body>

 4.     이벤트에 대한 응답으로 호출 ex)

<body>

<button onclick=”alert(‘경고’)”>여기를 클릭</button>

</body>

[libertyfromthinking-blog]

CSS의 선택자

태그명.클래스명{}

.클래스명{}

#id명{}

[libertyfromthinking-blog]

CSS의 정의와 사용법

CSS : 웹페이지의 내용에 대한 색이나 크기 등 장식을 설정하는 스타일 시트, HTML로 내용을 입력하고 CSS로 레이아웃 및 장식을 한다

CSS를 작성하는 장소에 따라 세가지로 나뉨

1.     HTML태그 안에 작성 ex)<div style=”color:red;”>적용할 문구</div>

2.     style요소를 이용해 동일한 파일에 정의 ex)

<head>

<style type=”text/css”>

#a1{

Color:red;

}

</style>

</head>

3.     외부 파일로부터 읽어 들이는 방법 ex)

<head>

     <link rel=”stylesheet” href=”global.css”>

</head>

Ex2)

<head>

<style type=”text/css”>

@import url(“global.css”);

</style>

</head>

[libertyfromthinking-blog]

웹서버의 개념

웹 서버 : 웹 브라우저(클라이언트)의 요청을 받는 곳

웹 어플리케이션 서버(WAS) : 요청된 페이지의 로직 및 데이터베이스와의 연동을 처리하는 부분

CGI(Common Gateway Interface) 방식 : 브라우저의 요청에 따라 ���서버가 실행시킬 수 없는 문서를 웹서버상의 프로그램으로 처리하는 방식 또는 프로그램과 연결하는 인터페이스를 말함. Perl이나 C등의 언어로 작성, 웹브라우저가 바로 DB에 요청하는 것이 아니며 서버의 자원을 과도하게 사용한다는 것과 요청이 들어올 때 마다 하나씩 처리하므로 느리다는 단점보유.

어플리케이션서버방식 : CGI의 단점을 보강해 나온 것, 웹서버가 프로그램을 실행하지 않고 어플리케이션에 요청을 전달하고 결과를 전달받아 브라우저에 결과 전달, 메모리를 아껴 ThroughPut, 처리량이 더 좋음

서버 사이드 스크립트 : HTML파일 안에 스크립트를 심어놓고 실행결과를 HTML의 일부로 웹브라우저에게 반환하는 방식, CGI와 비교해 서버에 주는 부하가 적음 ex)C,Perl,Python,JSP,PHP,ASP

클라이언트 사이드 스크립트 : Javascript를 주로 사용, VBScript, jscript 등이 있음.

HTML5 : CSS3와 자바스크립트까지 포함한 개념, 고기능의 애플리케이션을 웹에서 구현하는 것을 지향

HTML5의 특징 :

1.     화면 이동시 백그라운드 처리나 비동기 처리로 매끄러운 처리 가능

2.     어도비 플래시로 구현했던 것, 그래프나 동영상, 음악 재생 및 정지가 가능

3.     폼 기능과 드래그 앤 드롭이 가능해짐

[libertyfromthinking-blog]

CSS의 ID와 Class

ID : 고유한 속성으로 한 HTML문서에 하나만 사용 가능, 고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이

Class : 하나의 HTML문서안에 중복해서 사용 가능, 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적

[libertyfromthinking-blog]

그 외 HTML의 필수태그들

<span> : 텍스트(text)의 특정 부분을 묶어 속성을 적용할 때 자주 사용되는 인라인요소 <div> : 단락을 묶어 속성을 적용할 때 자주 사용되는 블록요소 <strong></strong> : 진하게 <h1></h1> ~ <h6></h6>: 글자크기를 조정, 제목태그로 쓰임 <a></a> : 하이퍼링크 연결을 위한 링크, 혼자만 사용하지 않고 다음 속성과 같이 사용 - href="하이퍼텍스트링크" : hyfertext reference의 약자로, 링크 클릭 시 이동할 주소 기입 - target="_blank" : 링크 클릭 시 새로운탭에서 열기 <li></li> : list의 약자, 목록태그로 리스트를 만듬 <ul></ul> : unordered list의 약자, li태그를 묶음, 순서 없는 리스트 생성 <ol></ol> : ordered list의 약자, li태그를 묶음, 번호 매겨진 리스트 생성 <p></p> : 단락 표현, 단락을 지정할 문장의 처음과 끝에 기입 <br> : 줄바꿈, 범위지정이 없기때문에 닫힘태그 생략가능 <img src="경로와파일명" width="폭" height="높이" alt="이미지가깨졌을때표시" title="커서를올려놓았을때표시"> : 이미지 표현, 크기조정, 이미지가 깨졌을 때 엑박에 뜨는 이름, 커서 올려놨을 때 이름

[libertyfromthinking-blog]

HTML의 레이아웃태그

<header> : body태그나 article태그 내의 헤더 부분을 정의, 주로 웹페이지의 제목이나 머릿말, 사이트로고를 표시 <nav> : body태그 내의 article태그 내의 네비게이션 부분을 정의, 주로 웹페이지에서 주요한 링크로 가는 네비게이션 역할을 함 <section> : 본문 내용을 담으며 관계가 있는 여러개의 글을 묶음 <article> : 본문 내용을 담으며 주로 뉴스, 하나의 글 등 독립적인 하나의 내용을 정의, <aside> : HTML 문서에서 페이지 부분 이외의 부차적인 콘텐츠(content)를 정의함 <footer> : 문서에 대한 꼬릿말을 주로 담으며 주로 담당자의 연락처나 이메일, 회사 주소 등을 정의