inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

카테고리와 태그 위젯 위치 오류

389

nathan

작성한 질문수 88

0

안녕하세요? 좋은 강의 감사합니다.

책 17-1을 하고 있는 도중에 질문이 있습니다.

같은 base.html을 사용하고 있는데, post_detail.html 의 위젯 위치가 옆이 아니라, 아래에 나타나는 오류가 생깁니다. post_list.html 에서는 위젯이 정상적으로 오른쪽에 잡히는데요.

오류 화면을 아래와 같이 첨부합니다.

screencapture-127-0-0-1-8000-blog-9-2022-10-15-09_41_15.png정상화면.PNG

아래는 base.html의 코드이고요

<!DOCTYPE html>
{% load static %}
<html>

<head>
    <title>{% block head_title %}Blog{% endblock %}</title>
    <link rel= "stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" media="screen">

    <script src="https://kit.fontawesome.com/726bbd6862.js" crossorigin="anonymous"></script>
</head>

<body>
    {% include 'blog/navbar.html' %}


    <div class="container my-3">
        <div class="row">
            <div class="col-md-8 col-lg-9" id="main-area">
            {% block main_area %} 
        
            {% endblock %}

            </div>

            <div class="col-md-4 col-lg-3">
                <!-- Search Widget -->
                <div class="card my-4">
                    <h5 class="card-header">Search</h5>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button">Go!</button>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Categories Widget -->
                <div class="card my-4" id ="categories-card">
                    <h5 class="card-header">Categories</h5>
                    <div class="card-body">
                        <div class="row">
                                <ul>
                                    {% for category in categories %}
                                    <li>
                                        <a href="{{ category.get_absolute_url }}">{{ category }} ({{ category.post_set.count }})</a>
                                    </li>
                                    {% endfor %}
                                    <li>
                                        <a href="/blog/category/no_category/"> 미분류 ({{ no_category_post_count }})</a>
                                    </li>
                                </ul>
                        </div>
                    </div>
                </div>
            
            
            </div>
        </div>
    </div>

    {% include 'blog/footer.html' %}


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

</body>

</html>


아래는 post_detail.html의 코드 입니다.

{% extends 'blog/base.html' %}

{% block head_title %}
  {{ post.title }} - Blog
{% endblock %}

{% block main_area %}

    <div id = "post-area">
      {% if post.category %}
        <span class="badge badge-secondary float-right">{{ post.category }}</span>
      {% else %}
        <span class="badge badge-secondary float-right"> 미분류 </span>
      {% endif %}

        <!-- Title -->
        <h1 class="mt-4">{{ post.title }}</h1>
        <h5 class="text-muted">{{ post.hook_text }}</h5>

        <!-- Author -->
        <p class="lead">
          by
          <a href="#"> {{ post.author | upper }} </a>
        </p>

        <hr>

        {% if user.is_authenticated and user == post.author %}
          <a class="btn btn-info btn-sm float-right" href="/blog/update_post/{{ post.pk }}/" role="button"><i class="fas fa-pen"></i>Edit Post</a>
        {% endif %}

        <!-- Date/Time -->
        <p>{{ post.created_at }}</p>

        <hr>

        <!-- Preview Image -->
        {% if post.head_image %}
          <img class="img-fluid rounded" src="{{ post.head_image.url }}" alt="{{ post.title }} head image">
        {% else %}
          <img class="img-fluid rounded" src="https://picsum.photos/seed/{{ post.id }}/800/200" alt="random_image">
        {% endif %}
          
        <hr>

        <!-- Post Content -->
        <p class="lead">{{ post.get_content_markdown | safe }}</p>

        {% if post.tags.exists %}
          <i class="fas fa-tags"></i>
          {% for tag in post.tags.all %}
            <a href="{{ tag.get_absolute_url }}" class="badge badge-light">{{ tag }}</a>
          {% endfor %}
          <br/>
          <br/>
        {% endif %}

        {% if post.file_upload %}
        <a href="{{ post.file_upload.url }}" class="btn btn-outline-dark" role="button"> Download :

        {% if post.get_file_ext == 'csv' %}
        <i class="fa-regular fa-file-csv"></i>

        {% elif post.get_file_ext == 'xlsx' or 'xls' %} 
        <i class="fa-regular fa-file-excel"></i>
        
        {% elif post.get_file_ext == 'docs' or 'doc' %}
        <i class="fa-regular fa-file-word"></i>

        {% else %}
        <i class="far fa-file"></i>
        {% endif %}
          

        {{ post.get_file_name }}

        </a>
        {% endif %}
        <hr>
      </div>

      <div id="comment-area">
        <!-- Comments Form -->
        <div class="card my-4">
          <h5 class="card-header">Leave a Comment:</h5>
          <div class="card-body">
            <form>
              <div class="form-group">
                <textarea class="form-control" rows="3"></textarea>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
        </div>

        {% if post.comment_set.exists %}
          {% for comment in post.comment_set.iterator %}

        <!-- Single Comment -->
        <div class="media mb-4" id="comment-{{ comment.pk }}">
          <img class="d-flex mr-3 rounded-circle" src="http://placehold.it/50x50" alt="">
          <div class="media-body">
            <h5 class="mt-0">{{ comment.author.username }} &nbsp;&nbsp;<small class="text-muted">{{ comment.created_at }}</small>

            </h5>
            <p>{{ comment.content | linebreaks }}</p>

          </div>
          {% endfor %}
        {% endif %}
        </div>
        <hr/>


      </div>


{% endblock %}


완성된 코드와 비교를 해봐도 다른점을 잘 모르겠는데 도움 부탁드립니다!

 

tdd python HTML/CSS django bootstrap javascript aws docker

답변 1

0

SungYong Lee

맨 마지막에 {% endif %} 바로 뒤에 있는 </div>가 {% endfor %} 안 쪽으로 들어가야 하는게 아닌가 싶네요.

 

로그인 오류

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