Stage 1 - 함께하는 페이스북 디자인 - FACEBOOK 함께 만들며 배우는  웹개발 스터디

Search…

Stage 1 - 함께하는 페이스북 디자인

페이스북 레이아웃 잡기
레이아웃은 웹사이트의 구조 배치를 말합니다. 가장 기본적인 틀을 말하는거죠. 레이아웃을 탄탄히 잡고 거기에 디자인을 덧붙이면 보기좋은 웹사이트가 나오는거죠.
최종 목표
저희는 위와 같은 웹페이지를 만들어 볼 것 입니다. (꽤나 페이스북 같죠?) 하지만 처음부터 저 모양을 완성하려고 하면 굉장히 어려워요. 아주 간단한 것부터 디테일한 방향으로 천천히 만들어나가는게 해답입니다.
그림을 그린다고 생각해볼까요? 사람을 그릴때 갑자기 눈부터 그리진 않죠. 얼굴형을 잡고 턱을 세우고 머리카락을 배치하면서 점점 디테일 한 작업으로 나아갑니다. 그렇게 눈의 위치가 잡히면 그제서야 눈동자를 그릴 수 있는거죠.
그림을 그리는 순서
웹페이지를 만드는 순서도 이와 같습니다. 왕도가 없어요. 쉬운것부터 천천히 어려운것으로 나아가는거죠.
웹페이지를 만드는 순서
분석
지난 2주차에서 2단 레이아웃을 배운적이 있습니다.
과제로 레이아웃 만들기를을 연습하면서 페이스북의 틀을 만들어보기도 했어요.
이번 시간에는 이렇게 만들어야 합니다.
목표
틀
분석
이 자료들을 보면서 나름의 계획을 짜봅시다. 머릿속으로 작업순서라도 그려보세요. 한결 수월해집니다.
실습
형태 잡기
1. 우선 127.0.0.1:8000/으로 연결되는 페이지를 만듭니다. (즉 첫페이지 접속시)
urls.py
1
from django.contrib import admin
2
from django.urls import path
3
​
4
from facebook.views import play
5
from facebook.views import play2
6
from facebook.views import my_profile
7
from facebook.views import event
8
from facebook.views import fail, help, warn
9
from facebook.views import newsfeed
10
​
11
urlpatterns = [
12
    path('admin/', admin.site.urls),
13
​
14
    path('play/', play),
15
    path('play2/', play2),
16
    path('dogeunchoi/profile/', my_profile),
17
    path('event/', event),
18
    path('fail/', fail),
19
    path('help/', help),
20
    path('warn/', warn),
21
​
22
    path('', newsfeed),
23
​
24
]
Copied!
views.py
1
# 위쪽 생
2
​
3
def newsfeed(request):
4
    return render(request, 'newsfeed.html')
Copied!
2. 간단하게 div만으로 형태를 잡습니다.
newsfeed.html
1
<!DOCTYPE html>
2
<html>
3
​
4
<head>
5
    <meta charset="utf-8">
6
    <title>뉴스피드</title>
7
</head>
8
​
9
<body>
10
    <style>
11
    </style>
12
    <div class="header">
13
        <div class=“btn1">버튼1</div>
14
        <div class="search">
15
            <input type="text" class="searchbar" placeholder="Search">
16
        </div>
17
        <div class="btn2">버튼2</div>
18
    </div>
19
    <div class="container">
20
        내용물
21
    </div>
22
    <div class="footer">
23
        <div class="tab1">탭1</div>
24
        <div class="tab2">탭2</div>
25
        <div class="tab3">탭3</div>
26
        <div class="tab4">탭4</div>
27
    </div>
28
</body>
29
​
30
</html>
Copied!
3. 잘 만들어졌는지 확인할 수 있도록 style 부분을 수정하여 각 div에 배경색을 넣어줍니다.
newsfeed.html
1
<style>
2
    .header {
3
        background-color: #475d9f;
4
        color: #fff;
5
    }
6
    .container {
7
        background-color: #d7d8dc;
8
    }
9
    .footer {
10
        background-color: gray;
11
    }
12
</style>
Copied!
4. 결과를 확인하고 이제부터 본격적으로 css 조정작업을 진행합니다.
5. 가운데 위치한 회색 박스(내용물), 즉 .container 클래스를 가진 div의 높이를 500px로 지정해줍니다.
newsfeed.html
1
.container {
2
    background-color: #d7d8dc;
3
    height: 500px;
4
}
Copied!
새로고침 후 아래와 같은 결과를 확인합니다.
결과
6. .header안에 있는 버튼1, search, 버튼2 요소들이 한줄에 오도록 만들어줍니다.
이때 float:left, float:right을 사용해 띄워줄 수도 있고, position:absolute을 사용해 위치를 지정해줄 수도 있으며, dispaly:inline-block으로 한줄에 오게할 수 있습니다. 이번에는 position:absolute을 사용합니다.
position:absolute 사용시 주의할 점
주의할 점은 같은 div 안에 있는 모든 요소가 absolute일 때 그 div에 반드시 높이값을 지정해야 한다는 것 입니다. absolute은 공중에 떠있는 상태기 때문에 안 쪽의 모든 요소가 absolute라면 내용물이 없다고 판단하여 높이가 0이 되기 때문입니다.
a) .header 내의 모든 요소가 float:left이면서 높이값 없을 때
의도하지 않은 결과
newsfeed.html
1
<style>
2
    .header {
3
        background-color: #475d9f;
4
        color: #fff;
5
        border-bottom: 1px solid #2c3863;
6
    }
