ListView 적용후 게시물이 겹쳐보이는 현상 관련 문의드립니다... - 인프런

작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지

ListView, Pagination 소개 및 적용

ListView 적용후 게시물이 겹쳐보이는 현상 관련 문의드립니다.

작성

225

ListView 적용후 그림들이 겹쳐져서 보입니다.. 어느 부분이 잘못되있는지 문의드립니다.

1. articleapp/templates/articleapp/list.html

{% extends 'base.html' %}

{% load static %}
{% block content %}

<style>
    .container div {
    width: 250px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    }

    .container img {
        width = 100%;
        border-radius: 1rem;
    }
</style>

{% if article_list %}
<div class="container">
    {% for article in article_list %}
        <a href = "{% url 'articleapp:detail' pk=article.pk %}">
            {% include 'snippets/card.html' with article=article %}
        </a>
    {% endfor %}
</div>

<script src="{% static 'js/magicgrid.js' %}"></script>

{% else %}

<div style="text-align:center">
    <h1> Articles YET </h1>
</div>
{% endif %}

{% include 'snippets/pagination.html' with page_obj=page_obj %}

<div style="text-align:center">
    <a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill col-3 mt-3 mb-3">
        Create Article
    </a>
</div>

{% endblock %}

pragmatic/templates/snippets/card.html

<div>
    <img src="{{ article.image.url }}" alt="">
</div>
 
pragmatic/static/js/magicgrid.js
var masonrys = document.getElementsByTagName('img');

for (let i = 0; i< masonrys.length; i++) {
    masonrys[i].addEventListener('load', function() {
        magicGrid.positionItems();
    }, false);
}

magicGrid.listen();
 

docker python django

답변 2

유형주

질문자

감사합니다 ㅎㅎ.. 역시 오타 문제였군요

Hyong Sok Park

지식공유자

안녕하세요.
질문 확인했습니다.

작성하신 코드 중에 에러가 CSS 부분에 있는것 같습니다.

<style>

    .container div {

    width: 250px;

    background-color: antiquewhite;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 1rem;

}

    .container img {

        width = 100%;

        border-radius: 1rem;

}

</style>

위 부분 중에서

    .container img {

        width = 100%;

        border-radius: 1rem;

}

이 부분을 보시면 width = 100% 라고 적혀있는데,
해당 부분을 width: 100% 로 변경해주시길 바랍니다.

CSS 구문 오류로 인해서
이미지의 크기가 100% 가 아니라
해당 이미지의 사이즈를 그대로 출력해서
생기는 문제로 보입니다.

답변이 도움이 되셨길 바랍니다!
좋은하루 보내시구요-
감사합니다-

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

ListView 적용후 게시물이 겹쳐보이는 현상 관련 문의드립니다.