🏡
Instagram Clone Coding/
🧩
010 templates : 기본 layout
🧩

010 templates : 기본 layout

 
1. 레이아웃 개요2. layout.html 작성
 
페이지 화면이 어떻게 구성되어 있는지 살펴보면서 template, 기본 layout.html을 작성하겠습니다.
 

1. 레이아웃 개요

화면 상단에는 로고, 서치박스, 네비게이션 바가 있는 header 부분이 있습니다.
notion imagenotion image
 
여러 페이지들을 봤을 때, header 부분과 내용 부분으로 화면이 구성되는 것을 볼 수 있습니다.
notion imagenotion image
notion imagenotion image
notion imagenotion image
 
 
header 부분이 모든 페이지에서 동일하게 사용되고 있는 것을 알 수 있습니다. 따라서, header 페이지를 기본값으로 잡고 페이지에 따라서 내용 부분만 바꾸는 식으로 구현을 한다면 사이트를 운영하기 쉽고 디자이너와 소통하기 편할 것입니다.
 

2. layout.html 작성

그러면 이제 templates 폴더를 살펴보겠습니다. 폴더가 없으시다면 지금 만들어주시면 됩니다.
notion imagenotion image
 
templates에 대한 기본 설정은 settings.py 에서 아래와 같은 부분에서 templates 폴더의 경로를 지정해주었습니다.
notion imagenotion image
 
config/templates 의 경로로 지정했기 때문에 동일한 폴더명이어야 원하는 파일을 불러올 수 있습니다.
 
본격적으로 templates를 작성하기 앞서서 구름 IDE 코드 작성 모드를 Emmet 으로 바꾸겠습니다. HTML 파일을 작성할 때에 Emmet의 자동완성 기능을 활용하면 편리하게 코드를 작성할 수 있기 때문입니다.
 
화면 상단에 goormide 버튼을 누른 후, 기본 설정 항목을 선택합니다.
notion imagenotion image
 
아래와 같은 창이 나타났으면, 에디터 > 모드 항목을 선택합니다.
notion imagenotion image
 
모드 항목에서 기본 에디터 설정 부분을 기본에서 Emmet으로 바꾸겠습니다.
notion imagenotion image
 
Emmet 항목을 선택하고, 적용 후 창을 닫아주시면 됩니다.
notion imagenotion image
 
잘 적용되었으면 templates 폴더 밑에 전체 웹 사이트의 뼈대 역할을 하게 될 layout.html 을 작성하겠습니다.
 
파일을 생성합니다.
notion imagenotion image
notion imagenotion image
 
layout.html 파일을 작성하도록 하겠습니다. templates 파일을 작성하실 때에는 맨 상단에 static을 불러와야 합니다.
 
파일명 : static/templates/layout.html
{% load static %}
 
html:5 를 입력하고 tab 하거나, ! 를 입력하고 tab을 하면 Emmet에 의해 기본적인 HTML 코드가 완성됩니다.
 
파일명 : static/templates/layout.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
 
먼저, head 부분에서 title을 instaclone으로 수정합니다.
 
파일명 : static/templates/layout.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>instaclone</title>
</head>

...
 
link를 입력하고 tab을 한 뒤에 href 값을 채워주는 것으로 static 폴더에 있던 CSS 파일들을 연결하겠습니다. 인스타그램 이미지도 같이 연결합니다. 그리고 추후 다른 template의 head 내용이 추가될 수 있도록 head 블록 영역을 설정합니다.
 
파일명 : static/templates/layout.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>instaclone</title>

    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="shortcut icon" href="{% static 'imgs/instagram.png' %}">
    
    {% block head %}
    {% endblock %}
    
</head>

...
 
notion imagenotion image
 
이제 body 부분을 작성할 것입니다. 전체를 감싸는 container 아이디를 가진 section을 만듭니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container"></section>
</body>

...
 
notion imagenotion image
 
header라는 아이디를 가진 header를 하나 생성합니다. 이 부분에는 네비게이션이 들어갈 것입니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header"></header>
    </section>
</body>

...
 
블록을 잡아줍니다. 이 부분에는 페이지마다 다른 내용이 들어갈 것입니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header"></header>
        
        {% block content %}
        {% endblock %}
  
    </section>
