[기본형 실습 과제 1] 3차시_ 화면구현

 

먼저, 전체 페이지의 뼈대는 index.jsp에서 시작됩니다. 이 파일은 웹사이트의 기본 틀 역할을 하며, 화면을 크게 header, nav, section, footer 영역으로 나누어 구성합니다.

header는 사이트의 얼굴 같은 부분입니다. 로고나 서비스 이름처럼 사용자가 처음 접하는 정보가 들어가고, 사이트의 정체성을 보여주는 역할을 합니다.
그 아래의 nav는 네비게이션 바입니다. 사용자가 다른 페이지로 이동할 수 있도록 메뉴를 제공하며, 전체 서비스의 흐름을 연결해주는 길잡이 역할을 합니다.

가장 중요한 영역은 section입니다. 실제 콘텐츠가 출력되는 곳으로, 사용자의 행동에 따라 다양한 JSP 페이지가 이 영역에 보여지게 됩니다.
예를 들어,

• MAIN.jsp는 홈 화면,
• REG.jsp는 회원 등록,
• LIST.jsp는 목록 조회,
• ACTION.jsp는 데이터 처리(DB 작업)
  와 같이 각각의 기능을 담당하는 페이지들이 section 안에서 동적으로 바뀌며 보여집니다.

그리고 페이지 맨 아래의 footer는 저작권 정보나 연락처 등 부가적인 정보를 담는 영역입니다. 사용자가 사이트를 신뢰할 수 있도록 마무리 정보를 제공하는 역할을 합니다.

또한 이 구조에서 중요한 점은 역할 분리입니다.
오른쪽에 보이는 것처럼

• style.jsp는 디자인(CSS)을 담당하고,
• DBPKG는 데이터베이스 연결 및 처리 로직을 담당합니다.

즉, 화면(디자인)과 기능(DB 처리)을 분리하여 관리함으로써 유지보수와 확장성을 높이는 구조입니다.

정리하면,
👉 index.jsp는 전체 틀을 잡고
👉 section에서 기능별 JSP가 바뀌며 동작하고
👉 style.jsp와 DBPKG는 각각 디자인과 데이터 처리를 담당하는 구조입니다.

---

문제요구사항

---

1.   웹페이지를 만들기 위해 [New] → [jsp File]

 

2. 파일이름을 웹 시작 페이지인 'index.jsp'로 입력

 

** 페이지구분: 페이지 용도에 맞게 이름을 고정적으로 생성하면 작업속도가 빨라집니다!!

	이름		용도	사용
1	index.jsp		시작페이지	V
2	style.css		스타일시트	V
3	main.jsp		메인(홈)	V
4	reg.jsp		등록	V
5	action.jsp		데이터베이스 처리	V
6	list.jsp	기본	조회(현황) 부가 기능에 따라 단어 추가 예) join + group by = list_jg.jsp	V
		join		V
		group by
		order by
		where
7	search.jsp		검색	V
8	DBPKG(Util.java)		데이터베이스 연결	V

 

3. 필요한 페이지들을 다 만들어봅니다

 

---