CDW (Coding Discussion World)
python(django) - 장고로 웹페이지 만들기, bootstrap modal (4) 본문
지난 편에서는 bootstrap을 통해 간단하게 네비게이션 바를 만들었다. 이번에는 조금 더 그럴싸하게 꾸며보고 다음에는 models를 이용해서 datebase까지 만들어보자.
2022.11.05 - [Python/Do something] - python(django) - 장고로 웹페이지 만들기, bootstrap(부트스트랩) (3)
우선 이미지 파일을 저장할 경로를 지정해주자. 기존 css, js가 있던 static 폴더에 blog 폴더를 만들고 images 폴더를 만들자. (폴더 경로는 변경해도 되며 html에 경로 설정만 잘 해주면 된다. - 뒤에 참고)
C:\pyminv\pymin_django2\blog\static\blog\images
그리고 웹피이지에 출력되길 원하는 이미지 파일을 하나 넣어준다.
다음으로 이전 편에서 진행했던 html에 <!-- main content --> 아래 부분을 추가한다.
{% load static %}
<html lang="ko">
<head>
<title>Blog</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" media="screen">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- main content -->
<section>
<div class="container mt-4">
<div class="row">
<div class="col-lg-6">
<img class="img-fluid" src="{% static 'blog/images/main_picture.jpg' %}">
</div>
<div class="col-lg-6">
<br> <br>
<h1>Hello! This is pymin</h1>
<br>
<p class="lead">
Hello! This is pymin.<br/>
Have a good day!
</p>
</div>
</div>
</div>
</section>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
그리고 다시 django를 실행시키면 아래와 같이 사진과 간단한 소개가 나타난다.
(imsages 파일 경로는 src="{% static 'blog/images/main_picture.jpg' %}" 로 위에서 지정해둔 경로이다.
하지만 아직 뭔가 심심하니 main content 아래에 sub content들을 복사해서 넣어보자
<!-- Sub content -->
<section class="bg-light margin-for-footer">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pymin Story</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="card">
<img class="card-img-top" src="{% static 'blog/images/main_picture.jpg' %}">
<div class="card-body">
<h5 class="card-title">Story 1</h5>
<p>content 1</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_1">See Detail</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<img class="card-img-top" src="{% static 'blog/images/main_picture.jpg' %}">
<div class="card-body">
<h5 class="card-title">Story 2</h5>
<p>content 2</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_2">See Detail</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<img class="card-img-top" src="{% static 'blog/images/main_picture.jpg' %}">
<div class="card-body">
<h5 class="card-title">Story 3</h5>
<p>content 3</p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_1">See Detail</a>
</div>
</div>
</div>
</div>
</div>
</section>
그럼 아래처럼 추가적인 글들을 넣을 수 있다. 아래 내용들에 대해 원하는 image를 넣고 image 경로를 바꾸어주고, 원하는 내용들을 채우면 조금 더 그럴듯한 페이지가 완성된다.
그렇지만 같이 image를 여러개 쓰니 뭔가 어색하다.
images 경로에 다른 image 3개를 넣고 image 이름을 suc_picture_1,2,3로 변경하고, html 본문의 경로도 sub_picture_1,2,3으로 변경한다.
이렇게 하면 조금더 그럴듯한 느낌으로 변했다.
다음은 웹 제일 아래에 footer를 넣어보자. html body 아래에 아래 내용을 붙여넣자.
<!-- Footer -->
<footer class="py-2 bg-success">
<div class="container">
<p class="m-0 text-center text-black">
Copyright © Pymin
</p>
</div>
</footer>
이렇게 하면 제일 마지막에 footer가 생긴것을 확인할 수 있다.
*혹시 색깔이 마음에 들지 않는다면 bg-success 부분을 다른 색으로 바꾸어주면 된다.
- .bg-gradient-primary
- .bg-gradient-secondary
- .bg-gradient-success
- .bg-gradient-danger
- .bg-gradient-warning
- .bg-gradient-info
- .bg-gradient-light
- .bg-gradient-dark
지금은 1페이지여서 navgatgor와 footer를 그냥 붙였지만 html의 페이지에서 중복되는 부분은 따로 모듈화한 후 사용하는 것이 좋다. 메인 페이지 작업이 끝나고 다른 페이지를 작성할때 해당 부분에 대한 내용을 언급하고자 한다.
이제 웹 화면 Story에서 See Detail을 눌러보자. 아무 반응이 일어나지 않는다.
modal 설정을 해서 누르면 팝업 식으로 해서 상세 내용이 나타나도록 해보자.
우선 bootstrap에서 modal sample을 가져와보자
https://getbootstrap.com/docs/4.6/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
해당 페이지를 내리다보면 live demo가 있고 버튼을 누르면 팝업이 뜬다.
우선 아래 샘플 코드를 활용하면 modal을 활성시킬 수 있다고 하니 기존 html 마지막 줄에 그대로 복사해서 적용해보자.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
잘 적용된것을 알 수 있다. 이것을 참고해서 원래 story에도 modal을 적용해보자
기존 sub content의 See Detail 버튼에 적용했던 data-target="#Story_modal_1" 의 값을 그대로 modal의 id에 적용하면 버튼 을 눌렀을 때 해당 id와 일치하는 modal이 나타나게 된다. (data-target 앞에 #를 붙여줘야 한다.)
\<!-- Sub content -->
\<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#Story_modal_1">See Detail</a>
\<!-- Modal -->
<div class="modal fade" id="Story_modal_1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
첫번째 modal sample은 아래와 같다. (기존 bootstrap sample에서 크기를 키우고 images를 가져오도록 했다.)
<!-- Modal -->
<div class="modal fade" id="Story_modal_1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Story 1 title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-7">
<img class="img-fluid" src="{% static 'blog/images/sub_picture_1.jpg' %}">
</div>
<div class="col-lg-5">
<p>Story_content_1</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
이제 See Detail 버튼을 누르면 아래와 같이 사진과 상세 설명을 확인할 수 있다.
이렇게 함으로써 아래와 같은 웹페이지가 만들어졌다.
하지막 아직 Navigator 버튼을 누를때 여러 페이지로 가능 기능도 없고, 로그인 기능도 없다. 무엇보다도 image나 글을 수동으로 등록하고 html을 편집해야 한다. 뭔가 수정하려면 노가다이다. 다음 편에서는 db에 data를 넣는 방식으로 해보자.
** 추가로 현재까지 적용한 html 파일은 첨부로 올려두겠다..
'Python > Do something' 카테고리의 다른 글
| python(django) - 장고로 웹페이지 만들기, views (6) (0) | 2022.11.11 |
|---|---|
| python(django) - 장고로 웹페이지 만들기, models, database (5) (0) | 2022.11.10 |
| python(django) - 장고로 웹페이지 만들기, bootstrap(부트스트랩) (3) (2) | 2022.11.05 |
| python(django) - 장고로 웹페이지 만들기 (2) (0) | 2022.11.05 |
| python(django) - 장고로 웹페이지 만들기 (1) (0) | 2022.11.05 |
