soozya
[FRONT] 로그인 화면 구현하기 본문
[👩🏻💻소스코드]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="/Zspace/css/bootstrap.min.css" rel="stylesheet">
<link href="/Zspace/css/tool.css" rel="stylesheet">
<link href="/Zspace/css/asj.css" rel="stylesheet">
<title>::로그인::</title>
<style>
#log_id input{
background-image:url("/Zspace/icon/id.png");
background-position:1px center;
background-size:16px;
background-repeat:no-repeat;
}
#log_pwd input{
background-image:url("/Zspace/icon/pwd.png");
background-position: 1px center;
background-size:16px;
background-repeat:no-repeat
}
</style>
</head>
<body>
<jsp:include page="../sideBar.jsp" />
<!-- 메인 -->
<div id="contents"> <!-- 전체 레이아웃을 감싸기 -->
<div class="main">
<form method="post" id="logfm" action="/Zspace/login.do">
<table id="login_tb" align="center">
<tr>
<td colspan="2" align="center" height="180px">
<img src="/Zspace/icon/login.png" width="70px" vspace="10"><p>
<font size="4"><b>로그인</b></font>
</td>
</tr>
<tr id="log_id"> <!-- 아이디 -->
<td height="35px" width="300px" align="right">
<input type="text" id="mem_id" name="mem_id" placeholder="아이디">
</td>
<td rowspan="2" width="200px" align="left">
<button id="logbtn">로그인</button>
</td>
</tr>
<tr id="log_pwd"> <!-- 비밀번호 -->
<td height="35px" width="300px" align="right">
<input type="password" id="mem_pwd" name="mem_pwd" placeholder="비밀번호">
</td>
</tr>
<tr id="find" >
<td colspan="2" align="center" height="50px">
<a id="login_a" href="id_find.jsp">아이디 찾기</a> |
<a id="login_a" href="pwd_find.jsp">비밀번호 찾기</a> |
<a id="login_a" href="mem_join.jsp">회원가입 </a>
<td>
</tr>
</table>
</form>
</div><!-- 메인 -->
</div><!-- contents -->
<jsp:include page="../footer.jsp" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/Zspace/js/bootstrap.min.js"></script>
</body>
</html>
[💬설명]
1️⃣ 로그인 input 박스 구현
◾ 로그인 페이지를 맡으면서 부터 꼭!!! 구현하고 싶었던 input 박스 내부에 아이콘 넣기!
- css파일에 <style>의 내용을 넣으면 인식을 하지 못해서 (반응이 느렸던걸까?) 빨리 빨리 결과를 봐야
했었기 때문에 jsp파일에 추가하였음. (아이콘을 저장해서 진행함)
- background-image:url("이미지 경로")
background-position:1px center = 1px 정도 띄우고, 중간 위치에 놓도록 설정
background-size:16px = 사이즈는 16px이 적당했음
background-repeat : no-repeat = 반복할 것이냐 : 안할건데~ 라는 뜻
👉🏻 repeat에 대한 내용을 설정하지 않으면 무한반복!
처음에 작은 사이즈로 설정하고, reapeat 부분 설정하지 않았다가 징그러워서 얼른 찾아봄ㅋㅋ
2️⃣ 로그인 form 구현
◾ 입력한 내용을 로그인 action 파일로 전송해 주어야 하기때문에 <form> 태그로 묶어주고 시작
- 지금 정리하면서 느낀건데 로그인 기능 하면서 <table>태그를 많이 사용했다.
- 총 4행 2열로 구현하였음
◾ 1행 : 가장 위 아이콘 포함 로그인 글자
- colspan으로 묶어 1열로 만든 후 중앙으로 오도록 배치
- '로그인' 글씨를 <font> 태그로 묶어 글씨 크기를 설정하였음
- 너무 옹졸해보이지 않게 높이를 넉넉하게 주었음
◾ 2행 : 아이디 input + rowspan으로 묶어준 로그인 버튼
- 버튼은 부트스트랩을 사용할까 하다가 원하는대로 설정하고 싶어서 css로 진행~
◾ 3행 : 비밀번호 input = 2행과 동일
◾ 4행 : 아이디/비밀번호 찾기 및 회원가입 (colspan으로 묶어 1열)
- 파이프( | )를 사용해서 글자 입력 및 페이지 링크 연결
[💻결과]
'👩🏻💻프로젝트 > 👥팀프로젝트' 카테고리의 다른 글
| [BACK] 게시판 글 쓰기, 상세보기 (0) | 2023.07.29 |
|---|---|
| [BACK] 게시판 글 목록 보기 (0) | 2023.07.20 |
| [FRONT] 관리자 페이지 (0) | 2023.04.28 |
| [FRONT] 회원정보 확인하기 (0) | 2023.04.26 |
| [FRONT] 회원가입 페이지 (0) | 2023.04.16 |
