전체보기

32. 자기소개 페이지

● 자기소개 페이지 레이아웃 구성 about_me.html head 부분은 landing.html와 유사하고 body 부분은 다음과 같다. css로 footer에 margin을 준다. section 태그 안에 학력, 경력등을 입력한다. 아버지에게 헌정할 블로그이기 때문에 일부 정보는 가렸다. Portfolio 부분 추가 data-target="#house" 와 같이 각 부분의 id를 Modal을 추가할 때 쓰이므로 유의한다. Modal 추가 Modal 기능은 Portfolio 카드 부분을 클릭하면 창을 띄워 더 많은 정보를 제공하게끔 해주는 기능이다.

31. 대문 페이지

● 대문 페이지 landing.html 추가 bootstrap 적용을 위해 {% load static %}을 추가하고 static 폴더의 CSS파일과 Font awesome을 가져온다. 대문 페이지 역시 navbar와 footer을 추가하여 일관성 있게 해준다. landing.css 추가 후 페이지 조정 배경 화면에 쓸 이미지를 따로 폴더를 만들어 넣고 보기 좋게 하기 위해 css를 위한 폴더와 파일을 만든다. 여기서 background-size: cover을 입력하면 화면 크기에 맞춰 최대로 보이게 해준다. -webkit -moz -o는 다양한 브라우저에서 동일하게 작동하게 하기 위함이다. 태그에 의해 출력된 글자가 검정색인데 흰색으로 출력하게끔 하고 위치를 조정하기 위해 다음과 같이 한다. ● 대문에..

30. 검색 기능 구현

JavaSrcipt로 검색 기능 구현 포스트 목록, 포스트 상세 페이지 우측에서 검색 창이 작동하도록 구현 할 것이다. 보통 특정 URL로 접근시 서버에서 처리해 주는 방식은 python으로 하였으나 검색 창에서 사용자의 클릭이 아닌 직접 입력으로 입력된 값을 서버로 보내 원하는 값을 찾도록 하는 것은 javascript로 해야한다. base.html을 수정하여 검색 창 내용을 서버로 전달 script 부분에서 searchPost() 함수를 입력한다. id="search-input"으로 input 요소의 값을 가져와 함수에서 쓸 수 있도록 하고 onclick="searchPost"로 클릭시 searchPost() 함수를 실행 시키도록한다. searchPost() 함수의 document.getElement..

29. 사용자 아바타 구현

구글 아바타 설정 구글로 로그인 할 시 사용자가 설정해 놓은 아바타가 나오도록 설정한다. 아바타의 모양은 다음과 같다. models.py 파일 수정 get_avatar_url() 함수는 소셜 로그인을 한 경우 로그인한 계정의 아바타 URL을 가져온다. 그렇지 않을시 기존에 있던 placehold.it 이미지를 사용한다. post_detail.html 파일 수정 사용자 아바타가 보여야 하기 때문에 post_list 보다는 post_detail 부분이 적당할 것이다. 따라서 해당 파일인 post_detail.html에 Comment 모델에서 만든 get_avatar_url() 함수를 받아 아바타의 이미지를 받아온다. 이메일로 가입한 회원 아바타 설정 이 책의 저자가 운영하는 doitdjango.com/ava..