</body>

...
 
notion imagenotion image
 
header 안에 h_inner를 클래스로 갖는 section을 만듭니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner"></section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>  
</body>

...
notion imagenotion image
 
 
section 안에 클래스가 logo인 h1 태그를 만듭니다. 인스타그램 로고가 있던 부분입니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo"></h1>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>
</body>

...
notion imagenotion image
 
 
h1 태그 안에 sprite_insta_icon 클래스를 가진 div 태그를 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                </h1>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>
</body>

...
 
notion imagenotion image
 
h1 태그 안에 div 태그를 하나 더 만들고 그 div 태그 안에 sprite_write_logo 클래스를 가진 div 태그를 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>                        
                </h1>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section> 
</body>

...
 
notion imagenotion image
 
다음으로 검색 창에 관한 코드를 작성하겠습니다. h1 태그가 속한 section 태그 안에 search_box을 클래스로 가진 div 태그를 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
								<div class="search_box"></div>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>
</body>

...
 
notion imagenotion image
 
div.search-box 안에 아이디가 search_field인 input 태그를 추가합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_box">
                    <input type="text" placeholder="검색" tabindex="0" id="search_field">
                </div>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>    
</body>
</html>
 
notion imagenotion image
 
search_field div 안에 fake_field를 클래스로 가지는 div 를 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_box">
                    <input type="text" placeholder="검색" tabindex="0" id="search_field">
                    <div class="fake_field"></div>
                </div>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>    
</body>
</html>
 
notion imagenotion image
 
fake_field div 안에 sprite_small_search_icon 클래스의 span 을 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_box">
                    <input type="text" placeholder="검색" tabindex="0" id="search_field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                    </div>
                </div>                        
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>    
</body>
</html>
 
notion imagenotion image
 
그리고 fake_field div 안에 span을 하나 생성하고 안에 검색이라고 작성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_field">
                    <input type="text" placeholder="검색" tabindex="0">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>                
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>   
</body>
</html>
 
notion imagenotion image
 
그리고 각 페이지로 이동할 아이콘들을 불러올 것입니다. 아이콘들을 감싸는 right_icons 클래스의 div를 생성합니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_field">
                    <input type="text" placeholder="검색" tabindex="0">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>
                <div class="right_icons"></div>
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>    
</body>
</html>
 
notion imagenotion image
 
아이콘들을 각각 불러와 줍니다. a 태그 안에는 일단 #을 채우도록 하겠습니다.
 
파일명 : static/templates/layout.html
...

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_field">
                    <input type="text" placeholder="검색" tabindex="0">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>
                <div class="right_icons">
                    <div class="sprite_camera_icon"><a href="#"></a></div>
                    <div class="sprite_compass_icon"><a href="#"></a></div>
                    <div class="sprite_heart_icon_outline"><a href="#"></a></div>
                    <div class="sprite_user_icon_outline"><a href="#"></a></div>
                </div>                
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>    
</body>
</html>
 
이렇게 기본적인 template layout을 작성해 보았습니다. 완성된 코드는 아래와 같습니다.
 
파일명 : static/templates/layout.html
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="stylesheet" href="{% static 'css/detail-page.css' %}">
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
    <link rel="stylesheet" href="{% static 'css/new_post.css' %}">
    <link rel="stylesheet" href="{% static 'css/profile.css' %}">
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

<body>
    <section id="container">
        <header id="header">
            <section class="h_inner">
                <h1 class="logo">
                    <div class="sprite_insta_icon"></div>
                    <div>
                        <div class="sprite_write_logo"></div>
                    </div>
                </h1>
                <div class="search_field">
                    <input type="text" placeholder="검색" tabindex="0">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>
                <div class="right_icons">
                    <div class="sprite_camera_icon"><a href="#"></a></div>
                    <div class="sprite_compass_icon"><a href="#"></a></div>
                    <div class="sprite_heart_icon_outline"><a href="#"></a></div>
                    <div class="sprite_user_icon_outline"><a href="#"></a></div>
                </div>     
            </section>
        </header>
        
        {% block content %}
        {% endblock %}
        
    </section>
</body>
</html>