Be a developer

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

Django

인스타그램 따라하기 4

중국고대사 2019. 3. 25. 17:23

h4 태그에 instagram 글자를 넣었다.

그 결과


3줄로 바꼈다. 이유는 i tag는 inline element이고, div는 block element이기 때문이다. 

inline과 block element에 속하는 tag는 여기서 볼 수 있다. 설명은 여기서 볼 수 있다.

따라서 div를 inline으로 바꿔줘야 위의 모든 element가 한 줄에 들어갈 것이다.

일단 head 태그 안에 style 태그를 넣어서 css를 적용시켜 준다.

그 결과

한 줄로 잘 들어갔다.

다음으로는 instagram 글자 까지는 왼쪽에, 나머지 아이콘들은 오른쪽으로 이동시켜야 한다. 

따라서 두 개의 박스로 나눠준 후 큰 박스(div) 안에 넣어준다.


left div와 right div를 나눠주기 위해서는 flex를 이용한다.(flex가 layout을 하는 데 편하기 때문)

flex에 관해서는 생활코딩에서 보는 것을 추천.

우선 부모 div에 display를 flex로 해주고, 자식 div들의 거리를 같게 만들기 위해 justify-content의 값을 space-between으로 준다.

margin을 각각 주었고, div가 얼만큼의 공간을 차지하는지 보기 쉽게 background-color를 주었다.

i tag의 크기가 작아서 크게 만들기 위해서 font-size로 1.5rem을 주었다.(rem은 브라우저의 크기에 맞춰 변경되는 사이즈이다.)

i{
font-size: 1.5rem;
}


h4 태그도 키워서 h2 태그로 바꿔 준다.

margin은 아래에 필요 없어서 top, left, right에 1rem씩 준다.

<style>
.nav_container{
display: flex;
justify-content: space-between;
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
background-color: powderblue;
}
h2{
display: inline;
}
i{
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="nav_container">
<div class="left">
<i class="fab fa-instagram"></i><h2>instagram</h2>
</div>
<div class="right">
<i class="far fa-compass"></i>
<i class="far fa-heart"></i>
<i class="far fa-user"></i>
</div>
</div>
</body>

그 결과


빨간 박스를 보면 왼쪽의 element들과 높이가 맞지 않음. 그래서 민석이의 조언을 받아서 align-items 속성을 사용하여 맞춰주었다.

flex-end는 container의 제일 아래로 정렬하는 것.

.nav_container{

display: flex;
justify-content: space-between;
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
background-color: powderblue;
align-items: flex-end;
}

그 결과

위의 사진과 비교했을 때 보기 좋게 맞춰짐을 알 수 있다. 

하지만 인스타그램을 보면 각 아이콘의 거리가 더 벌어져 있다. 따라서 각 icon에 margin값을 줘서 거리를 벌린다.

i{
font-size: 1.5rem;
margin: 1rem;
}

그 결과

인스타그램을 보면 인스타그램 아이콘과 instagram 사이에 작대기가 있는데 처음에는 '|' 이걸로 처리하려고 했는데 민석이가 border로 넣으라고 해서 인정했다. 따라서 인스타그램 아이콘에 id값을 설정하고 border값을 주었다.

<div class="left">
<i id="insta_icon" class="fab fa-instagram"></i><h2>instagram</h2>
</div>


#insta_icon{
padding-right: 1rem;
border-right: 1px solid black;
}

그 결과

다음으로 가운데 검색창을 만들어 보겠다.

form 태그를 만들어주고, 검색 기능을 실행할 search view로 보낸다.

<div class="search">
<form action="{% url 'search' %}">
<input type="text" name="search">
</form>
</div>


home의 urls.py에 아래와 같이 추가시켜 준다.

form태그의 action에 템플릿 변수를 통해 주소를 지정해주었으나 url pattern에 없다면 error가 발생한다.

urlpatterns = [
path('',views.home, name='home'),
path('search/',views.search,name='search'),
]


home의 views.py도 수정한다. 아직은 구체적인 기능을 구현하지 않고, url을 통해 접속만 가능하도록 하겠다.

from django.shortcuts import render

# Create your views here.
def home(request):
return render(request, 'home/home.html')

def search(request):
pass


그냥 넣으니 아래 위 위치가 맞지 않아서

.search{
margin-bottom:1rem;
}


위치를 조금 지정해준 결과

.nav_container{
display: flex;
justify-content: space-between;
margin: 1rem 1rem 1rem 1rem;
padding-right: 12rem;
padding-left: 12rem;
background-color: powderblue;
align-items: flex-end;
}


전체적으로 가운데로 좀 더 모으기 위해서 padding 값을 좌우로 주었다. 그 결과


'Django' 카테고리의 다른 글

인스타그램 따라하기 6  (0) 2019.04.02
인스타그램 따라하기 5  (0) 2019.03.31
인스타그램 따라하기 3  (0) 2019.03.25
인스타그램 따라하기 2  (0) 2019.03.25
인스타그램 따라하기 1  (0) 2019.03.24
'Django' Related Articles more
Comments