[JAVA 웹 개발 공부] 국비지원 56일차 - CSS 선택자, 스타일 시트, position, HTML 시맨틱 태그, 웹서버, WAS, JSP, Postman

CSS 선택자

 

 

 

1. 기본 선택자

 

종류	설명	형식
전체 선택자	HTML 에서 사용할 수 있는 모든 요소를 한번에 선택자로 지정	*{/* CSS 코드 */}
태그 선택자	HTML 태그명으로 선택자를 지정	태그명{/* CSS 코드 */}
아이디 선택자	HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자를 지정	#id속성값{/* CSS 코드 */}
클래스 선택자	HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정	.class속성값{/* CSS 코드 */}
기본 속성 선택자	HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정	[속성]{/* CSS 코드 */} [속성=값]{/* CSS 코드 */}

 

2. 조합 선택자

종류	설명	형식
그룹 선택자	여러 선택자를 하나로 그룹 지을 때 사용	선택자1, 선택자2, 선택자3{/* CSS 코드 */}
자식 선택자	부모 요소의 하위에 있는 자식 요소에 스타일 적용할 때 사용	부모 선택자 > 자식 선택자{/* CSS 코드 */}
하위 선택자	선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법	선택자1 선택자2 선택자3{/* CSS 코드 */}
인접 형제 선택자	앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정	이전 선택자 + 대상 선택자{/* CSS 코드 */}
일반 형제 선택자	이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정	이전 선택자 ~ 대상 선택자{/* CSS 코드 */}

 

 

CSS 스타일 시트

 

1. 내부 스타일 시트 

HTML 파일 내부에 CSS 코드를 작성하는 방법이다.

<style>
/* CSS 코드 */
</style>

 

2. 외부 스타일 시트

외부 스타일 시트는  CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법이다.

이때 별도 파일의 확장자는  css여야 한다. 별도로 작성한  CSS 파일을 HTML 문서에서 연결할 때는 link 태그를 사용한다.

<link rel="stylesheet" href="css 파일 경로">

 

 

CSS position

 

요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용

static	요소를 기본 흐름에 따라 배치
relative	요소를 기본 흐름에 따라 배치하지만, 좌표 속성을 사용할 수 있음, 좌표 속성(top, right, bottom, left)을 기준으로 좌푯값 지정
absolute	요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치
fixed	요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치,  스크롤해도 해당 위치에 고정
sticky	요소를 static 값처럼 기본 흐름에 따라 배치하지만,  지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정
z-index	position 속성으로 배치한 요소의 z축 위치를 결정, 속성값의 숫자가 클수록 요소가 더 앞쪽에 배치

 

 

HTML 시맨틱 태그

 

종류	설명	형식
header 태그	웹 페이지에서 헤더 영역을 구분할 때 사용, 웹 사이트의 최상단이나 좌측에 위치하고, 로고, 검색, 메뉴와 같은 요소 포함	<header> 헤더 구성 요소 </header>
nav 태그	웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분	<nav></nav>
section 태그	웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용, 보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함	<section></section>
article 태그	웹 페이지에서 독립적인 영역을 구분할 때 사용	<article></article>
aside 태그	article 태그나 section 태그로 영역을 구분할 수 없을 때 사용	<aside></aside>
footer 태그	웹 페이지에서 푸터 영역을 구분할 때 사용, 일반적으로 웹 페이지의 최하단에 있고, 저작권 정보, 연락처 등의 요소 포함	<footer></footer>
main 태그	웹 페이지의 주요 내용을 지정할 때 사용	<main></main>

 

 

HTML 목록 태그

 

종류	설명	형식
ul 태그	순서가 없는 비순서형 목록을 생성할 때 사용, 목록 내용은 li 태그로 구성, 목록 내용마다 글머리 기호가 붙음	<ul> <li>목록 내용 1</li> </ul>
ol 태그	순서형 목록을 생성할 때 사용, 목록 내용은 li 태그로 구성, 목록 내용에 번호가 붙음	<ol> <li>목록 내용 1</li> </ol>
dl 태그	정의형 목록(용어와 용어 설명을 나열한 형태의 목록) 만들 때 사용, dt 태그로 용어를, dd 태그로 용어 설명을 작성	<dl> <dt>용어 1</dt> <dd>용어 설명 1</dd> </dl>

 

 

웹 브라우저와 웹 서버

 

웹 브라우저에 URL을 입력하면 웹 서버라 불리는 프로그램이 웹 브라우저에 웹 페이지를 제공한다. 

웹 브라우저가 웹 서버에 웹 페이지를 달라고 하는 것을 흔히 '요청(request)' 한다고 표현하고,

