인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

nathan님의 프로필 이미지
nathan

작성한 질문수

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

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

작성

·

346

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 %}


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

 

답변 1

0

SungYong Lee님의 프로필 이미지
SungYong Lee
지식공유자

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

 

nathan님의 프로필 이미지
nathan

작성한 질문수

질문하기