#MagicGrid 소개 및 Articleapp 시작

• MagicGrid 다운받기
  https://github.com/e-oj/Magic-Grid 에 접속해서 다운
  

해당 링크 클릭

(링크를 클릭한 이후의 모습)

-> 적용은 아래에 articleapp을 설정해주면서 적용 할 것이다.

articleapp 시작

1) 터미널에 python manage.py startapp articleapp 입력
2) settings.py 와 urls.py에 각각 등록과, 경로 설정
3) articleapp 하위에 urls.py를 생성하고 아래와 같이 설정

4) articleapp 하위에 templates 폴더를 생성하고 그 하위에 articleapp폴더를 다시 구성한뒤 그 하위에 list.html을 구현한 모습

(magic grid를 구성하는 내용이 없으므로
https://github.com/e-oj/Magic-Grid/blob/master/dist/magic-grid.cjs.js 에 있는 코드를 복사하여 아래와 같이 적용해 줘야 한다.)

5) static 하위에 아래와 같이 js 폴더를 만들고 위 링크에서 복사한 내용을 적용할 magicgrid.js를 생성한다.

6) magicgrid.js의 일부이다. (마지막 부분)

(맨 아래줄에 있던 module.exports = MagicGrid; 는 다른 framework에서 사용되는 것이므로 지운다.)

7) 이후 위 사이트의 js 코드를 magicgrid.js 밑에 추가한다.

8) 최종적으로 list.html을 아래와 같이 코딩한다.

(script 태그 내부에 연결할 static의 url을 설정해준다. 이로 인해 맨 위에
{% load static %}구문을 넣어줘야 한다.)

9) 결과

(위와 같이 정상적으로 적용된다.)

# 만든 list.html을 원하는 모양으로 바꿔보기

1) 사각형의 모양을 다르게 하기위해 아래 style 태그 부분을 변경하였다.

2) item에 넣을 이미지 소스 구하기

(아래 사이트에 접속)

(위와 같은 특정 url을 보내게 되면, 특정 너비와 높이에 해당하는 랜덤 이미지를 보내준다.)

3) div 태그의 item1에 이미지 적용하기

4) 결과 확인하기

(랜덤 사진이 적용된 것을 확인 할 수 있다.)

5) 크기 조정하기

(container 안에 있는 img에서 width를 100%, 꼭지점도 약간 둥글게 적용

추가적으로 .containt img속에 width : 100%, height: 100%를 둘다 하는 경우 width만 적용되는 것을 확인 할 수 있었다.

height: 100%만 있는 경우에는 height은 정상적으로 적용 되었다.)

6) 수정 후의 결과

(자동적으로 맞춰서 레이아웃 되지 않는다. 사진 로딩에 걸리는 시간이 있기 때문이다.

자바스크립트 코드가 끝났는데, 그것이 나중에 이미지 로딩이 완료되어서
실제로 grid를 포지셔닝 하는데 반영이 되지 않아서 그런것이다.)

7)magicgrid.js에 추가한 구문

(masonrys는 벽돌과 같은 형태로 엇비슷하게 올라가는 뜻으로, 이 레이아웃의 형태를 말한다.

html 안에 있는 모든 img태그들이 masonrys 변수에 불려진것

의미는 모든 html 태그에 있는 img에서 이미지가 load 되었을때
magicGrid를 다시 포지셔닝하라는 EventListener를 추가하는 것)

8) 수정된 결과

(load가 되었을때 재 배치가 일어나는 것이다.)

9) 이미지를 모두 채우기 : 너비는 같이 하고 높이만 각자 다르게 하였다.

(아래 13번 까지 적용하였으며 이때 높이를 같게 하면 같은 사진이 나오는 현상이 관측되었다.)

10) 최종 결과

(여러 사진을 사이즈에 맞게 구현 가능하다.)