From 8ffffd0fa3524f30916efa0803c41551a1e5dce8 Mon Sep 17 00:00:00 2001 From: SeoJin Kim Date: Sun, 12 Dec 2021 02:42:33 +0900 Subject: [PATCH] =?UTF-8?q?[Spring][=EC=87=BC=ED=95=91=EB=AA=B0=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8][41]=20=EC=A3=BC=EB=AC=B8?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84(=EC=A3=BC=EB=AC=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80)=20-=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://kimvampa.tistory.com/274 --- VamPa/src/main/webapp/WEB-INF/views/order.jsp | 289 ++++++++++++- VamPa/src/main/webapp/resources/css/order.css | 407 ++++++++++++++++++ .../src/main/webapp/WEB-INF/views/order.jsp | 289 ++++++++++++- .../src/main/webapp/resources/css/order.css | 407 ++++++++++++++++++ 4 files changed, 1378 insertions(+), 14 deletions(-) create mode 100644 VamPa/src/main/webapp/resources/css/order.css create mode 100644 VamPa_MySQL/src/main/webapp/resources/css/order.css diff --git a/VamPa/src/main/webapp/WEB-INF/views/order.jsp b/VamPa/src/main/webapp/WEB-INF/views/order.jsp index e859607..7cd4cfe 100644 --- a/VamPa/src/main/webapp/WEB-INF/views/order.jsp +++ b/VamPa/src/main/webapp/WEB-INF/views/order.jsp @@ -1,17 +1,292 @@ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> + <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> + <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> -Insert title here +Welcome BookMall + + + + -
- ${orderList} -
-
- ${memberInfo} -
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+ + "> + +
+
+
+
+ +
+
+
+ +
장바구니
+ +
+ +
+ + + + + + + +
주문자${memberInfo.memberName} | ${memberInfo.memberMail}
+
+ + +
+
+ + +
+
+
+ + + + + + + + + + + + + + + +
이름 + ${memberInfo.memberName} +
주소 + ${memberInfo.memberAddr1} ${memberInfo.memberAddr2}
${memberInfo.memberAddr3} +
+
+
+ + + + + + + + + + + + + + + +
이름 + +
주소 + + 주소 찾기
+
+ +
+
+
+
+ + + + + +
+ +
+ + +
+
+
    +
  • 회사소개
    • + | +
  • 이용약관
    • + | +
  • 고객센터
    • + | +
  • 광고문의
    • + | +
  • 채용정보
    • + | +
