인스타그램 따라하기 3

html, css를 통해 페이지를 만들려면 우선 인스타그램의 layout을 분석해야 한다.

일단 상단의 navbar가 보인다. 스크롤을 내려도 고정되어 있는 것을 볼 수 있다. 그리고 아이콘 몇 개와 인스타그램 글자, 검색창이 보인다.

그리고 다른 페이지로 넘어가도 항상 있다. 따라서 모든 페이지에 공통적으로 적용되는 부분이라고 할 수 있다.

이렇게 공통적인 부분은 템플릿 상속을 통해 구현한다.

상속을 위해서 먼저 상속되는 파일들을 담을 공간을 만든다. 아래와 같이 home app과 같은 계층에 폴더를 만든다. 그 안에 상속될 base.html 파일을 만들어 준다.

그리고 상속 받을 home.html에서 아래와 같이 템플릿 태그안에서 extends를 통해 상속받는다. 

block content와 endblock content 사이에 해당 파일의 내용을 넣으면 된다.

그러면 어떻게 base.html이라는 템플릿을 읽어 오는 것인가. 아무 설정없이 가져올 순 없을 것이다.

따라서 settings.py로 가서 TEMPLATES라는 이름의 list를 찾는다.

DIRS의 값으로 os.path.join(BASE_DIR, 'templates')를 넣어준다. 이렇게 경로를 지정해 주기 때문에 home.html에서 템플릿을 상속받을 수 있는 것이다.

이제 base.html을 본격적으로 만들어 보겠다.

먼저 아이콘들이 필요할 것 같다. 그래서 fontawesome에서 아이콘을 가져와 쓰도록 하겠다.

Start Using Free를 클릭

보이는 link tag를 아래와 같이 head tag안에 넣어준다.

vscode에서 !를 치고 tab을 누르면 기본 html 태그들이 자동완성된다.

이제부터 fontawesome을 통해서 아이콘을 가져온 후 html 파일에 표시해 줄 것이다.

insta를 검색해서 아이콘을 찾는다. 진한 색은 무료로 사용할 수 있다.

아이콘을 클릭해 들어간 뒤 Start Using This Icon을 클릭하면 아래와 같은 화면이 보인다.

i tag를 복사하여 코드에 넣어본다.

서버가 실행중이면 페이지를 새로고침하고, 실행중이지 않으면 서버를 실행시켜 확인한다.

왼쪽 상단에 조그맣게 아이콘이 들어간 모습을 볼 수 있다.

나머지 아이콘도 넣어준다.

아래는 결과.