Sam: 새 문서: {{장고}} == 개요 == Magic Grid. 여러 객체가 있을 때 기기의 크기, 창의 크기에 따라 내용물들의 배치를 조정해야 할 때가 있다. 이를 위한 도...

2021-01-04T10:12:19Z

새 문서: {{장고}} == 개요 == Magic Grid. 여러 객체가 있을 때 기기의 크기, 창의 크기에 따라 내용물들의 배치를 조정해야 할 때가 있다. 이를 위한 도...

새 문서

{{장고}}

== 개요 ==
Magic Grid. 여러 객체가 있을 때 기기의 크기, 창의 크기에 따라 내용물들의 배치를 조정해야 할 때가 있다. 이를 위한 도구.

다음 링크에서 창의 크기에 따라 배치가 어떻게 달라지는지 예시를 살펴보고 코드를 가져올 수 있다. https://jsfiddle.net/eolaojo/4pov0rdf/

기본적인 형태는 다음과 같다.
{| class="wikitable"
|+
!
!HTML
!CSS
!JavaScript
|-
|
|<!DOCTYPE html>

<nowiki><div class="container"></nowiki>

<nowiki><div class="item1">1</div></nowiki>

<nowiki><div class="item2">2</div></nowiki>

<nowiki><div class="item3">3</div></nowiki>

<nowiki><div class="item4">4</div></nowiki>

<nowiki><div class="item5">5</div></nowiki>

<nowiki><div class="item6">6</div></nowiki>

<nowiki><div class="item7">7</div></nowiki>

<nowiki><div class="item8">8</div></nowiki>

<nowiki><div class="item9">9</div></nowiki>

<nowiki><div class="item10">10</div></nowiki>

<nowiki><div class="item11">11</div></nowiki>

<nowiki><div class="item12">12</div></nowiki>

<nowiki><div class="item13">13</div></nowiki>

<nowiki></div></nowiki>
|<style> 안에 넣어준다.

.container div {

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<nowiki/>)의 Magic-Grid/dist/magic-grid.cjs.js 를 복사한다.

static 안에 js 파일을 만든 후 복사한 내용을 넣는다.

load static 후에 <script src="{% static '.js경로' %}"> 를 아래에 넣어준다.

장고:매직 그리드 - 편집 역사

Sam: 새 문서: {{장고}} == 개요 == Magic Grid. 여러 객체가 있을 때 기기의 크기, 창의 크기에 따라 내용물들의 배치를 조정해야 할 때가 있다. 이를 위한 도...