어떻게 모바일 브라우저로 우리가 만든 웹에 접속할 수 있는지를 알아보자.

위처럼 서버를 구동시킨것도 이 컴퓨터이고, 접속할 수 있는것도 이 컴퓨터만 가능하다.
따라서 모바일에서는 접속할 수 없다

모바일로 접속하기 위해서는 python manage.py runserver 0.0.0.0:8000

다른곳에서도 ip 를 기반으로 우리가 구동시킨 서버로 접속할 수 있는 port 가 열린다.

추가적으로 장고 setting 안에 있는 ALLOWED_HOST 에서 다른 호스트도 허용할 수 있도록 설정 가능

서버의 ip 번호 확인 후, 그 번호를 모바일 브라우저에 입력하여 접속

이 컴퓨터의 ip 가 무엇인지 알아야 접속이 가능하다.
컴퓨터와 모바일 디바이스가 같은 공유기 안에 있다는 가정 하에 설명
CMD 창 ifconfig 입력, 또는 공유기 setting 들어가서 확인하기

python manage.py runserver 0.0.0.0:8080 # in mac

이후 모바일로는 내부ip주소:포트번호 -> http://192.168.1.157:8080/

#/pragmatic/pragmatic/settings.py 수정

...

ALLOWED_HOSTS = ['*'] # * 추가, 모든 호스트에 대해서 허용한다.

개발자 도구 -> 기기 툴바 전환 : 모바일 디바이스에서 어떻게 보이는지 확인

head.html
이 설정은 주로 모바일 디바이스에서 웹 페이지를 렌더링할 때 사용됩니다. width=device-width를 통해 디바이스의 너비에 맞게 페이지가 표시되며, initial-scale=1을 통해 페이지가 초기에 정확한 배율로 시작하게 됩니다. shrink-to-fit=no를 설정하여 뷰포트의 컨텐츠가 자동으로 화면에 맞추어지지 않도록 설정합니다. 이를 통해 사용자가 수평 스크롤을 사용하지 않고 웹 페이지를 볼 수 있도록 합니다.

list.html 의 구조를 보아하니 a 태그가 전체를 감싸고 있는 형태이기 때문에
container 에 있는 a 태그에 대한 style 을 설정해준다.

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

{% block content %}

...
{% endblock %}
// /pragmatic/static/js/magicgrid.js

let magicGrid = new MagicGrid({
container: '.container',
animate: true,
gutter: 12, //30->12
static: true,
useMin: true
});
11:01 분까지 진행.

list.html 에서 create article 부분 수정
col-3 부분 삭제 후 px-3 추가
버튼 크기 조정

-> 사이드가 다 채워지지 않는것 같다. -> gutter 의 값을 아무리 바꿔도 뺵뺵한 레이아웃 형태가 되진 않는다..

크기 조정
//pragmatic/static/base.css/
@media screen and (max-width: 500px) { /스크린에 사이즈가 500px 이하로 떨어지면 이 안에 있는 css 태그들이 적용이 된다/
html {
font-size: 13px;
}
}
-> 크기 조정이 되는건지는 모르곘다

commit