7
    .btn1 {
8
        position: absolute;
9
        left: 10px;
10
    }
11
    .search {
12
        position: absolute;
13
        left: 100px;
14
        right: 100px;
15
    }
16
    .btn2 {
17
        position: absolute;
18
        right: 10px;
19
    }
20
​
21
    /* 이하 생략 */
Copied!
b) .header에 높이값을 지정했을 때
의도한 결과
newsfeed.html
1
<style>
2
    .header {
3
        background-color: #475d9f;
4
        color: #fff;
5
        border-bottom: 1px solid #2c3863;
6
        height: 50px;
7
    }
8
    .btn1 {
9
        position: absolute;
10
        left: 10px;
11
    }
12
    .search {
13
        position: absolute;
14
        left: 100px;
15
        right: 100px;
16
   }
17
    .btn2 {
18
        position: absolute;
19
        right: 10px;
20
    }
21
​
22
    /* 이하 생략 */
Copied!
7. 이번에는 float:left 방식으로 .footer안에 있는 탭1, 탭2, 탭3, 탭4가 한줄에 오도록 만들어줍니다.
float 사용시에도 div 안에 있는 모든 요소가 float일 때 그 height 값을 지정해주어야 합니다. 이유는 같습니다.
newsfeed.html
1
<style>
2
    /* …생략 */
3
​
4
    .footer {
5
        border-top: 1px solid #cccccc;
6
        background-color: #ffffff;
7
        height: 50px;
8
    }
9
    .tab1 {
10
        float: left;
11
    }
12
    .tab2 {
13
        float: left;
14
    }
15
    .tab3 {
16
        float: left;
17
    }
18
    .tab4 {
19
        float: left;
20
    }
