31. 대문 페이지

● 대문 페이지

 

landing.html 추가

 

  bootstrap 적용을 위해 {% load static %}을 추가하고 static 폴더의 CSS파일과 Font awesome을 가져온다. 대문 페이지 역시 navbar와 footer을 추가하여 일관성 있게 해준다.

 

landing.css 추가 후 페이지 조정

 

  배경 화면에 쓸 이미지를 따로 폴더를 만들어 넣고 보기 좋게 하기 위해 css를 위한 폴더와 파일을 만든다. 

 

 

  여기서 background-size: cover을 입력하면 화면 크기에 맞춰 최대로 보이게 해준다. 

  -webkit -moz -o는 다양한 브라우저에서 동일하게 작동하게 하기 위함이다.

 

  <h>태그에 의해 출력된 글자가 검정색인데 흰색으로 출력하게끔 하고 위치를 조정하기 위해 다음과 같이 한다.

 

 

●  대문에 최신 포스트 나타내기

 

landing.html에 최신 포스트를 나타내도록 수정

  오른쪽 상단 부분에 최근에 쓰여진 포스트를 나타내도록 html 파일을 수정한다. col-lg-5로 크기 지정 후 bootstrap card를 추가한다. card 와의 간격을 위해 mt-1로 상단의 여백을 확보한다. 

 

 

테스트 코드 작성

  기존의 테스트 코드는 blog 폴더의 test.py였지만 이제부터 작성하는 테스트 코드는 single_pages폴더의 test.py 이므로 별개의 테스트 코드이다. 

 

  setUp() 함수에서 브라우저 역할을 하는 Clinet를 불러오고 사용자를 만든 후 최신 포스트 3개가 나오는지 테스트 한다.

 

  당연하게도 템플릿에 어떠한 Post를 넘겨주지 않았으므로 오류가 출력된다. 템플릿에 Post를 띄우기 위해 single_pages 폴더의 Views.py을 수정한다. 

 

 

  최신 포스트를 불러오는 것이므로 역순으로 하고 [:3] 으로 3개를 불러 템플릿으로 넘긴다. 

 

 

  템플릿에서는 for문을 이용하여 최신의 3개 포스트를 불러오는데 작성자와 작성일도 포함한다. <a>태그는 클릭시 포스트 상세로 넘어가도록 href="{{ post.get_absoulte_url }}"로 하고 class="text-decoration-none text-dark"로 밑줄과 파란색 글자로 바뀌는 것을 방지한다.  

 

 

배경색 흐리게 만들기

   rgba에서 마지막 a는 투명도를 뜻한다.