Card & Footer 강의에서 오류가 있네요
275
임권일
작성한 질문수 71
0
Card & Footer 강의에서
이렇게 적었는데
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Blog | 가을이네 웹사이트</title>
<link href="{% static 'blog/bootstrap/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
<!-- <link href="./practice.css" rel="stylesheet" type="text/css"> -->
<script src="https://kit.fontawesome.com/726bbd6862.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="./index.html">Do It Django</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="./index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog_list.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about_me.html">About me</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>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i> Log In</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-md-6 col-sm-12">
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="fab fa-google"></i> Log in with Google</button>
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-user"></i> Log in with username</button>
</div>
<div class="col-md-6 col-sm-12">
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i class="far fa-envelope"></i> Sign up with E-mail</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row my-3">
<div class="col-md-8 col-lg-9">
<h1>Blog</h1>
{% for p in post_list %}
<!-- Blog post-->
<div class="card mb-4">
<a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg" alt="..." /></a>
<div class="card-body">
<h2 class="card-title h4">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla.</p>
<a class="btn btn-primary" href="#!">Read more →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2022 by
<div class="small text-muted">
</div>
</div>
{% endfor %}
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-lg-3">
<!-- Search widget-->
<div class="card mb-4">
<div class="card-header">Search</div>
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" />
<button class="btn btn-primary" id="button-search" type="button">Go!</button>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Web Design</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
이렇게 뜨네요
버젼이 안맞나보네요
아무리 해도 안되네요
답변 1
0
안녕하세요. 질문 감사합니다.
확인해보니, 강의에는 오류가 없습니다. 아쉽게도 임권일님의 코드에 오류가 있습니다.
제가 수정한 코드는 아래와 같습니다.
{% endfor %} 의 위치가 잘못 되었고, pagination의 위치도 잘못 되어 있습니다. 비교하시면서 한번 확인해보시기 바랍니다.
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="./index.html">Do It Django</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="./index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog_list.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about_me.html">About me</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>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel"><i class="fas fa-sign-in-alt"></i> Log In</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-md-6 col-sm-12">
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i
class="fab fa-google"></i> Log in with Google</button>
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i
class="far fa-user"></i> Log in with username</button>
</div>
<div class="col-md-6 col-sm-12">
<button type="button" class="btn btn-outline-dark btn-block btn-sm"><i
class="far fa-envelope"></i> Sign up with E-mail</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row my-3">
<div class="col-md-8 col-lg-9">
<h1>Blog</h1>
<!-- {% for p in post_list %} -->
<!-- Blog post-->
<div class="card mb-4">
<a href="#!"><img class="card-img-top" src="https://dummyimage.com/700x350/dee2e6/6c757d.jpg"
alt="..." /></a>
<div class="card-body">
<h2 class="card-title h4">Post Title</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis
aliquid atque, nulla.</p>
<a class="btn btn-primary" href="#!">Read more →</a>
</div>
<div class="card-footer text-muted">
Posted on January 1, 2022 by
<div class="small text-muted">
</div>
</div>
</div>
<!-- {% endfor %} -->
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-3">
<!-- Search widget-->
<div class="card mb-4">
<div class="card-header">Search</div>
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" placeholder="Enter search term..."
aria-label="Enter search term..." aria-describedby="button-search" />
<button class="btn btn-primary" id="button-search" type="button">Go!</button>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Web Design</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
</body>로그인 오류
0
89
2
docker-compose down 안되는 현상
0
210
2
url pattern관련 문의
0
199
2
오류
0
256
1
doitdjango 블로그 게시판 작동 오류
1
303
1
구글 로그인 오류 .
0
467
2
makemigrations 을 했는데 aws lightsail에서
0
206
1
안녕하세요 강사님,
0
404
2
맥북 프로 14 가상화 확인
0
439
2
테스트 코드 오류
0
389
2
섹션 6-2 알림 내용 중 링크가 잘못되어 있네요.
0
284
2
장고 개발 준비.
0
411
2
Mac
0
323
1
TDD 통과 했지만, 실제 웹에서 작동하지 않습니다.
0
376
1
summernote를 적용하고 이미지를 업로그하면 모바일에서 볼때는 이미지가 크게 나오는데 어떻게 해야 되나요?
0
918
2
python manage.py test 를 돌리면 allauth.socialaccount.models.SocialApp.DoesNotExist 에러가 뜹니다.
1
1698
2
self.client.post에 글이 생성되지않습니다
0
340
1
Nginx 설정 이후 개발용 도커 컨테이너 실행
0
554
1
UpdateView - 포스트 수정 페이지 만들기 에서 질문이 있습니다.
0
405
1
from .models import Question
0
1221
1
파이참 장고 인식 불가 문제
0
1006
2
배포용 도커 컨테이너 실행이 안됩니다
0
717
1
docker-compose exec web manage.py migrate
0
557
1
search_info가 안나옵니다..
0
361
2