Be a developer

인스타그램 따라하기 5 본문

Django

인스타그램 따라하기 5

중국고대사 2019. 3. 31. 19:02

instagram에 폰트를 적용하겠다.  구글 폰트를 이용하는데, 실제 instagram의 폰트인 billabong는 유료라서 다른 필기체 폰트를 하나 골라서 적용했다.

마음에 드는 폰트 아무거나 적용하면 된다.

폰트를 클릭하면 아래 빨간 박스가 뜬다.

아래와 같은 창이 뜨면 link 태그는 head 태그안에 넣고, font-family 속성은 style 태그 안에 적용하려는 css에 넣는다.

코드는 아래와 같다.

1
2
3
4
5
6
7
8
/*head 태그 안에 넣는다.*/
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
 
/*h1 태그에 폰트 적용 */
h1{
    display: inline;
    font-family: 'Dancing Script', cursive;
}
 cs

그 결과

(검색 창 안에 검색은 placeholde 속성으로 주었다.)

background-color 속성을 지우고 아래 코드를 추가하여 검색 창을 조금 바꾸었다.

1
2
3
4
        #search_input{
            border: solid 1px #dbdbdb;
            border-radius: 3px;
        }
 cs

그 결과

instagram을 보니까 내가 만든 navbar의 높이가 큰 것 같아서 margin값을 아래와 같이 수정했다.

1
2
3
4
        #search_input{
            border: solid 1px #dbdbdb;
            border-radius: 3px;
        }
 cs

이제 navbar 아래에 main div를 만들어 보겠다. (이후 navbar의 수정이 필요하면 추가적으로 수정하자)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    {% block content %}
        <div class="nav_container">
            <div class="left">
                <i id="insta_icon" class="fab fa-instagram"></i>
                <h1>instagram</h1>
            </div>
            <div class="search">
                <form class="search_form" action="{% url 'search' %}">
                    <input id="search_input" type="text" name="search" placeholder="검색">
                </form>
            </div>
            <div class="right">
                <i class="far fa-compass"></i>
                <i class="far fa-heart"></i>
                <i class="far fa-user"></i>
            </div>
        </div>
        <div class="main">
            <div class="main_left">
            </div>
            <div class="main_right">
 
            </div>
        </div>
    {% endblock content %}
</body>
 cs

main class div를 만들고 왼쪽 오른쪽을 나누어 준다.

아직 겉으로 보기에는 아무 변경사항이 없다.

예전에 썼던 사진을 재탕해서 박스가 쳐져 있는데 무시하자..

main div는 background-color가 조금 다르다. 그리고 개발자도구를 통해서 보면 div가 두 개로 나눠져 있다. 그래서 위의 코드에서 main_left, main_right로 나누었다.

그리고 nav bar와 main div 사이에 희미한 경계선이 보인다.(z-index를 주어서 하는 것인지, 실제 선을 만든 것인지 모르겠다. 코드를 봐도 모르겠다.. 그래서 그냥 border를 만들어주겠다. 아직 실력이 많이 부족하다..)

1
2
3
4
.main{
            background-color: #efefef;
            border-top: 1px solid #4a4a4a;
        }
 cs

border 선만 생기고, background-color가 먹히지 않았다.

div full screen으로 구글링을 해보니 아래와 같은 코드를 넣으라고 되어 있다.(자세한 설명은 여기 에서..)

1
2
3
4
5
6
7
8
        .main{
            background-color: #efefef;
            /*display: flex;
            flex-direction: row;*/
            border-top: 1px solid #4a4a4a;
            height: 100vh;
            width: 100vw;
        }
cs

사진으로는 잘 안보이지만 왼쪽 편에 흰 바탕의 공간이 남는다.. 매우 거슬린다.

개발자 도구를 통해 body를 보면 공간이 있다..

1
2
3
body{
            margin: 0;
        }
cs

그래서 body의 margin값을 0으로 주어서 꽉 찬 화면으로 만들었다.

'Django' 카테고리의 다른 글

인스타그램 따라하기 7  (0) 2019.04.03
인스타그램 따라하기 6  (0) 2019.04.02
인스타그램 따라하기 4  (0) 2019.03.25
인스타그램 따라하기 3  (0) 2019.03.25
인스타그램 따라하기 2  (0) 2019.03.25
'Django' Related Articles more
Comments