Notice
Recent Posts
Recent Comments
Link
혜야의 코딩스토리
[HTML&CSS] 스타벅스 제주 홈페이지 ☕ - 회원 가입 본문
오늘은 JSP도 살짝 배워서 응용해봤다.
<form> <input> 태그들도 배워서 활용했다 ㅋㅋ
하단에 저 <aside>를 광고의미로 우측에 두고 싶었는데 안돼서 포기했다....
=> (내일 맑은 정신으로 다시 도전해 볼 것ㅋㅋ)
아 그리고 음료 선택하는 checkbox를 선택할 때 갯수 제한을 걸고 싶은데
어떻게 하는 걸까? (구글링해보니 자바스크립트 얘기길래 넘겼음....내일 다시 찾아봐야지)
+그리고 저번에 만든 스타벅스 메뉴소개 웹페이지도 그 후에 배운 내용들을
응용해서 업그레이드 할 예정이다. 개인 프로젝트에 참고해야지 😎
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Starbucks JeJu</title>
<style type="text/css">
* {
font-family: 'Malgun Gothic';
}
a:hover {
text-decoration: none;
color: #00592D;
}
.topmenu {
margin: 0px 5px 0px 550px;
font-size: 12px;
}
.top {
display: inline-block;
list-style: none;
padding: 10px;
}
.centermenu {
font-size: 16px;
}
.menu {
display: inline-block;
list-style: none;
padding: 20px;
}
header {
background: #f6f5ef;
width: auto;
height: auto;
padding: 10px;
text-align: center;
}
.join1 {
margin: auto;
padding: auto;
width: 500px;
height: 300px;
text-align: center;
background: #f6f5ef;
}
.join2 {
margin: auto;
width: 500px;
height: 1000px;
text-align: center;
background: #f6f5ef;
}
.ad {
margin: auto;
width: 500px;
text-align: center;
}
footer {
background-color: #2C2A29;
margin: 50px 0px 0px 0px;
padding: 50px 0;
color:#999;
font-size: 12px;
text-align: center;
clear: both;
}
</style>
</head>
<body>
<div>
<header>
<nav class="topmenu">
<ul>
<li class="top"><a href="#">Sign in</a></li>
<li class="top"><a href="#">My Starbucks</a></li>
<li class="top"><a href="#">Customer Service&ideas</a></li>
<li class="top"><a href="#">Find a Store</a></li>
<li class="top"><input type="search" placeholder="통합검색"></li>
<li class="top"><input type="button" value="🔍"></li>
</ul>
</nav>
<nav class="centermenu">
<a href="#"><img src="https://t1.daumcdn.net/cfile/tistory/99857F4F5E738F472F" width="120px"> </a>
</nav>
<nav>
<ul>
<li class="menu"><a href="#">COFFEE</a></li>
<li class="menu"><a href="#">MENU</a></li>
<li class="menu"><a href="#">STORE</a></li>
<li class="menu"><a href="#">RESPONSIBILITY</a></li>
<li class="menu"><a href="#">STARBUCKS REWARDS</a></li>
<li class="menu"><a href="#">WHAT'S NEW</a></li>
</ul>
</nav>
</header>
</div>
<div class="join1">
<h3>회원가입</h3>
<a href="#"><img src="https://image.istarbucks.co.kr/common/img/main/rewards-logo.png" width="190px" height="180px"> </a>
<h4>스타벅스 회원이 되어 리워드⭐ 혜택을 즐기세요.</h4>
</div>
<div class="join2">
<section class="section1">
<form method="post" action="join_starbucks.jsp">
아이디<br>
<input type="text" name="id"><br>
<input type="button" value="중복확인"><br><br>
비밀번호<br>
<input type="password" name="pw"> <br><br>
비밀번호 재확인<br>
<input type="password" name="pw_check"> <br><br>
이름<br>
<input type="text" name="name"> <br><br>
생년월일<br>
<input type="date" name="date"> <br><br>
성별<br>
<input type="radio" name="gender" value="male">남성
<input type="radio" name="gender" value="female">여성
<input type="radio" name="gender" value="not_selected">선택안함 <br><br>
휴대전화<br>
<input type="tel" name="tel" pattern="(010)-\d(4)-\d(4)" placeholder="010-0000-0000"><br><br><br>
본인 확인 이메일<br>
<input type="email" name="email" placeholder="abcd@gmail.com"><br><br><br><br>
💚스타벅스 제주만의 특별 이벤트💚<br><br><br>
*원하는 제주only 음료 2개를 선택하세요.<br>
회원가입 후 해당 음료의 ☕Free쿠폰을 드립니다.<br>
(스타벅스App-쿠폰 히스토리 확인)<br><br>
<input type="checkbox" name="coupon" value="제주 비자림 콜드브루">제주 비자림 콜드브루<br>
<input type="checkbox" name="coupon" value="제주 까망 크림 프라푸치노">제주 까망 크림 프라푸치노<br>
<input type="checkbox" name="coupon" value="제주 쑥떡 크림 프라푸치노">제주 쑥떡 크림 프라푸치노<br>
<input type="checkbox" name="coupon" value="제주 그린 한라봉 모히또 블렌디드">제주 그린 한라봉 모히또 블렌디드<br>
<input type="checkbox" name="coupon" value="제주 키위 오션 그린티">제주 키위 오션 그린티<br>
<input type="checkbox" name="coupon" value="제주 까망 라떼">제주 까망 라떼<br>
<input type="checkbox" name="coupon" value="제주 쑥쑥 라떼">제주 쑥쑥 라떼<br><br>
<input type="submit" value="가입하기"><br><br>
</form>
</section>
</div>
<div class="ad">
<section class="secetion2">
<aside>
<span><h4>🌊제주관광 사이트🌊</h4></span>
<span><a href="https://www.visitjeju.net/kr"><img src="https://png.pngtree.com/element_our/png_detail/20181221/illustrations-of-scenic-spots-on-the-map-of-jeju-island-png_296182.jpg" width="100"> </a></span>
<span><h4>🌷제주 카름스테이🌷</h4></span>
<span><a href="https://www.kareumstay.com/"><img src="https://static.wixstatic.com/media/58623f_3ccf3988d18146ee9ebd4b7a0a9192af~mv2.png/v1/fill/w_93,h_67,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/logo_webp.png"> </a></span>
</aside>
</section>
<br>
<p><em>잔잔한 파도소리🎵</em></p>
<audio autoplay controls>
<source src="../audio/wave.mp3" tyoe="audio/mpeg">
브라우저에서 오디오 파일을 지원하지 않습니다.
</audio>
</div>
<div>
<footer>
<span>사업자등록 번호 : 201-81-21515</span>
<span>주식회사 에스씨케이컴퍼니 대표이사 : 혜야킴</span>
<span>TEL : 1522-3232</span>
<span>개인정보 책임자 : 김지혜</span>
<p style="margin:10px 0;">© 2022 Starbucks Coffee Company. All Rights
Reserved.</p>
</footer>
</div>
</body>
</html>jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>join_starbucks</title>
<style type="text/css">
* {
font-family: 'Malgun Gothic';
}
.join_check {
margin: auto;
padding: auto;
width: 500px;
height: 700px;
text-align: center;
background: #f6f5ef;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String pw_check = request.getParameter("pw_check");
String name = request.getParameter("name");
String date = request.getParameter("date");
String gender = request.getParameter("gender");
gender = gender.equals("female")? "여성" : (gender.equals("male")? "남성" : "선택안함");
String tel = request.getParameter("tel");
String email = request.getParameter("email");
String[] coupon = request.getParameterValues("coupon");
//if(coupon !=null) {
// for(int i=0; i<coupon.length;i++){
// out.println(coupon[i]+"<br>");
// }
//}else {
/// out.println("음료를 선택하세요.");
//}
%>
<div class="join_check">
<div>
<img src="https://cdnweb01.wikitree.co.kr/webdata/editor/202008/11/img_20200811174012_5a17ae88.webp" width="300">
</div>
<h3>가입정보를 확인하세요.</h3>
<ul style="list-style: none">
<li>아이디 : <%= id %></li>
<li>비밀번호 : <%= pw %></li>
<li>비밀번호 재확인 : <%= pw_check %></li>
<li>이름 : <%= name %></li>
<li>생년월일 : <%= date %></li>
<li>성별 : <%= gender %></li>
<li>휴대전화 : <%= tel %></li>
<li>이메일 : <%= email %></li>
</ul>
<p> 💚스타벅스 제주만의 특별 이벤트💚<br>
*선택한 제주only 음료☕ 2개를 확인하세요.<br>
<%
if(coupon !=null) {
for(int i=0; i<coupon.length;i++){
out.println(coupon[i]+"<br>");
}
}else {
out.println("음료를 선택하세요.");
}
%>
<p><input type="button" value="가입하기">
<input type="button" value="다시입력"></p>
</div>
</body>
</html>'꿈 : 멋진 개발자 🧸 > HTML & CSS' 카테고리의 다른 글
| [HTML&CSS] 스타벅스 제주 홈페이지 만들기 (0) | 2022.06.21 |
|---|---|
| [HTML&CSS] 맥모닝 웹 페이지 만들기 🍔🍟🥤 (0) | 2022.06.10 |
| [HTML&CSS] 나만의 웹 페이지 만들기 1☕ - 메뉴 소개 (0) | 2022.06.08 |
| [HTML&CSS] 카페 메뉴판 ☕ (0) | 2022.06.07 |
'꿈 : 멋진 개발자 🧸/HTML & CSS' Related Articles
more