요청한 웹 페이지를 웹 브라우저에 제공하는 것을 '응답(response)'이라고 표현한다.

 

웹 브라우저와 웹 서버는 IP주소를 이용해서 연결하기 때문에 도메인 이름을 IP주소로 변환할 필요가 있는데, 

이 때 사용하는 것이 바로 DNS(Domain Name Server)이다.

웹 브라우저에 URL을 입력하면, 웹 브라우저는 도메인 이름에 해당하는 IP주소를 DNS에 요청하고, DNS는 IP주소를 응답으로 제공한다.

DNS로부터 IP주소를 받으면, 웹 브라우저는 IP주소를 이용해서 웹 서버에 연결한 뒤 URL에 해당하는 웹 페이지를 요청하고, 웹 페이지를 응답으로 받게 된다.

 

 

웹 서버(Web Server)

 

1. Web Server

웹 브라우저의 요청을 받아 HTTP를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)를 전송해주는 서버

예) Apache HTTP Server, Microsoft Internet Information Service, Google Web Server 등

 

2. Web Server가 필요한 이유

웹 서버에서는 정적 컨텐츠만 처리하도록 기능 분배를 해서 서버 부담을 줄인다.
이미지 파일과 같은 정적인 파일들은 웹 문서(HTML 문서)가 클라이언트로 보내질 때 함께 가는 것이 아니라 HTML 문서를 먼저 받고 필요한 이미지 파일들을 다시 서버로 요청하여 이미지 파일을 받아온다.
Web Server를 통해 정적인 파일들을 Application Server까지 가지 않고 앞단에서 빠르게 보내줄 수 있다. 따라서 Web Server에서는 정적 컨텐츠만 처리하도록 기능을 분배하여 서버의 부담을 줄일 수 있다.

 

3. Web Server의 기능

*정적 컨텐츠 제공 : WAS를 거치지 않고 바로 자원 제공
*동적 컨텐츠 제공을 위한 요청 전달 : 클라이언트 요청을 WAS에 보내고, WAS에서 처리한 결과를 클라이언트에게 전달

 

 

웹 애플리케이션 서버(Web Application Server, WAS)

 

1. WAS

사용자에게 동적 서비스를 제공하기 위해 웹 서버로부터 요청을 받아 데이터 처리를 수행하거나, 웹 서버와 데이터베이스 서버 또는 웹 서버와 파일 서버 사이에서 인터페이스 역할을 수행하는 서버

예) Oracle WebLogic, Apache Tomcat, IBM WebSphere, JEUS 등

 

2. WAS가 필요한 이유

WAS를 통해 요청에 맞는 데이터를 DB에서 가져와 비즈니스 로직에 맞게 그때마다 결과를 만들고 제공하면서 자원을 효율적으로 사용할 수 있다. 동적인 컨텐츠를 제공해야 할때. 웹 서버만으로는 사용자가 원하는 요청에 대한 결과값을 모두 미리 만들어놓고 서비스하기에는 자원이 절대적으로 부족함 따라서 WAS를 통해 요청이 들어올 때마다 DB와 비즈니스 로직을 통해 결과물을 만들어 제공하게 되는 것이다.
이 때 WAS는 DB 조회, 다양한 로직을 처리하는 데 집중해야 하므로 단순한 정적 컨텐츠는 웹 서버에게 맡기며 기능을 분리시켜 서버 부하를 방지하게 된다. 만약 WAS가 정적 컨텐츠 요청까지 처리하면, 부하가 커지고 동적 컨텐츠 처리가 지연되면서 수행 속도가 느려지면서 페이지 노출 시간 늘어나는 문제 발생한다. 
또한, 여러 대의 WAS를 연결지어 사용이 가능하다. 웹 서버를 앞 단에 두고, WAS에 오류가 발생하면 사용자가 이용하지 못하게 막아둔 뒤 재시작하여 해결할 수 있다. (사용자는 오류를 느끼지 못하고 이용 가능)

3. WAS의 기능

*WAS = 웹 서버 + 웹 컨테이너
*웹 서버의 기능들을 구조적으로 분리하여 처리하는 역할
*보안, 스레드 처리, 분산 트랜잭션 등 분산 환경에서 사용됨 ( 주로 DB 서버와 함께 사용 )
*프로그램 실행 환경 및 DB 접속 기능 제공
*업무 처리하는 비즈니스 로직 수행
*동적인 페이지를 생성할 수 있는 서버 

 

 

Java EE

 

