[pinterest clone (26)] Articleapp 화면구성 (MagicGrid)

MagicGrid를 이용해 화면을 구성한다.

github.com/e-oj/Magic-Grid

e-oj/Magic-Grid

---

1

python manage.py startapp articleapp

 

2

settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'accountapp',
    'bootstrap4',
    'profileapp',
    'articleapp',
]

3

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('accountapp.urls')),
    path('profiles/', include('profileapp.urls')),
    path('articles/', include('articleapp.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4

articleapp/urls.py 생성

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('list/', TemplateView.as_view(template_name='articleapp/list.html'), name='list')
]

5

articleapp/templates/articleapp/list.html 생성

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

{% block content %}

<style>
    .container div {
      width: 280px;
      height: 500px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
    }

    .container .item1 { height: 200px; }
    .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 src="{% static 'js/magicgrid.js' %}"></script> 보다시피 static 폴더에 js 폴더를 만들어 magicgrid의 js를 넣어줬다. 

 

* 이미지 테스트 사이트

picsum.photos/

Lorem Picsum

사이즈를 정해주면 랜덤이미지를 뱉어준다.

 

화면 구성에 대한 추가설명

velog.io/@jusung-c/Articleapp-Implementation

Articleapp Implementation