로그인을 하기 위해서 modal 창을 이용하여 접근을 한다!
base.html 에 있는 navbar에서 로그인은 조작한다!
이제 로그인을 클릭하면 로그인 하는 창
이렇게 비슷한 모양으로 만들려고 한다!
모달을 이용하고, 이미지와 버튼 색깔 등 만들어보자!
이미지는 다운로드 해서 collectstatic을 했다!
{% load static %}
<!DOCTYPE html>
<html lang="en">
<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>{%block title%}{% endblock %}</title>
<script src="<https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js>" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js>" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css>">
{% block script %}
{% endblock %}
{% block style %}
{% endblock %}
</head>
<body>
<div class="container">
<div class="row flex-nowrap justify-content-between align-items-center py-2 border-bottom">
<div class="col-4"></div>
<div class="col-4 text-center">TEST MY SITE</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm btn-light me-1 mt-0" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
로그인
</button>
<button class="btn btn-sm btn-light">회원가입</button>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
{% for board in nav_board %}
<li class="nav-item">
<a class="nav-link" href="#">{{board.name}}</a>
</li>
{% endfor %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
다양한메뉴
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">다양한메뉴1</a></li>
<li><a class="dropdown-item" href="#">다양한메뉴2</a></li>
<li><a class="dropdown-item" href="#">다양한메뉴3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-12 mb-3">{% block top %}{% endblock %}</div>
<div class="col-sm-12 col-md-7 col-lg-8 col-xl-8 col-xxl-9">{% block middle_left %}{% endblock %}</div>
<div class="col-sm-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">{% block middle_right %}{% endblock %}</div>
</div>
</div>
<footer class="footer py-3 mt-3 bg-light">
<div class="container text-center">
<div class="text-muted fs-6">Place sticky footer content here.</div>
<div class="text-muted fs-6">Place sticky footer content here.</div>
<div class="text-muted fs-6">Place sticky footer content here.</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">로그인</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<div class="fw-bold mb-2">일반 로그인</div>
<form mehtod="POST" action="">
{% csrf_token %}
<input class="form-control mb-2" type="text" name="username" placeholder="아이디"/>
<input class="form-control mb-2" type="password" name="password" placeholder="비밀번호"/>
<div class="d-grid gap-2">
<input class="btn text-white" style="background-color: rgb(82, 121, 250);" type="submit" value="로그인"/>
</div>
</form>
</div>
<div class="mb-3">
<div class="fw-bold mb-2">소셜 로그인</div>
<div class="d-grid gap-2">
<button class="btn text-white" style="background-color: rgb(255, 78, 55);background-size:30px auto;background-image:url('{% static 'google_icon.png' %}');background-repeat:no-repeat;background-position:15px center;">Google 로그인</button>
<button class="btn text-white" style="background-color: rgb(50, 89, 219);background-size:30px auto;background-image:url('{% static 'facebook_icon.png' %}');background-repeat:no-repeat;background-position:15px center;">Facebook 로그인</button>
<button class="btn" style="background-color: rgb(248, 198, 80);background-size:30px auto;background-image:url('{% static 'kakao_icon.png' %}');background-repeat:no-repeat;background-position:15px center;">KaKao 로그인</button>
<button class="btn" style="background-color: rgb(88, 250, 59);background-size:30px auto;background-image:url('{% static 'naver_icon.png' %}');background-repeat:no-repeat;background-position:15px center;">Naver 로그인</button>
</div>
</div>
</div>
<div class="modal-footer">
<div class="fs-6">새로운 회원이신가요? <a href="">회원가입하기</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
잘 만든 것 같다!
다음 장에는 진짜 로그인 가능하게 기능을 집어넣자!