이번 글에서는 Mobile 화면의 Layout에 맞게 조금 수정해본다.
1. 서버 세팅 및 모바일 접속
0.0.0.0:8000
모바일에서 접속이 가능하도록 하기 위해서 0.0.0.0으로 서버를 실행한다. 0.0.0.0 ip로 실행하는 것은, 서버 컴퓨터의 ip주소를 정확히 알 수 없을 때 사용한다고 한다. 물론 ip 주소를 cmd->ipconfig를 통해서 직접 알아내도 된다.
'python manage.py runserver 0.0.0.0:8000'
ALLOWED_HOSTS
settings.py에서 접속하는 컴퓨터의 ip 허용값을 설정해준다. 리스트에 모든 사용자를 허용한다는 의미로 '*'을 입력해준다. 다만 이것은 컴퓨터와 핸드폰이 네트워크상 같은 공유기에 접속해 있을 때만 허용되는 옵션이라고 한다.
settings.py 일부
ALLOWED_HOSTS = ['*']
방화벽 인바운드 규칙 추가
혹시 방화벽으로 막혀있는 상태일 수 있다. 그러면 윈도우 검색 > 방화벽 상태 확인 > 왼쪽 고급 설정 탭 > 인바운드 규칙 > 오른쪽 새 규칙 > 포트 > TCP/특정연결포트 : 8000 > 연결 허용 > 도메인/개인/공용 > 이름 설정
과정을 거치면 방화벽이 해제되어 접근이 가능하다.
그리고 핸드폰에서 해당 컴퓨터의 ip로 접속해보자. 컴퓨터의 ip 주소는 상기 언급한 것처럼 cmd -> ipconfig : IpV4 주소로 알아내면 된다.
ip주소:8000/articles/list
만약 모바일 접근이 어렵다면, 그냥 개발자 도구에서 mobile layout으로 봐도 될 것 같다...
2. CSS 수정
head.html 에 meta 태그 추가
<meta name="viewport" content="width=device-width initial-scale=1, shrink-to-fit=no">
articleapp/list.html
container 부분을 수정한다. 이미지를 둘러싸고 있는 container의 padding, margin을 조절하고, a 태그의 width를 45%, 화면이 커져도 최대로 250px까지만 되도록 한다.
.container {
padding: 0;
margin: 0 auto;
}
.container a {
width: 45%;
max-width: 250px;
}
.container div {
{# width, bg-color 부분 삭제 #}
{#width: 280px;#}
{#background-color: antiquewhite;#}
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
static/js/magicGrid.js
gutter : 12로 수정하여 각 그림간 간격을 줄인다.
let magicGrid = new MagicGrid({
container: '.container',
animate: true,
gutter: 12,
static: true,
useMin: true
});
js파일 캐시 중단
js 파일에서 gutter 부분을 변경해도 변경되지 않는다면, 개발자도구-network탭-Disable Cache 부분에 체크를 하면 제대로 적용될 수 있다. js 파일 같은 static한 요소들은 브라우저가 cache로 갖고 있기 때문에, 이 옵션으로 js 파일을 계속 서버에서 불러오는 방식을 적용할 수 있다는 것을 기억하자.
@media screen 설정
화면 폭이 일정 이상 좁아졌을 때, 글자 크기도 줄어들도록 한다. 혹시 잘 확인이 안된다면, font-size를 5px 정도로 작게해서 responsive 화면 테스트를 해보면 된다.
@media screen and (max-width: 500px) {
html {
font-size: 13px;
}
}
참조
1. 작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지-박형석님 인프런 강의
