🌷 드롭다운 메뉴 만들기
오늘은 이전에 로그인, 로그아웃 기능 등을 구현했던 홈페이지 우측 상단에 드롭다운 메뉴를 만들어 보자. 😉
👀 코드로 살펴보기
🌼 VS Code
🌱 header.jsp
...
<%-- 우측 상단 드롭다운 메뉴 --%>
<div class="header-top-menu">
<c:choose>
<c:when test="${empty loginMember}">
<%-- 로그인 X --%>
<a href="/">메인 페이지</a> | <a href="/member/login">로그인</a>
</c:when>
<c:otherwise>
<%-- 로그인 O --%>
<label for="headerMenuToggle">
${loginMember.memberNickname} <i class="fa-solid fa-caret-down"></i>
</label>
<input type="checkbox" id="headerMenuToggle">
<div class="header-menu">
<a href="#">내정보</a>
<a href="/member/logout">로그아웃</a>
</div>
</c:otherwise>
</c:choose>
</div>
...🌱 main-style.css
...
/* 헤더 오른쪽 상단 메뉴 */
header{
position: relative;
}
.header-top-menu{
position: absolute;
right: 10px;
top: 5px;
}
.header-top-menu *{
font-size: 15px;
font-weight: bold;
}
/* 헤더 메뉴 체크 박스 */
#headerMenuToggle{display: none;}
/* 오른쪽 상단 닉네임 부분 */
label[for='headerMenuToggle']{cursor: pointer;}
label[for='headerMenuToggle']:hover{text-decoration: underline;}
/* 체크박스 다음 형제 요소 div */
#headerMenuToggle + div{display: none;}
/* 체크된 #headerMenuToggle의 다음 형제 요소 div */
#headerMenuToggle:checked + div{display: block;}
/* 닉네임 클릭 시 보이는 메뉴 */
.header-menu{
position: absolute;
width: 100px;
height: 80px;
right: 0;
margin-top: 5px;
border: 1px solid black;
}
.header-menu > a{
display: flex;
height: 50%;
justify-content: center;
align-items: center;
}
.header-menu > a:first-child{
border-bottom: 1px solid #ccc;
}
.header-menu > a:hover{
background-color: #455ba8;
color: white;
}
...🌱 login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<link rel="stylesheet" href="/resources/css/member/login.css">
<script src="https://kit.fontawesome.com/f7459b8054.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<section class="logo-area">
<a href="/">
<img src="/resources/images/logo.jpg">
</a>
</section>
<form action="/member/login" method="post">
<section class="input-box">
<input type="text" name="memberEmail" placeholder="Email" value="${cookie.saveId.value}"/>
</section>
<section class="input-box">
<input type="password" name="memberPw" placeholder="Password"/>
</section>
<button class="login-btn">Login</button>
<%-- 쿠키에 saveId가 있는 경우--%>
<c:if test="${ !empty cookie.saveId.value}">
<%-- chk 변수 생성(page scope)--%>
<c:set var="chk" value="checked"/>
</c:if>
<div class="saveId-area">
<input type="checkbox" name="saveId" id="saveId" ${chk}>
<label for="saveId"><i class="fas fa-check"></i>아이디 저장</label>
</div>
<p class="text-area">
<a href="#">회원가입</a>
|
<a href="#">ID/PW 찾기</a>
</p>
</form>
</main>
</body>
</html>🌱 login.css
* {
box-sizing: border-box;
margin : 0;
padding : 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
main {
padding: 20px 40px;
border-radius: 5px;
}
main .logo-area {
text-align: center;
margin-bottom: 30px;
}
.logo-area img{
width: 150px;
}
.input-box {
position: relative;
margin: 20px 0 40px;
width: 300px;
}
.input-box input {
border: 0;
border-bottom: 2px solid black;
display: block;
width: 100%;
padding: 15px 0;
font-size: 18px;
}
.input-box input:focus{
outline: 0;
border-bottom-color: lightblue;
}
.login-btn {
cursor: pointer;
display: inline-block;
width: 100%;
background: #455ba8;
color : white;
padding: 15px;
font-size: 18px;
border: 0;
border-radius: 5px;
}
.login-btn:focus {
outline: 0;
}
.login-btn:active {
transform: scale(0.98);
}
.saveId-area{
margin-top: 10px;
padding: 10px 0;
border-bottom: 2px solid #ccc;
display: flex;
align-items: center;
}
.saveId-area > input{
display: none;
}
#saveId+label{
display: flex;
cursor: pointer;
}
#saveId+label > i{
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 10px;
color : #ccc;
font-size: 1.05em;
}
.saveId-area > input:checked + label > i{
background-color: #455ba8;
border-color: #455ba8;
color: white !important;
}
.text-area {
margin-top: 10px;
text-align: center;
}
.text-area a{
text-decoration: none;
color: black;
margin: 0 20px;
}🌱 main.js
const loginFrm = document.getElementById("loginFrm");
const memberEmail = document.querySelector("#loginFrm input[name='memberEmail']");
const memberPw = document.querySelector("#loginFrm input[name='memberPw']");
if(loginFrm != null){
// 로그인 시도를 할 때
loginFrm.addEventListener("submit", e => {
// alert("로그인");
// form 태그 기본 이벤트 제거
// e.preventDefault();
// 이메일이 입력되지 않은 경우
if(memberEmail.value.trim().length == 0){
alert("이메일을 입력해 주세요.");
// 잘못 입력된 값(공백) 제거
memberEmail.value = "";
// 이메일 input 태그에 초점 맞춤
memberEmail.focus();
// 제출 못 하게 하기
e.preventDefault();
return;
}
// 비밀번호가 입력되지 않은 경우
if(memberPw.value.trim().length == 0){
alert("비밀번호를 입력해 주세요.");
// 잘못 입력된 값(공백) 제거
memberPw.value = "";
// 이메일 input 태그에 초점 맞춤
memberPw.focus();
// 제출 못 하게 하기
e.preventDefault();
return;
}
})
}🌼 Eclipse
🌱 MemberController.java
...
// 로그인 전용 화면 이동
@GetMapping("/login")
public String login() { // 오버로딩
return "member/login";
}
...💻 구현 화면
로그인 후 우측 상단의 닉네임을 클릭하면 하단에 드롭다운 메뉴가 나타나는 것을 볼 수 있다!
풀스택 개발자 기록집 📁