Java EE 플랫폼은 Java SE 플랫폼 위에 구축된다. Java EE 플랫폼은 대규모, 다계층, 확장 가능하고 안정적이며 안전한 네트워크 애플리케이션을 개발하고 실행하기 위한 API 및 런타임 환경을 제공한다. WEB개발을 하기 위해서  JavaEE로 개발을 진행한다. 이는 Servlet과 JSON, REST 반응형 클라이언트 API, 웹소켓 등을 지원하기 때문이다.

 

 

HTTP Request

 

*HTTP의 요청 / 응답 데이터의 구성 요소

구성 요소	요청 데이터	응답 데이터
요청/응답 줄	GET이나 POST와 같은 HTTP 요청 방식(method)과 요청하는 자원의 경로를 지정한다.	요청에 대해 200이나 404같은 응답 코드를 전송한다. 참고로 200은 요청을 정상적으로 처리했음을 의미한다.
헤더	서버가 응답을 생성하는데 참조할 수 있는 정보를 전송한다. 예를 들어, 브라우저의 종류나 언어 등의 정보를 보낸다.	응답에 대한 정보를 전송한다. 응답의 몸체가 어떤 데이터인지, 길이는 어떻게 되는지 등에 대한 정보를 담는다.
몸체	정보를 전송해야 할 때 사용한다. 예를 들어, 파일 업로드와 같은 기능을 사용하면 몸체 영역에 파일을 담아 웹 서버에 전송한다.	웹 브라우저가 요청한 자원의 내용을 담는다. HTML 문서나 이미지 파일 데이터 등이 몸체 영역을 이용해서 전달된다.

 

*HTTP 상태 코드

1xx (정보)	요청을 받았으며 프로세스를 계속한다.
2xx (성공)	요청을 성공적으로 받았으며 인식했고 수용하였다.
3xx (리다이렉션)	요청 완료를 위해 추가 작업 조치가 필요하다.
4xx (클라이언트 오류)	요청의 문법이 잘못되었거나 요청을 처리할 수 없다.
5xx (서버 오류)	서버가 명백히 유효한 요청에 대해 충족을 실패했다.

 

 

 

JSP

 

JSP 란 JavaServer Pages 의 약자이며 HTML 코드에 JAVA 코드를 넣어 동적웹페이지를 생성하는 웹어플리케이션 도구이다.

JSP 가 실행되면 자바 서블릿(Servlet) 으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고

그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다.

 

 

 

JSP 기본 문법

 

문법명	형식	설명
주석문	<%--  --%>	1줄 주석문은 없다.  html주석문 ( <!--  --> )도 사용가능하다.
page 지시문	<%@    %>	인코딩 클래스 가져 오기, 세션 관리 등 JSP 프로그램 전체의 동작에 관한 정의한다. 예) <@ page 속성 명 = "속성 값"속성 명 = "속성 값"... %>
선언부	<%!      %>	전역변수, class, function를 선언하는 영역이다. 변수, 메소드 선언시 반드시; (세미콜론)가 필요하다. 선언에서 선언 된 변수, 메소드는 처음 요청이있을 때 한 번만 호출된다.  따라서 계속되는 요구에도 변수의 값은 초기화되지 않고, JSP 컨테이너 (Tomcat 등)를 다시 시작할 때까지 값이 유지된다. 위치는 관계없지만 대부분 문서 윗쪽에 작성한다.
scriptlet	<%       %>	실제 코드들이 들어가있는 부분이다.( == 코드부) 스크립틀릿은 JSP 태그에서는 표현할 수없는 작업을 Java 코드를 작성하고 자유로운 작업을 수행하는 경우에 사용한다.  Java 코드를위한 각 코드에는 반드시; (세미콜론)가 필요하다. scriptlet에서 선언 된 변수는 요청 때마다 호출된다.  따라서 그 요청이 있을 때마다 변수의 값이 초기화된다.
표현식	<%=     %>	Java 코드를 작성하고 그 결과를 표시한다. (html문서에 출력될 내용 변수값이 출력) 따라서 실행 결과를 반환 코드 밖에 기술할 수는 없다.  표현식에서는 ; (세미콜론)을 작성하지 않는다.

 

 

Postman

 

포스트맨(Postman)은 개발자들이 API를 디자인하고 빌드하고 테스트하고 반복하기 위한 API 플랫폼이다.

 

https://www.postman.com/downloads/

Download Postman | Get Started for Free

 

 

키워드

 

web static server

web dynamic server - Server-side Rendering

- Web Application Server / Servlet Container

 

HTTP Request

- Request URL

- Request Header

- Request Method

- Request Parameter

 

HTTP Response

- Response Header

- Response Status Code

 

<form> 입력양식 내부의 submit 버튼을 눌렀을 때?

 

Java EE / Jarkarta EE

 

WAR 

 

jsp

scriptlet <% %>

expression <%= %>