메이플스토리 홈페이지 로그인 화면 만들어보기

요즘 여기저기서 말이 많긴 한데… 나름 애정하는 게임이라 연습겸 로그인 페이지를 만들어보았다.

<div class="container"> <!-- 기본적으로 div.container를 통해 CSS작업이 수월하도록 했다. -->

/* 기본 CSS */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color:#8f8e91;
}
body{
    font-family: 'Noto Sans KR', sans-serif;
    background:#2f2c34;
    height:100vh;
}

1. 헤더 및 제목

맨 위 아이콘들과 메이플스토리 로고, 제목을 구현

 <header>
	<div class="icons">
		<i class="fa-solid fa-bars"></i> 
		<i class="fa-solid fa-house"></i>
	</div>
	<img src="img/MapleStory_logo.png" alt="logo">
</header>

<div class="login-container">
	<h1>메이플스토리 로그인</h1>

.container header{
    display: flex;
    justify-content: space-between; /*아이콘과 로고가 반대위치인 것을 고려*/
}
.container header img{
    width:140px;
    height:70px;
    margin-right:20px;
    margin-top:10px;
}
.container header .icons{
    color:#fff;
    font-size:30px;
    margin-top:20px;
    margin-left: 20px;
}
.container header .icons i{
    margin-left:10px;
}

2. 넥슨 이메일 ID, 메이플 ID 버튼

기존 로그인 창에도 있는 어떤 ID로 접속할지 선택하는 버튼을 만들고, JS를 활용하여 색변화를
구현

<div class="select-btn">
	<button>넥슨이메일ID</button>
	<button>메이플ID</button>
</div>

.login-container .select-btn button{
    font-size: 18px;
    border-radius:2px;
    width:270px;
    height:75px;
    background: #28252d;
    border:none;
    color:#8f8e91;
    margin-bottom: 25px;
    cursor: pointer;
}
.login-container .select-btn button:nth-child(1){
    background: #678eeb;
    color:#fff;
}

/*JS를 이용해 container 태그에 active 클래스를 추가시킬 경우*/
.container.active .select-btn button:nth-child(2){
    background: #de8a34;
    color:#fff;
}
.container.active .select-btn button:nth-child(1){
    background: #28252d;
    color:#8f8e91;
}
.container.active .login-container form button{
    background:#de8a34;
}
.container.active .login-container form input:nth-child(1)::placeholder{
}

querySelector를 활용해 각각의 변수에 HTML 노드를 받아오고, addEventListener와 함수를 활용하여 로그인 창의 화면을 변경하도록 구현

const nexonIdBtn = document.querySelector(".login-container button:nth-child(1)");
const mapleIdBtn = document.querySelector(".login-container button:nth-child(2)");
const container = document.querySelector(".container");
const userId = document.querySelector(".login-container form input:nth-child(1)");
const option = document.querySelector(".other-option");

function handleMaple() {
    container.classList.add("active"); // 클래스 추가
    userId.placeholder = "메이플ID"; // placeholder의 text 변경
}

function handleNexon() {
    container.classList.remove("active"); // 클래스 삭제
    userId.placeholder = "넥슨이메일ID";
}

nexonIdBtn.addEventListener("click", handleNexon);
mapleIdBtn.addEventListener("click", handleMaple);

3. 로그인 폼

form 태그를 활용해 ID와 Password 입력창, 로그인 버튼 구현

<form>
	<input type="text" placeholder = "넥슨이메일ID" required maxlength="15">
	<input type="password" placeholder="PW" required>
	<button type="submit">로그인</button>
</form>

.login-container form{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-container form input, button{
    width:543px;
    height: 75px;
    border-radius: 2px;
}
.login-container form input{
    padding-left: 20px;
    font-size: 20px;
    color:#fff;
    background: #1e1c22;
    border:none;
    margin-bottom:5px;
}
.login-container form input::placeholder{
    font-size:20px;
}
.login-container form button{
    background: #678eeb;
    color:#fff;
    font-size: 25px;
    border:none;
    border-radius:2px;
    margin-top:20px;
    cursor: pointer;
}

4. 그 외

회원가입, ID찾기, 비밀번호 찾기 등은 a태그를 활용하여 실제 페이지로 넘어가도록 주소를 받아오고 밑부분의 나누는 부분까지 구현

<div class="other-option">
    <a href="#">회원가입</a>
	<div class="cut">|</div>
	<a href="#">넥슨ID 찾기</a>
	<div class="cut">|</div>
	<a href="#">비밀번호 찾기</a>
</div>
<div class="or">
	<div class="line"></div>
	<p>또는</p>
	<div class="line"></div>
</div>

.container .other-option{
    display:flex;
    color: #8f8e91;
    margin-top:20px;
    gap:50px;
}
.container .or{
    margin-top:20px;
    display:flex;
    align-items: center;
    gap:20px;
    color:#8f8e91;
}
.container .or .line{
    width:240px;
    height:1px;
    background: #8f8e91;
}

간단한 작업 중 하나이고 완벽하게 같진 않지만 흥미를 잃지 않게 도와주는 중요한 작업이었다고 생각한다. 쭉쭉 가보자😁
⬇️내가 만든 화면⬇️