HTML 홈페이지 만들기 하면서 SQL 로그인 기능 구현하기
나중에 배울 언어에서 언더바( _ ) 가 들어가면 오류 발생 확률이 높아짐
member_no 등 을
mno 로 줄여 씀
primary key, 숫자 자동증가
mno(pk, auto) mid(10) mpw(20) mname(10) mdate(datetime) mgrade(1)
CREATE TABLE `member` (
`mno` INT NOT NULL AUTO_INCREMENT,
`mid` VARCHAR(10) NULL DEFAULT NULL,
`mpw` VARCHAR(20) NULL DEFAULT NULL,
`mname` VARCHAR(10) NULL DEFAULT NULL,
`mdate` DATETIME NULL DEFAULT CURRENT_TIMESTAMP(),
`mgrade` INT NULL,
PRIMARY KEY (`mno`)
);
직접 텍스트를 쳐서 작성한게 아니라 HeidiSQL 을 사용하여 만들었기 때문에 이후 수정사항 있음
기존 만들던 홈페이지에 Login 페이지 기능 추가하기
<%@ 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>
<head>
<meta charset="UTF-8">
<title>login</title>
<link href="./css/index.css" rel="stylesheet" />
<style>
h2 {
margin: 0 auto;
text-align: center;
}
.login {
margin: 0 auto;
border: 1px solid #dadada;
width: 250px;
padding: 10px;
}
.logText {
/* text-align: center; */
margin: 0 auto;
width: 90%;
border: 1px solid #dadada;
margin-bottom: 5px;
}
.input_id {
padding: 0 0 0 10px;
border: none;
height: 30px;
font-size: 15px;
}
.btn {
width: 60px;
}
.btn_div {
display: flex;
justify-content: center;
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="container">
<header>
<jsp:include page="menu.jsp"></jsp:include>
</header>
<div class="main">
<div class="mainStyle">
<article>
<h2>Login</h2>
<div class="login">
<form action="./login" method="post">
<div class="logText">
<input type="text" name="id" class="input_id" placeholder="아이디">
</div>
<div class="logText">
<input type="password" name="pw" class="input_id" placeholder="비밀번호">
</div>
<div class="btn_div">
<button type="reset" class="btn">리셋</button>
</div>
<div class="btn_div">
<button type="submit" class="btn">로그인</button>
</div>
</form>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
좀 네이버 비슷하게 따라하고 싶어서 하였으나 잘 안됨
input 창의 테두리 없애고, div 안에 넣어 각 항목별로 가운데 정렬하기
div 를 margin: 0 auto 로 가운데 정렬하여도 되지만 안되는 항목도 있을 수 있음
button 은 다른 방법으로 정렬해보았음
'HTML' 카테고리의 다른 글
| 240116 HTML, Servlet 홈페이지 (0) | 2024.01.16 |
|---|---|
| 240115 홈페이지 만들기 (0) | 2024.01.15 |
| 240109 HTML (0) | 2024.01.09 |
| 240108 (0) | 2024.01.08 |
| 240104 VScode 를 이용하기 (0) | 2024.01.04 |