장고:매직 그리드
장고! 웹 프레임워크! 틀:장고
개요[편집 | 원본 편집]
Magic Grid. 여러 객체가 있을 때 기기의 크기, 창의 크기에 따라 내용물들의 배치를 조정해야 할 때가 있다. 이를 위한 도구.
다음 링크에서 창의 크기에 따라 배치가 어떻게 달라지는지 예시를 살펴보고 코드를 가져올 수 있다. https://jsfiddle.net/eolaojo/4pov0rdf/
기본적인 형태는 다음과 같다.
| HTML | CSS | JavaScript | |
|---|---|---|---|
| <!DOCTYPE html>
<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> |
<style> 안에 넣어준다.
width: 280px; //고정할 수치만 정해준다. background-color: antiquewhite; display: flex; justify-content: center; align-items: center; border-radius: 8px; } |
let magicGrid = new MagicGrid({
container: '.container', animate: true, gutter: 30, static: true, useMin: true }); magicGrid.listen(); |
사용법[편집 | 원본 편집]
깃허브(https://github.com/e-oj/Magic-Grid)의 Magic-Grid/dist/magic-grid.cjs.js 를 복사한다.
static 안에 js 파일을 만든 후 복사한 내용을 넣는다.
load static 후에 <script src="{% static '.js경로' %}"> 를 아래에 넣어준다.