어떻게 모바일 브라우저로 우리가 만든 웹에 접속할 수 있는지를 알아보자.
위처럼 서버를 구동시킨것도 이 컴퓨터이고, 접속할 수 있는것도 이 컴퓨터만 가능하다.
따라서 모바일에서는 접속할 수 없다
모바일로 접속하기 위해서는 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를 설정하여 뷰포트의 컨텐츠가 자동으로 화면에 맞추어지지 않도록 설정합니다. 이를 통해 사용자가 수평 스크롤을 사용하지 않고 웹 페이지를 볼 수 있도록 합니다.
<!-- 추가 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
list.html 의 구조를 보아하니 a 태그가 전체를 감싸고 있는 형태이기 때문에
container 에 있는 a 태그에 대한 style 을 설정해준다.
<!--/pragmatic/articleapp/templates/articleapp/list.html-->
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
.container {
padding: 0
margin: 0, auto;
}
.container a {
width: 45%; /*모바일에서는 사이즈가 45% 를 차지한다.*/
max-width: 250px; /*데스크탑에서의 최대 너비가 250px*/
}
</style>
...
{% 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 추가
- 버튼 크기 조정
<div style="text-align: center;">
<a href="{% url 'articleapp:create' %}" class="btn btn-dark rounded-pill mt-3 mb-3 px-2">
Create Article
</a>
</div>-> 사이드가 다 채워지지 않는것 같다.
-> gutter 의 값을 아무리 바꿔도 뺵뺵한 레이아웃 형태가 되진 않는다..
크기 조정
/*/pragmatic/static/base.css*/
@media screen and (max-width: 500px) { /*스크린에 사이즈가 500px 이하로 떨어지면 이 안에 있는 css 태그들이 적용이 된다*/
html {
font-size: 13px;
}
}-> 크기 조정이 되는건지는 모르곘다
commit