21
</style>
Copied!
8. 이제 검색창을 수정해보겠습니다. 테두리를 넣고 배경을 넣어줘야합니다.
newsfeed.html
1
.searchbar {
2
    border: 1px solid #2c3863;
3
    background-color: #323f6b;
4
}
Copied!
border의 색상은 background-color 보다 좀 더 진한색을 선택합니다. 다음 색상표를 이용하셔도 좋습니다.
새로고침 후 변경된 검색창을 확인하실 수 있습니다.
9. .header 박스 아래쪽만 테두리를 주고, .footer 박스 색상을 #fafafa로 변경한 뒤 위쪽으로만 테두리를 만들어 줍니다.
newsfeed.html
1
.header {
2
    background-color: #475d9f;
3
    color: #fff;
4
    height: 50px;
5
    border-bottom: 1px solid #2c3863;
6
}
7
.footer {
8
    border-top: 1px solid #cccccc;
9
    background-color: #fafafa;
10
    height: 50px;
11
}
Copied!
결과
디테일 잡기
실습을 위해 미리 다운받으실 이미지가 있습니다.
이미지 다운로드​
1. 상단부부터 세밀하게 조정해봅시다.
style 가장 상단에 * { box-sizing: border-box; margin: 0; padding: 0; } 이라고 입력해줍니다 (사이즈를 가장 쉽게 조절하게 해주는 규칙을 적용. 관례적.)
검색창(.searchbar)의 크기를 100%로 만들고 border-radius: 4px; 속성을 이용해 모서리를 둥글게 해줍니다.
상단 높이를 50px에서 42px로 줄여줍니다.
.serachbar에 padding: 6px; margin-top: 7px; 속성을 넣어 정가운데 위치하게 해줍니다.
.search의 left와 right 값을 줄여 검색창의 크기를 키워줍니다. .btn1과 .btn2의 left, right 값은 0으로 줄여줍니다.
검색키워드의 색을 바꾸기 위해 .searchbar에 color:#ffffff도 입력해줍니다.
다운받은 이미지들을 static 폴더안에 넣은 후, 버튼1을 <img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px">로 변경해줍니다.
결과
2. 하단부의 탭을 조정해봅시다.
.tab1, .tab2, .tab3, .tab4 style에 width:25% 를 넣어줍니다.
가운데 정렬을 하기 위해 .footer에 text-align: center;를 넣어줍니다.
탭1을 <img src="/static/ic_feed.jpg" width="22px" style="margin-top: 15px”>
탭2를 <img src="/static/ic_person.jpg" width="20px" style="margin-top: 14px”>
탭3를 <img src="/static/ic_globe.jpg" width="20px" style="margin-top: 14px">
탭4를 <img src="/static/ic_etc.jpg" width="20px" style="margin-top: 14px"> 이미지로 각각 변경해줍니다.
.footer에 position:fixed; bottom: 0; left: 0; right: 0; 속성을 추가해줍니다.
.container의 height을 삭제합니다.
style 최상단에 body { background-color: #d7d8dc; }를 추가합니다.
결과
현재까지 작성한 스타일시트는 아래와 같습니다.
newsfeed.html
1
<style>
2
    body { background-color: #d7d8dc; }
3
    * { box-sizing: border-box; margin: 0; padding: 0; }
4
    .header {
5
        background-color: #475d9f;
6
        color: #fff;
7
        height: 42px;
8
        border-bottom: 1px solid #2c3863;
9
    }
10
    .btn1 {
11
        position: absolute;
12
        left: 0px;
13
    }
14
    .search {
15
        position: absolute;
16
        left: 50px;
17
        right: 50px;
18
    }
19
    .btn2 {
20
        position: absolute;
21
        right: 0px;
22
    }
23
    .searchbar {
24
        border: 1px solid #2c3863;
25
        background-color: #323f6b;
26
        width: 100%;
27
        padding: 6px;
28
        margin-top: 7px;
29
        border-radius: 4px;
30
        color: #fff;
31
    }
32
​
33
    .container {
34
        background-color: #d7d8dc;
35
    }
36
    .footer {
37
        position: fixed;
38
        bottom: 0;
39
        left: 0;
40
        right: 0;
41
        border-top: 1px solid #cccccc;
42
        background-color: #ffffff;
43
        height: 50px;
44
        background-color: #fafafa;
45
        text-align: center;
46
    }
47
    .tab1 {
48
        float: left;
49
        width: 25%;
50
    }
51
    .tab2 {
52
        float: left;
53
        width: 25%;
54
    }
55
    .tab3 {
56
        float: left;
57
        width: 25%;
58
    }
59
    .tab4 {
60
        float: left;
61
        width: 25%;
62
    }
63
    .date {
64
        color: #999;
65
        margin-bottom: 10px;
66
    }
67
    .title {
68
        color: #6184dddd;
69
        font-weight: 600;
70
    }
71
    .content {
72
        margin-top: 5px;
73
    }
74
    .accessory {
75
        border-top: 1px solid #eee;
76
        padding-top:10px;
77
        margin-top:10px;
78
        color: #999;
79
        font-size: 14px;
80
    }
81
​
82
</style>
Copied!
3. 안쪽 피드를 만들어봅시다.
newsfeed.html
1
<div class="container">
2
    <div class="feed">
3
        <h3 class="name">이름</h3>
4
        <div class="date">날짜</div>
5
        <a class="title">글 제목</a>
6
        <p class="content">글 내용</p>
7
        <div class="accessory">
8
            <img src="/static/ic_like.jpg" width="16px"> Like <img src="/static/ic_comment.jpg" width="16px"> Comments
9
        </div>
10
    </div>
11
</div>
Copied!
위 코드처럼 안쪽 일부만 수정해주세요.
결과
4. 안쪽 피드의 스타일을 조정합니다.
이제 스타일을 입혀봅시다.
newsfeed.html
1
.feed {
2
    background-color: #ffffff;
3
    border-top: 1px solid #c0c0c0;
4
    border-bottom: 1px solid #c0c0c0;
5
    margin: 7px 0;
6
    padding: 12px;
7
}
Copied!
이 간단한 코드만으로도 제법 페이스북의 모습이 갖춰집니다.
5. 피드의 글자 관련 스타일도 변경해봅시다.
newsfeed.html
1
.date {
2
    color: #999;
3
    margin-bottom: 10px;
4
}
5
.title {
6
    color: #6184dddd;
7
    font-weight: 600;
8
}
9
.content {
10
    margin-top: 5px;
11
}
12
.accessory {
13
    border-top: 1px solid #eee;
14
    padding-top:10px;
15
    margin-top:10px;
16
    color: #999;
17
    font-size: 14px;
18
}
Copied!
결과
6. <div class=“feed”>~~~</div>를 복사해서 한번 더 붙여넣어 봅시다.
newsfeed.html
1
<div class="container">
2
    <div class="feed">
3
        <h3 class="name">이름</h3>
4
        <div class="date">날짜</div>
5
        <a class="title">글 제목</a>
6
        <p class="content">글 내용</p>
7
        <div class="accessory">
8
            <img src="/static/ic_like.jpg" width="16px"> Like <img src="/static/ic_comment.jpg" width="16px"> Comments
9
        </div>
10
    </div>
11
    <div class="feed">
12
        <h3 class="name">이름</h3>
13
        <div class="date">날짜</div>
14
        <a class="title">글 제목</a>
15
        <p class="content">글 내용</p>
16
        <div class="accessory">
17
            <img src="/static/ic_like.jpg" width="16px"> Like <img src="/static/ic_comment.jpg" width="16px"> Comments
18
        </div>
19
    </div>
20
</div>
Copied!
결과