Django 8일차 TIL

Mobile Responsive Layout

How to connect with Mobile browser?

현재까지 구현한 앱을 어떻게 모바일 환경에서 보여줄 수 있을까?

python manage.py runserver = python manage.py runserver 127.0.0.1: 8000
➡️ python manage.py runserver 0.0.0.0:8000

로컬 호스트 말고도 다른 컴퓨터에서 ip 주소를 기반으로 구동되고 있는 서버에 접속할 수 있는 포트가 열리게 된다.

• ALLOWED_HOST
  로 설정 가능하다.

• Connect to WIFI local network server IP
  ip 확인 후 브라우저에 입력하고 접속한다.
  cmd에서 ipconfig

구현하기

python manage.py runserver 0.0.0.0:8000

지금 상태에서 모바일로 접속하면 에러가 발생한다. 따라서 setting을 바꿔줘야 한다.

settings.py

ALLOWED_HOSTS = ['*']

접속하는 모든 호스트를 허용한다.
단, 배포를 할 때는 신경써야함. 지금은 개발 중이기 때문에 이렇게 하고 넘어간다.

반응형으로 수정하기

head.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• width=device-width: 기기의 간격에 너비를 맞추겠다.
• initial-scale=1: 초기의 크기는 1이다.
• shrink-to-fit=no: firefox에 맞춘 셋팅

---

list.html

반응형이 될 수 있도록 css를 수정한다.

base.css

화면 사이즈가 500px 보다 작을 경우 폰트 사이즈도 작게 줄인다.

@media screen and (max-width:500px) {
    html {
        font-size: 13px;
    }
}

Projectapp 구현

1. Create / Detail / List View
2. Success_url to related Project
3. Login_required to CreateView
4. Model (title / description / image / created_at)

a태그 css 안먹음

---

MultipleObjectMixin을 통한 Projectapp 마무리

프로젝트 아래에 article을 넣을 수 있도록 수정

MultipleObjectMixin

views.py

class ProjectDetailView(DetailView, MultipleObjectMixin):
    model = Project
    context_object_name = 'target_project'
    template_name = 'projectapp/detail.html'

    paginate_by = 25

    def get_context_data(self, **kwargs):
        object_list = Article.objects.filter(project=self.get_object())
        return super(ProjectDetailView, self).get_context_data(object_list=object_list, **kwargs)

detail.html

<div>
    {% include 'snippets/list_fragment.html' with article_list=object_list %}
</div>

결과 화면

---