header, main, footer로 구성된 baseline을 만들었고 이 포스팅에서는 footer와 header를 디자인하는 시간을 가져보았다. 디자인은 사이트 구성하는데 있어 필수적인 존재이다. 아무리 기능이 좋다한다 한들 디자인이 별로면 사이트를 찾는 사람들이 거의 없을 것이다. html문법도 장고를 하는데 있어 꼭 알아야 되겠다. 우선 웹사이트를 쉽게 만들 수 있게 만들어주는 프레임워크인 bootstrap을 불러왔다. bootstrap을 사용한다면 휴대폰, pc, 태블릿등 다양한 기기에서 작동하게 만들 수 있고 다양한 기능을 제공하여 쉽게 제작, 유지할 수 있다. html에서 사용하는 기본스타일(글꼴, 테이블,폰트)등을 제공한다.
head.html에 웹페이지를 구성할 bootstrap과 폰트를 불러왔다. 폰트는 구글에서 제공하는 gasoek One 이라는 글꼴을 사용했다. 구글폰트라고 검색해서 들어가면 복사가능한 html태그를 볼 수 있다. 밑에 사진은 불러온 코드다.
먼저 결과물부터 공개하겠다. 위 사진은 header 부분이다. 기본설정은 왼쪽정렬이지만 'text-align : center'으로 가운데정렬을 하였고 제목 스타일은 구글폰트 Gasoek One글꼴을 적용했다. 밑에 내용은 최대한 쇼핑몰사이트처럼 만들려고 구성했다. span 태그를 사용하였다. div과 다른 점이 span은 블록단위가 아닌 인라인 요소로 사용된다. 연속해서 사용할때 div는 줄바꿈이 되지만 span은 옆으로 붙고 div는 블록 형태로 구역을 정하지만 span은 문장 단위로 지정한다.
footer부분이다.
