| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- JDBC
- 스프링프레임워크
- 자바스크립트
- 파이썬
- 혼공머신
- 자바 실습
- 딥러닝
- JSP
- ChatGPT
- 스프링
- 쇼핑몰홈페이지제작
- 데이터베이스
- rnn
- 깃
- 연습문제
- 데이터분석
- 상속
- 자바스크립트심화
- 디버깅
- 컴퓨터비전
- 정보처리기사실기
- 개발일기
- html/css
- JSP/Servlet
- 정보처리기사필기
- 순환신경망
- SQL
- 타입스크립트심화
- 머신러닝
- 자바
- Today
- Total
"게임 개발자"를 향한 매일의 공부일지 _ 1기
파일 업로드 6 - 상품 페이지 제작 2 : 화면 디자인을 위한 스타일 시트 정의하기 및 상품 리스트 본문
파일 업로드 6 - 상품 페이지 제작 2 : 화면 디자인을 위한 스타일 시트 정의하기 및 상품 리스트
huenuri 2024. 12. 17. 11:36이제 본격적으로 상품 페이지를 작성해 보겠다.
화면 디자인을 위한 스타일 시트 정의하기
홈페이지 설계에 있어서 전체 웹 페이지의 통일성 있게 작성하는 것은 매우 중요한 일이다. 하지만 여러 문서에서 동일한 스타일을 적용할 경우에는 매번 동일한 스타일을 설정해야 한다는 번거로움이 있다. 이때 사용하는 기술이 스타일 시트이다. 보통 CSS라고 부른다. 스타일 시트를 설정하고 적용하는 방법은 두 가지가 있다.
HTML 문서의 <HEAD> 태그를 삽입하여 스타일을 정의한 후 그 문서 내에서 스타일을 적용하여 사용하는 방법과 스타일 시트만 확장자를 css로 주어 따로 저장한 파일을 HTML 문서에 적용하는 방법이 있다.
후자의 방법은 외부에 파일 형태로 스타일 시트를 정의해 놓았기에 여러 개의 웹 페이지에 스타일 시트를 적용할 수 있다는 장점이 있어서 더욱 편리하게 전체 웹 페이지의 디자인을 통일성 있게 작성할 수 있도록 해준다.
쇼핑몰 관리자를 위한 웹 프로젝트에서 사용되는 여러 개의 JSP 파일도 일관된 화면 디자인을 제공받기 위한 스타일 시트 파일을 별도의 외부 파일로 작성해 두자. 그런 후에 이를 모든 JSP 페이지에서 포함하여 사용한다.
[직접 해보기] 스타일 시트 파일
1. 폴더 만들기
2. css 파일 만들기
3. css 파일 작성하기
상품 리스트
삼품 리스트를 출력하기 위해서는 데이터베이스에 저장된 product 테이블의 모든 정보를 조회해야 한다. 이를 위해서 product 테이블을 처리하기 위한 ProductDAO를 만들고 상품 목록에 최근 동록한 상품을 먼저 출력하는 selectAllProducts() 메서드를 만들겠다.
[직접 해보기] ProductDAO 클래스 정의하기
[직접 해보기] 상품 리스트를 위한 서블릿
1. 서블릿 클래스 만들기
클래스를 만들고 URL Mapping 패턴명도 기록한다.
2. 클래스 코드 작성하기
서블릿 클래스에서는 상품 리스트를 위해 데이터베이스에서 상품 정보 JSP 페이지에 보낸다. product 폴더의 productList.jsp 페이지에 상품 정보를 받아 출력하도록 하자. 상품 리스트를 위한 JSP 페이지에서는 상품 정보뿐 아니라 상품 등록, 수정, 삭제 페이지로 이동하도록 하자.
[직접 해보기] 상품 리스트를 위한 JSP 페이지
1. product 폴더 만들기
2. 코드 작성하기
JSP 파일을 실행하면 이런 페이지가 뜨지만, 여기서 주소창에 이처럼 입력하면 다음과 같은 완성된 페이지가 뜬다.
학습을 마치고
이렇게 해서 상품 리스트도 보이고 점점 게시판을 만드는 작업이 재미있어진다. 이젠 코드를 봐도 별로 낯설지 않고 대충 이해도 된다. 아직 모든 코드를 다 이해하지는 못하지만 대략 흘러가는 흐름을 알 수 있게 되었다.
공부를 하면 할수록 내 실력이 향상되는 것 같아 기쁘다.
'웹 개발 > JSP & Servlet' 카테고리의 다른 글
| 파일 업로드 8 - 상품 수정 페이지 제작 1 : 상품 등록과 수정을 위한 서블릿과 JSP 페이지 작성하기 (0) | 2024.12.17 |
|---|---|
| 파일 업로드 7 - 상품 등록 페이지 제작 : 상품 등록을 위한 서블릿과 JSP 페이지 만들기 (0) | 2024.12.17 |
| 파일 업로드 5 - 상품 페이지 제작 1 : 상품 정보를 저장하기 위한 VO 클래스와 데이터베이스 처리를 위한 DAO 클래스 (0) | 2024.12.17 |
| 파일 업로드 4 - 쇼핑몰 관리자 애플리케이션을 이용한 파일 업로드 실습 소개 2 : 데이터베이스 구축하기 (0) | 2024.12.17 |
| 파일 업로드 3 - 쇼핑몰 관리자 애플리케이션을 이용한 이미지 업로드 실습 소개 1 : 쇼핑몰 관리자 페이지 개요 (0) | 2024.12.17 |
