ki-sd 님의 블로그
[2026-05-18] Servlet과 JSP의 아키텍처 비교 및 CSS Position 속성 정리 본문
오늘은 자바(Java) 코드로 웹 화면을 구성하는 서블릿(Servlet) 방식을 실습하고, 이를 개선하기 위해 등장한 JSP(JavaServer Pages)의 구조적 차이를 확인했다. 또한, 웹 페이지 요소의 배치를 제어하는 CSS position 속성의 특징을 정리했다.
1. Servlet의 동작 원리와 JSP의 특징
- 서블릿(Servlet)의 한계: EmpList.java 실습을 통해 서블릿 클래스를 작성했다. DB에서 사원 정보를 가져와 브라우저에 출력할 때, out.println("<html>...");처럼 HTML 코드를 일일이 문자열로 작성해야 하므로 화면 수정과 유지보수가 까다롭다는 점을 확인했다.
- JSP의 도입과 동작 사이클: 반면 JSP는 HTML 뼈대 안에 자바 코드를 삽입하는 방식이다. 클라이언트가 .jsp 파일을 요청하면, 톰캣(WAS)이 이를 서블릿(.java -> .class)으로 변환하여 실행한 뒤 HTML 결과물만 브라우저로 응답하는 흐름을 파악했다.
2. JSP 기본 문법 (스크립팅 요소)과 제어문
- <% %> (스크립틀릿): 일반적인 자바 로직(변수 선언, 반복문, 메서드 호출 등)이 작성되는 영역이다.
- <%= %> (표현식): 변수나 연산의 결과값을 화면에 출력할 때 사용하며, 끝에 세미콜론(;)을 붙이지 않는 특징이 있다.
- <%! %> (선언식): 멤버 변수나 메서드를 선언할 때 사용하지만, 동시성 문제와 객체 지향적 설계 원칙으로 인해 실무에서는 잘 쓰이지 않는 점을 짚고 넘어갔다.
- JSTL 도입: jsp_basic5.jsp 실습에서 <c:forEach> 태그를 사용하여, 자바의 반복문 로직을 HTML과 분리해 가독성을 높이는 방법을 실습했다.
3. 백엔드 데이터 연동: EMP/DEPT 조인(JOIN)
- EmpDAO에서 사원 테이블(EMP)과 부서 테이블(DEPT)을 조인한 결과를 EmpVO에 담아 JSP로 전달했다. 이를 통해 데이터베이스의 데이터가 Java를 거쳐 웹 화면으로 출력되는 계층 간 데이터 흐름을 확인했다.
4. CSS Position 속성을 이용한 공간 제어 문서의 기본 흐름(static)을 벗어나, 요소를 특정 위치에 배치하는 CSS 레이아웃 속성을 다루었다.
- relative (상대 위치): 원래 배치되어야 할 기준점에서 top, left 등의 좌표만큼 이동한다. 주로 absolute 요소의 기준점이 되는 부모 영역을 설정할 때 사용한다.
- absolute (절대 위치): 상위 태그 중 static이 아닌 요소(주로 relative)를 기준으로 삼아 특정 좌표에 배치된다. 문서의 기본 흐름에서 빠져나오기 때문에 다른 요소들과 공간이 겹칠 수 있다.
- fixed (고정 위치): 브라우저 창(Viewport)을 기준으로 위치가 고정되어, 스크롤을 내려도 화면의 지정된 자리에 머문다.
- z-index (레이어 깊이): 위치 속성으로 인해 요소들이 겹칠 때, 화면에 보여지는 Z축 순서를 결정한다. 숫자가 클수록 상단에 노출된다.
'WebStudy' 카테고리의 다른 글
| [2026-05-20] JSP 내장 객체 제어, 웹 페이지 모듈화 및 데이터 흐름 관리 (0) | 2026.05.21 |
|---|---|
| [2026-05-19] JSP 지시자(Directive), 내장 객체(request) 및 CSS 레이아웃 실습 (0) | 2026.05.19 |
| [2026-05-15] JSP 게시판(BBS) 완성과 완전한 CRUD 아키텍처 구현 (0) | 2026.05.15 |
| [2026-05-14] JSP 검색/목록 시스템 고도화와 CSS 가시성 및 글자 속성 심화 (0) | 2026.05.15 |
| [2026-05-13] JSP 동적 웹 페이지 구현과 카카오맵 API(Geocoder) 실전 연동 (0) | 2026.05.13 |