๋ถํธ ์คํธ๋ฉ ๋ค์ด๋ก๋
https://getbootstrap.com/docs/5.3/getting-started/download/
Download
Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
getbootstrap.com
bootstrap-5.3.3-distํด๋ ์์ ๋ค์ด๊ฐ๋ฉด js๋ css ํด๋๊ฐ ์๋ค.
๋ ๊ฐ ๋๋๊ทธํ๊ณ ๋ณต์ฌํ ํ ์ดํด๋ฆฝ์ค๋ก ๋์์์ webapp์ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ ์ถ๊ฐ
js๋ ์์ค ๋จ๋๊ฒ ๋ง์์ ๊ทธ๋ฅ
bootstrap.bundle.min.js
CDN์ผ๋ก ์ถ๊ฐ
โก ๋ถํธ์คํธ๋ฉ CSS์ถ๊ฐ
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-pzjw8f+ua7Kw1TIq0K1+tiQd5iDYYPb+8uPcfm9+axlb6xYOu14w8V4Vdz+gm7Gz" crossorigin="anonymous">
โก ๋ถํธ์คํธ๋ฉ JS๋ ์ ์ด์ฟผ๋ฆฌ ์ถ๊ฐ
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Insert title here</title>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">JSP ์น์ฌ์ดํธ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">๊ฒ์ํ</a></li>
<li class="nav-item dropdown ms-auto">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
์ ์ํ๊ธฐ
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="login.jsp">๋ก๊ทธ์ธ</a></li>
<li><a class="dropdown-item" href="join.jsp">ํ์๊ฐ์
</a></li>
</li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="jumbotron" style="padding-top: 20px;">
<form method="post" action="loginAction.jsp">
<h3 style="text-align: center;">๋ก๊ทธ์ธํ๋ฉด</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="์์ด๋" name="userID" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="๋น๋ฐ๋ฒํธ" name="userPassword" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control" value="๋ก๊ทธ์ธ">
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
์คํ์์ผ๋ณด๋ฉด ์ด๋ ๊ฒ ๋ฌ๋ค.
์ฐธ๊ณ ๋ก ๋๋กญ๋ค์ด ๋ฉ๋ด ๋ง๋ค ๋ active๋ ํ ๊ฐ๋ง ๊ฑธ ์ ์๋ค.
active ํด๋์ค๋ ๋ณดํต ๋ค๋น๊ฒ์ด์
๋ฉ๋ด๋ ๋ชฉ๋ก์์ ํ์ฌ ํ์ฑํ๋ ํญ๋ชฉ์ ํ์ํ๋ ๋ฐ ์ฌ์ฉ๋๋ค. ๋๋ Home์ด๋ ๋ก๊ทธ์ธ์๋ง ๊ฑธ์ด์ฃผ์๋ค. active ํด๋์ค๋ ์ฌ์ฉ์๊ฐ ํ์ฌ ๋ณด๊ณ ์๋ ํ์ด์ง๋ ์น์
์ ๋ช
ํํ ์๋ ค์ฃผ๊ธฐ ์ํด ์ ์ฉํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ํ ๋ฒ์ ํ๋์ ํญ๋ชฉ๋ง ํ์ฑํ๋์ด์ผ ์ฌ์ฉ์๊ฐ ์ด๋ค ํญ๋ชฉ์ ๋ณด๊ณ ์๋์ง ์ง๊ด์ ์ผ๋ก ์ดํดํ ์ ์๋ค. ๋ก๊ทธ์ธ๋ง ํ๋๊ฒ ๋์ด ์๋ ์ด์ ๊ฐ active ๋๋ฌธ์ด๋ค.
์ด๋ ๊ฒ ์ฌ๊ธฐ๊น์ง ๋ถํธ์คํธ๋ฉ์ผ๋ก ํ๋ง ์ก์์คฌ์ผ๋ฉด ์ด์ mysql ๋ค์ด ๋ฐ์ ์ฐจ๋ก
์๋ ๋งํฌ์์ ๋ค์ด๋ฐ์ ์ ์๋ค.
๋๋ฒ์งธ์ ์๋ ์ฉ๋์ด ํฐ ๋ฒ์ ์ด ์ฆ์ ์ค์นํด ์ฃผ๋ ๋ฒ์ ์ด๋ค.
MySQL :: Begin Your Download
MySQL :: Begin Your Download
dev.mysql.com
๋๋ฒ์งธ์ ์๋ ์ฉ๋์ด ํฐ ๋ฒ์ ์ด ์ฆ์ ์ค์นํด ์ฃผ๋ ๋ฒ์ ์ด๋ค.
Download ๋๋ฅด๋ฉด ๋ก๊ทธ์ธ ํ๋ผ๊ณ ๋จ๋๋ฐ ๊ทธ ์๋ No thanks, just start my download
๋๋ฅด๋ฉด ๊ฐ์
์ ํ๊ณ ๋ฐ๋ก ์ค์น ๊ฐ๋ฅ
ํ๋ผ๋๊ฒ ๋ง์์ ์ง๋ฆฐ๋ค...
๊ทธ๋ฅ ๋ค ๊ธฐ๋ณธ ์ธํ
๊ทธ๋๋ก ํด์คฌ๋ค.
Use Strong Password Encryption = ์ธํฐ๋ท์ ๊ฒฝ์ ํ๋ ํ๊ฒฝ (๊ถ์ฅ)
Use Legacy Password Encryption = ์ฌ์ค ๋คํธ์ํฌ ํ๊ฒฝ์์ ์ฌ์ฉ
๋๋ ์คํธ๋กฑ ์ต์
์ ์ ํํ์ฌ ์ค์นํ๋ค.
๋น๋ฐ๋ฒํธ๋ ์ค์ ํด ์ฃผ๊ณ
๋๋จธ์ง๋ ๋ค ๊ธฐ๋ณธ ๋ํดํธ ์ค์ ์ผ๋ก ์งํ ํด ์ฃผ์์
์ด๋ ๊ฒ ๋๋ฉด ์ค์น ์๋ฃ!
MySQL Workbench๋ฅผ ์คํํด์ค๋ค.
๊ทธ๋ฆฌ๊ณ MySQL Connections์ ์๋ ๋ด ๊ณ์ ํด๋ฆญํ๊ณ ๋ฑ๋กํ ๋น๋ฐ๋ฒํธ ์
๋ ฅ
๋ก๊ทธ์ธ ์ฑ๊ณต
์ด์ mySQL์ ํ๊ฒฝ๋ณ์์ ์ถ๊ฐ ํด ์ฃผ์
์ ์ดํ > ์์คํ
> ๊ณ ๊ธ ์์คํ
์ค์ > ํ๊ฒฝ๋ณ์ > ์์คํ
๋ณ์ > Path ํด๋ฆญ > ์๋ก ๋ง๋ค๊ธฐ -> MySQL Server์ bin ํด๋ ๊ฒฝ๋ก ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ
๊ทธ ๋ค์ cmd(๋ช
๋ นํ๋กฌํํธ) ๊ฐ์
mysql -u root -p ์
๋ ฅ -> ์ค์ ๋น๋ฐ๋ฒํธ ์
๋ ฅ
์ด๋ผ? ์ ์๋ผ์ง...?
'mysql'์(๋) ๋ด๋ถ ๋๋ ์ธ๋ถ ๋ช
๋ น, ์คํํ ์ ์๋ ํ๋ก๊ทธ๋จ, ๋๋ ๋ฐฐ์น ํ์ผ์ด ์๋๋๋ค. ๋ผ๊ณ ๋ฌ๋ค.
ํ๊ฒฝ๋ณ์ ์ค์ ๊ฒฝ๋ก ์๋ชป์ก์ ๊ฒ ๊ฐ๋ค ?
ํ๊ฒฝ๋ณ์ ์ค์ ์
C:\Program Files\MySQL\MySQL Server 8.0\bin ๋ก ํด์ฃผ๋๊น ๋๋ค!
MySQL Workbench ๊ธฐ๋ณธ ์ค์
๋ช
๋ น์ด ๋๋ฌธ์, ์๋ฌธ์ ์ธํ
Edit > Format > UPCASE Keywords / lowercase Keywords
์ฃผ์์ฒ๋ฆฌ / ์ฃผ์ํด์
Edit > Format > Un/comment selection
์ฟผ๋ฆฌ ํ์คํํ๋ก ์ ๋ฆฌ
Edit > Format > Beautify Query
์ฟผ๋ฆฌ ๊ธ์ ๊ธ๊ผด, ํฌ๊ธฐ ๋ณ๊ฒฝ
Edit > Preference > Fonts & Colors
๋ช
๋ น์ด ์๋์์ฑ์ ๋๋ฌธ์๋ก ์ธํ
Edit > Preference > SQL Editor > Query Editor > Use UPPERCASE keywords on completion