+
+
+ +
+
+ +
+ +
+
+ (주) VamBook 대표이사 : OOO +
+ 사업자등록번호 : ooo-oo-ooooo +
+ 대표전화 : oooo-oooo(발신자 부담전화) +
+
+ COPYRIGHT(C) kimvampa.tistory.com ALL RIGHTS RESERVED. +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/VamPa/src/main/webapp/resources/css/order.css b/VamPa/src/main/webapp/resources/css/order.css new file mode 100644 index 0000000..59b4e4f --- /dev/null +++ b/VamPa/src/main/webapp/resources/css/order.css @@ -0,0 +1,407 @@ +@charset "UTF-8"; +*{ + margin: 0; + padding:0; +} +a{ + text-decoration: none; +} +/* 화면 전체 렙 */ +.wrapper{ + width: 100%; +} +/* content 랩 */ +.wrap{ + width : 1080px; + margin: auto; +} +/* 홈페이지 기능 네비 */ +.top_gnb_area{ + width: 100%; + height: 50px; + background-color: #f0f0f1; + position:relative; +} +.top_gnb_area .list{ + position: absolute; + top: 0px; + right: 0; + +} +.top_gnb_area .list li{ + list-style: none; + float : left; + padding: 13px 15px 0 10px; + font-weight: 900; + cursor: pointer; +} +/* 로고, 검색, 로그인 */ +.top_area{ + width: 100%; + height: 150px; + /* background-color: #f7f0b9; */ +} +/* 로고 영역 */ +.logo_area{ + width: 25%; + height: 100%; + float:left; +} +.logo_area img{ + width: 100%; + height: 100%; +} + +/* 검색 박스 영역 */ +.search_area{ + width: 50%; + height: 100%; + float:left; +} +.search_wrap{ + width: 100%; + height: 100%; +} +#searchForm{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.search_input{ + display: flex; + height: 30%; + width: 80%; +} +.search_input select{ + width: 20%; + text-align: center; + font-size: 15px; +} +.search_input input{ + margin-left: 10px; + width: 57%; + font-size: 18px; + padding-left: 2%; +} +.search_btn{ + margin-left: 10px; + width: 17%; + border-radius: 14px; + font-size: 17px; + font-weight: 600; +} + + +/* 로그인 버튼 영역 */ +.login_area{ + width: 25%; + height: 100%; + display: inline-block; + text-align: center; +} +.login_button{ + height: 50%; + background-color: #D4DFE6; + margin-top: 30px; + line-height: 77px; + font-size: 40px; + font-weight: 900; + border-radius: 10px; + cursor: pointer; +} +.login_area>span{ + margin-top: 10px; + font-weight: 900; + display: inline-block; +} +.login_button{ + height : 50%; + background-color: #D4DFE6; + margin-top:30px; +} + +/* 제품 목록 네비 */ +.navi_bar_area{ + width: 100%; + height: 70px; + background-color: #7696fd; +} + +/* 홈페이지 메인 제품 목록 */ +.content_area{ + width: 100%; + min-height: 1000px; +} + table{ + border-collapse: collapse; + width: 100%; + } + .table_text_align_center{ + text-align: center; + } + caption{ + visibility: hidden; + width: 0; + height: 0; + font-size: 0; + line-height: 0; + overflow: hidden; + } + + .content_subject{ + height: 110px; + line-height: 110px; + background-color: #5080bd; + margin-bottom: 60px; + + } + .content_subject span{ + padding-left: 30 px; + display: inline-block; + color: white; + font-size: 50px; + font-weight: bolder; + } + +/* content_main */ + .content_main{ + min-height: 700px; + padding-right: 350px; + position: relative; + } + table{ + border-collapse: collapse; + } + + /* 사용자 정보 */ + .memberInfo_table{ + width: 100%; + border-spacing: 0; + border-top: 2px solid #363636; + border-bottom: 1px solid #b6b6b6; + } + .member_info_div td{ + padding : 12px; + text-align: left; + } + + + /* 사용자 주소 정보 */ + .addressInfo_div{ + margin-top: 30px; + } + .addressInfo_input_div_wrap{ + border-bottom: 1px solid #f3f3f3; + height: 225px; + } +.address_btn { + background-color: #555; + color: white; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + font-size: 17px; + width: 50%; +} + +.address_btn:hover{ + background-color: #777; +} +.addressInfo_button_div::after{ + content:''; + display:block; + clear:both; +} + .addressInfo_input_div{ + padding:12px; + text-align: left; + display: none; + line-height: 40px; + } + .addressInfo_input_div th{ + border-color: transparent; + background-color: transparent; + } + .addressInfo_input_div th{ + padding : 12px 5px 12px 20px; + vertical-align: top; + } + .addressInfo_input_div td{ + padding : 8px 12px; + } + .addressInfo_input_div_2 input{ + padding: 6px 5px; + } +.address_search_btn{ + vertical-align: middle; + display: inline-block; + border: 1px solid #aaa; + width: 90px; + text-align: center; + height: 30px; + line-height: 30px; + color: #555; + cursor: pointer; +} + + + + +/* 로그인 성공 영역 */ +.login_success_area{ + height: 62%; + width: 80%; + border: 2px solid #7474ad; + border-radius: 15px; + margin: 5% auto; + padding-top: 5%; +} +.login_success_area>a{ + font-size: 15px; + font-weight: 900; + display: inline-block; + margin-top: 5px; + background: #e1e5e8; + width: 82px; + height: 22px; + line-height: 22px; + border-radius: 25px; + color: #606267; +} +.login_success_area>span{ + display : block; + text-align: left; + margin-left: 10%; +} + +/* 검색결과 없음 */ +.table_empty{ + height: 50px; + text-align: center; + margin: 200px 0 215px 0px; + font-size: 25px; +} + +/* 필터정보 */ +.search_filter { + width: 85%; + margin: auto; + margin-top: 30px; + margin-bottom: 50px; +} +.filter_button_wrap { + width: 100%; +} + +.filter_button_wrap button { + width: 50%; +} +.filter_button{ + background-color: #04AA6D; + border: 1px solid green; + color: white; + padding: 10px 24px; + cursor: pointer; + float: left; +} +.filter_button_wrap:after { + content: ""; + clear: both; + display: table; +} +.filter_button_wrap button:not(:last-child) { + border-right: none; +} +.filter_button:hover { + background-color: #3e8e41; +} +.filter_active{ + background-color: #045d3c; +} +.filter_content{ + padding:20px 50px 20px 50px; + border: 1px solid gray; +} +.filter_content a:not(:first-child){ + margin-left: 10px; +} +.filter_a{ + display: block; +} + +.filter_b{ + display: none; +} + + + +/* footer navai 영역 */ +.footer_nav{ + width:100%; + height:50px; +} +.footer_nav_container{ + width: 100%; + height: 100%; + background-color:#8EC0E4; +} +.footer_nav_container>ul{ + font-weight : bold; + float:left; + list-style:none; + position:relative; + padding-top:10px; + line-height: 27px; + font-family: dotum; + margin-left: 10px; +} +.footer_nav_container>ul>li{ + display:inline; + width: 45px; + height: 19px; + padding: 10px 9px 0 10px; +} +.footer_nav_container>ul>span{ + margin: 0 4px; +} +/* footer 영역 */ +.footer{ + width:100%; + height:130px; + background-color:#D4DFE6; + padding-bottom : 50px; +} +.footer_container{ + width: 100%; + height: 100%; + margin: auto; +} +.footer_left>img { + width: 150%; + height: 130px; + margin-left: -20px; + margin-top: -12px; +} +.footer_left{ + float :left; + width: 170px; + margin-left: 20px; + margin-top : 30px; + +} +.footer_right{ + float :left; + width: 680px; + margin-left: 70px; + margin-top : 30px; +} + + +/* float 속성 해제 */ +.clearfix{ + clear: both; +} \ No newline at end of file diff --git a/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp b/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp index e859607..7cd4cfe 100644 --- a/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp +++ b/VamPa_MySQL/src/main/webapp/WEB-INF/views/order.jsp @@ -1,17 +1,292 @@ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> + <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> + <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> -Insert title here +Welcome BookMall + + + + -
- ${orderList} -
-
- ${memberInfo} -
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+ + "> + +
+
+
+
+ +
+
+
+ +
장바구니
+ +
+ +
+ + + + + + + +
주문자${memberInfo.memberName} | ${memberInfo.memberMail}
+
+ + +
+
+ + +
+
+
+ + + + + + + + + + + + + + + +
이름 + ${memberInfo.memberName} +
주소 + ${memberInfo.memberAddr1} ${memberInfo.memberAddr2}
${memberInfo.memberAddr3} +
+
+
+ + + + + + + + + + + + + + + +
이름 + +
주소 + + 주소 찾기
+
+ +
+
+
+
+ + + + + +
+ +
+ + +
+
+
    +
  • 회사소개
    • + | +
  • 이용약관
    • + | +
  • 고객센터
    • + | +
  • 광고문의
    • + | +
  • 채용정보
    • + | +
+
+
+ +
+
+ +
+ +
+
+ (주) VamBook 대표이사 : OOO +
+ 사업자등록번호 : ooo-oo-ooooo +
+ 대표전화 : oooo-oooo(발신자 부담전화) +
+
+ COPYRIGHT(C) kimvampa.tistory.com ALL RIGHTS RESERVED. +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/VamPa_MySQL/src/main/webapp/resources/css/order.css b/VamPa_MySQL/src/main/webapp/resources/css/order.css new file mode 100644 index 0000000..59b4e4f --- /dev/null +++ b/VamPa_MySQL/src/main/webapp/resources/css/order.css @@ -0,0 +1,407 @@ +@charset "UTF-8"; +*{ + margin: 0; + padding:0; +} +a{ + text-decoration: none; +} +/* 화면 전체 렙 */ +.wrapper{ + width: 100%; +} +/* content 랩 */ +.wrap{ + width : 1080px; + margin: auto; +} +/* 홈페이지 기능 네비 */ +.top_gnb_area{ + width: 100%; + height: 50px; + background-color: #f0f0f1; + position:relative; +} +.top_gnb_area .list{ + position: absolute; + top: 0px; + right: 0; + +} +.top_gnb_area .list li{ + list-style: none; + float : left; + padding: 13px 15px 0 10px; + font-weight: 900; + cursor: pointer; +} +/* 로고, 검색, 로그인 */ +.top_area{ + width: 100%; + height: 150px; + /* background-color: #f7f0b9; */ +} +/* 로고 영역 */ +.logo_area{ + width: 25%; + height: 100%; + float:left; +} +.logo_area img{ + width: 100%; + height: 100%; +} + +/* 검색 박스 영역 */ +.search_area{ + width: 50%; + height: 100%; + float:left; +} +.search_wrap{ + width: 100%; + height: 100%; +} +#searchForm{ + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.search_input{ + display: flex; + height: 30%; + width: 80%; +} +.search_input select{ + width: 20%; + text-align: center; + font-size: 15px; +} +.search_input input{ + margin-left: 10px; + width: 57%; + font-size: 18px; + padding-left: 2%; +} +.search_btn{ + margin-left: 10px; + width: 17%; + border-radius: 14px; + font-size: 17px; + font-weight: 600; +} + + +/* 로그인 버튼 영역 */ +.login_area{ + width: 25%; + height: 100%; + display: inline-block; + text-align: center; +} +.login_button{ + height: 50%; + background-color: #D4DFE6; + margin-top: 30px; + line-height: 77px; + font-size: 40px; + font-weight: 900; + border-radius: 10px; + cursor: pointer; +} +.login_area>span{ + margin-top: 10px; + font-weight: 900; + display: inline-block; +} +.login_button{ + height : 50%; + background-color: #D4DFE6; + margin-top:30px; +} + +/* 제품 목록 네비 */ +.navi_bar_area{ + width: 100%; + height: 70px; + background-color: #7696fd; +} + +/* 홈페이지 메인 제품 목록 */ +.content_area{ + width: 100%; + min-height: 1000px; +} + table{ + border-collapse: collapse; + width: 100%; + } + .table_text_align_center{ + text-align: center; + } + caption{ + visibility: hidden; + width: 0; + height: 0; + font-size: 0; + line-height: 0; + overflow: hidden; + } + + .content_subject{ + height: 110px; + line-height: 110px; + background-color: #5080bd; + margin-bottom: 60px; + + } + .content_subject span{ + padding-left: 30 px; + display: inline-block; + color: white; + font-size: 50px; + font-weight: bolder; + } + +/* content_main */ + .content_main{ + min-height: 700px; + padding-right: 350px; + position: relative; + } + table{ + border-collapse: collapse; + } + + /* 사용자 정보 */ + .memberInfo_table{ + width: 100%; + border-spacing: 0; + border-top: 2px solid #363636; + border-bottom: 1px solid #b6b6b6; + } + .member_info_div td{ + padding : 12px; + text-align: left; + } + + + /* 사용자 주소 정보 */ + .addressInfo_div{ + margin-top: 30px; + } + .addressInfo_input_div_wrap{ + border-bottom: 1px solid #f3f3f3; + height: 225px; + } +.address_btn { + background-color: #555; + color: white; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + font-size: 17px; + width: 50%; +} + +.address_btn:hover{ + background-color: #777; +} +.addressInfo_button_div::after{ + content:''; + display:block; + clear:both; +} + .addressInfo_input_div{ + padding:12px; + text-align: left; + display: none; + line-height: 40px; + } + .addressInfo_input_div th{ + border-color: transparent; + background-color: transparent; + } + .addressInfo_input_div th{ + padding : 12px 5px 12px 20px; + vertical-align: top; + } + .addressInfo_input_div td{ + padding : 8px 12px; + } + .addressInfo_input_div_2 input{ + padding: 6px 5px; + } +.address_search_btn{ + vertical-align: middle; + display: inline-block; + border: 1px solid #aaa; + width: 90px; + text-align: center; + height: 30px; + line-height: 30px; + color: #555; + cursor: pointer; +} + + + + +/* 로그인 성공 영역 */ +.login_success_area{ + height: 62%; + width: 80%; + border: 2px solid #7474ad; + border-radius: 15px; + margin: 5% auto; + padding-top: 5%; +} +.login_success_area>a{ + font-size: 15px; + font-weight: 900; + display: inline-block; + margin-top: 5px; + background: #e1e5e8; + width: 82px; + height: 22px; + line-height: 22px; + border-radius: 25px; + color: #606267; +} +.login_success_area>span{ + display : block; + text-align: left; + margin-left: 10%; +} + +/* 검색결과 없음 */ +.table_empty{ + height: 50px; + text-align: center; + margin: 200px 0 215px 0px; + font-size: 25px; +} + +/* 필터정보 */ +.search_filter { + width: 85%; + margin: auto; + margin-top: 30px; + margin-bottom: 50px; +} +.filter_button_wrap { + width: 100%; +} + +.filter_button_wrap button { + width: 50%; +} +.filter_button{ + background-color: #04AA6D; + border: 1px solid green; + color: white; + padding: 10px 24px; + cursor: pointer; + float: left; +} +.filter_button_wrap:after { + content: ""; + clear: both; + display: table; +} +.filter_button_wrap button:not(:last-child) { + border-right: none; +} +.filter_button:hover { + background-color: #3e8e41; +} +.filter_active{ + background-color: #045d3c; +} +.filter_content{ + padding:20px 50px 20px 50px; + border: 1px solid gray; +} +.filter_content a:not(:first-child){ + margin-left: 10px; +} +.filter_a{ + display: block; +} + +.filter_b{ + display: none; +} + + + +/* footer navai 영역 */ +.footer_nav{ + width:100%; + height:50px; +} +.footer_nav_container{ + width: 100%; + height: 100%; + background-color:#8EC0E4; +} +.footer_nav_container>ul{ + font-weight : bold; + float:left; + list-style:none; + position:relative; + padding-top:10px; + line-height: 27px; + font-family: dotum; + margin-left: 10px; +} +.footer_nav_container>ul>li{ + display:inline; + width: 45px; + height: 19px; + padding: 10px 9px 0 10px; +} +.footer_nav_container>ul>span{ + margin: 0 4px; +} +/* footer 영역 */ +.footer{ + width:100%; + height:130px; + background-color:#D4DFE6; + padding-bottom : 50px; +} +.footer_container{ + width: 100%; + height: 100%; + margin: auto; +} +.footer_left>img { + width: 150%; + height: 130px; + margin-left: -20px; + margin-top: -12px; +} +.footer_left{ + float :left; + width: 170px; + margin-left: 20px; + margin-top : 30px; + +} +.footer_right{ + float :left; + width: 680px; + margin-left: 70px; + margin-top : 30px; +} + + +/* float 속성 해제 */ +.clearfix{ + clear: both; +} \ No newline at end of file