작정하고 Django (34) - MagicGrid 소개 및 Articleapp 시작

게시글을 listing 해줄 때 pinterest를 따온 카드형 layout을 사용할 방법

• javascripts 라이브러리 MagicGrid 사용
• 임의의 높이를 가진 카드형 layout 자동배치

articelapp 생성

settings.py 에서 articleapp을 쓰겠다고 명시

url 등록

urls.py 작성

list.html 작성

templates 폴더를 만들고 그 안에 articleapp 폴더에 list.html 생성

{% extends 'base.html' %}
{% load static %}

{% block content %}
<style>
    .container div {
        width: 200px;
        height: 500px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
        }

    .container .item1 { height: 300px; }
    .container .item4 { height: 800px; }
    .container .item6 { height: 600px; }
    .container .item11 { height: 400px; }
</style>

    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
        <div class="item10">10</div>
        <div class="item11">11</div>
        <div class="item12">12</div>
        <div class="item13">13</div>
    </div>

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


{% endblock %}

다음과 같이 작성한다.

script 부분에서 javascript를 가져옴.

static 폴더에 js 폴더에 magicgrid.js 파일

magicGrid를 적용한 articles/list

이미지 삽입 및 사진 크기 조정

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


</style>

    <div class="container">
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/340">
      </div>
      <div>
        <img src="https://picsum.photos/200/280">
      </div>
      <div>
        <img src="https://picsum.photos/200/390">
      </div>
      <div>
        <img src="https://picsum.photos/200/200">
      </div>
      <div>
        <img src="https://picsum.photos/200/500">
      </div>
      <div>
        <img src="https://picsum.photos/200/100">
      </div>
      <div>
        <img src="https://picsum.photos/200/250">
      </div>
      <div>
        <img src="https://picsum.photos/200/320">
      </div>
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/300">
      </div>
      <div>
        <img src="https://picsum.photos/200/270">
      </div>
      <div>
        <img src="https://picsum.photos/200/330">
      </div>

    </div>

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

다음과 같이 수정한다. 이미지는 picksum에서 받아옴.

자바스크립트 수정

모든 html 태그 내에 있는 이미지에 대해서 로드가 됐을 때 magicgrid를 다시 포지셔닝 하라 라는 코드 명령.