작정하고 Django (10) - style, 구글 폰트를 통해 Header, Footer 꾸미기 : Django로 Pinterest 따라하기

header 꾸미기

큰 제목인 Euichan 을 h1 태그로 집어넣고
네비게이션 역할을 하는 nav1 ~ nav4를 각각의 span 태그로 넣는다.

header 부분을 가운데 정렬 해주기 위해 페이지의 개발자 도구에서 '스타일' 부분에서

text-align : center;

코드를 지정해주는 과정

footer 꾸미기

개발자도구 에서 진행한 가운데정렬을 코드에서 적용한다.

그리고 메뉴를 담당하는 "공지사항" "제휴문의" "서비스소개" 를 담당하는 span태그의 글자 크기를 재지정한다.

Euichan과 메뉴들의 간격을 지정해주는 margin-top 코드도 적용한다.

header부분과 중간부분, footer 부분의 공간분리를 위한 hr코드를 base.html에 작성한다.

header와 footer의 margin 설정

margin 값을 지정해줌으로써 header의 위, footer의 아래 공간이 조금 남게 된다.

Bootstrap 적용

bootstrap에서의 css 설정을 head.html에 적용한 결과.
(아직 크게 만든것이 없어서 별 차이가 없음)

header의 margin 값 재설정 - margin 값을 2개를 주어지면 앞은 상하, 뒤는 좌우 값이 적용됨.

Google font

google font에서 제목인 Euichan 을 검색하고 원하는 글씨체를 선택한다.
select this style 을 누르면 link 2개가 나온다.

head.html에 링크 2개중 위에 있는 링크를 가져와주고

적용하고자 하는 부분의 style에 아래에 있는 링크를 넣어준다.
(header의 제목 부분과 footer의 euichan에 해당하는 부분에 적용함)

Google font 적용 결과