실용주의 프로그래머님의 인프런 강의를 듣고 작성하였습니다.
출처: https://www.inflearn.com/course/%EC%9E%A5%EA%B3%A0-%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8
어떻게 모바일 브라우저로 leebook을 들어갈 수 있을까? 지금 python manage.py runserver은 내 컴퓨터에서 서버를 돌리고 내 컴퓨터에서만 접속할 수 있다. 모바일로 들어갈 수 없다.
python manage.py runserver 0.0.0.0:8000
이 명령어를 통해 내 컴퓨터 말고도 다른 곳에서 ip 주소를 기반으로 이 컴퓨터에서 구동되고 있는 서버에 접속할 수 있는 포트가 열리게 된다. 그 후 장고 세팅 안에 있는 ALLOWED_HOST를 통해 다른 HOST도 허용할 수 있도록 잠시 설정해줄 것이다.
Connenct to WIFI local network server IP. ip를 확인한 후 그걸 모바일 브라우저에서 접속해 본다. ip를 알아야 하는데 Wifi가 공유기가 있고, 모바일과 이 컴퓨터가 같은 공유 환경에 있다는 가정 하에 cmd 창에서 ipconfig를 입력 후 알 수 있다.
이렇게 알아낸 ip를 가지고 접속을 시도해본다.
- 포트 열기
python manage.py runserver 0.0.0.0:8000
- ALLOWED_HOST 설정
leebook/settings.py
ALLOWED_HOSTS = ['*']접속을 해보면 모바일 화면에 맞게 반응형으로 레이아웃이 되지 않고 있다.
templates/head.html
<!-- 모바일 반응형 레이아웃 -->
<meta name="viewport" content="width=divice-width, initial-scale=1, shrink-to-fit=no">
이렇게 해도 제대로 작동이 안된다.
articleapp/templates/articleapp/list.html
<!--가운데 정렬-->
.container {
padding: 0;
margin: 0, auto;
}
<!-- 모바일에서도 잘 보일 수 있도록 45%로 해두고 최대 250px로 설정 -->
.container a {
width: 45%;
max-width: 250px;
}또 magicgrid.js에서 기본적으로 설정되어 있는 gutter를 수정해줘서 좀 더 게시물들이 빼곡하게 보이도록 한다.
gutter: 12일정 크기 이하로 작아지면 폰트 사이즈도 작아지도록 설정해준다.
스크린의 사이즈가 500 이하로 떨어지면 적용
@media screen and (max-width:500px) {
html {
font-size: 13px;
}
}