Pre - 실습 코드 복사
반복적이거나 타이핑의 양이 많아 효율성을 저하시키는 코드를 모아 필요시 복사&붙여넣기할 수 있도록 준비하였습니다. 시간이 충분하다면 처음부터 끝까지 직접 타이핑하며 완성하는게 좋습니다. 주로 시간이 한정되어있는 스터디 중에 이용됩니다.

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

형태 잡기

강의자료 10page

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!

강의자료 11page

newsfeed.html의 style 부분
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!

강의자료 13page

newsfeed.html의 style 부분
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
.container {
22
background-color: #d7d8dc;
23
height: 500px;
24
}
25
.footer {
26
background-color: gray;
27
}
28
</style>
Copied!

강의자료 14page

newsfeed.html의 style 부분
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
.container {
22
background-color: #d7d8dc;
23
height: 500px;
24
}
25
.footer {
26
border-top: 1px solid #cccccc;
27
background-color: #ffffff;
28
height: 50px;
29
}
30
.tab1 {
31
float: left;
32
}
33
.tab2 {
34
float: left;
35
}
36
.tab3 {
37
float: left;
38
}
39
.tab4 {
40
float: left;
41
}
42
</style>
Copied!

강의자료 15page

newsfeed.html의 style 부분
1
<style>
2
.header {
3
background-color: #475d9f;
4
color: #fff;
5
height: 50px;
6
border-bottom: 1px solid #2c3863;
7
}
8
.btn1 {
9
position: absolute;
10
left: 10px;
11
}
12
.search {
13
position: absolute;
14
left: 100px;
15
right: 100px;
16
}
17
.searchbar {
18
border: 1px solid #2c3863;
19
background-color: #323f6b;
20
}
21
.btn2 {
22
position: absolute;
23
right: 10px;
24
}
25
.container {
26
background-color: #d7d8dc;
27
height: 500px;
28
}
29
.footer {
30
border-top: 1px solid #cccccc;
31
background-color: #fafafa;
32
height: 50px;
33
}
34
.tab1 {
35
float: left;
36
}
37
.tab2 {
38
float: left;
39
}
40
.tab3 {
41
float: left;
42
}
43
.tab4 {
44
float: left;
45
}
46
</style>
Copied!

현재까지 전체 코드

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
.header {
12
background-color: #475d9f;
13
color: #fff;
14
height: 50px;
15
border-bottom: 1px solid #2c3863;
16
}
17
.btn1 {
18
position: absolute;
19
left: 10px;
20
}
21
.search {
22
position: absolute;
23
left: 100px;
24
right: 100px;
25
}
26
.searchbar {
27
border: 1px solid #2c3863;
28
background-color: #323f6b;
29
}
30
.btn2 {
31
position: absolute;
32
right: 10px;
33
}
34
.container {
35
background-color: #d7d8dc;
36
height: 500px;
37
}
38
.footer {
39
border-top: 1px solid #cccccc;
40
background-color: #fafafa;
41
height: 50px;
42
}
43
.tab1 {
44
float: left;
45
}
46
.tab2 {
47
float: left;
48
}
49
.tab3 {
50
float: left;
51
}
52
.tab4 {
53
float: left;
54
}
55
</style>
56
<div class="header">
57
<div class="btn1">버튼1</div>
58
<div class="search">
59
<input type="text" class="searchbar" placeholder="Search">
60
</div>
61
<div class="btn2">버튼2</div>
62
</div>
63
<div class="container">
64
내용물
65
</div>
66
<div class="footer">
67
<div class="tab1">탭1</div>
68
<div class="tab2">탭2</div>
69
<div class="tab3">탭3</div>
70
<div class="tab4">탭4</div>
71
</div>
72
</body>
73
74
</html>
Copied!

디테일 잡기

이미지 다운로드 후 facebook/static 폴더에 넣으셔야 합니다.
이미지 다운로드 http://bit.ly/2z4e1rt

강의자료 17page

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
* { box-sizing: border-box; margin: 0; padding: 0; }
12
.header {
13
background-color: #475d9f;
14
color: #fff;
15
height: 42px;
16
border-bottom: 1px solid #2c3863;
17
}
18
.btn1 {
19
position: absolute;
20
left: 0px;
21
}
22
.search {
23
position: absolute;
24
left: 50px;
25
right: 50px;
26
}
27
.searchbar {
28
border: 1px solid #2c3863;
29
background-color: #323f6b;
30
width: 100%;
31
border-radius: 4px;
32
padding: 6px; margin-top: 7px;
33
color:#ffffff;
34
}
35
.btn2 {
36
position: absolute;
37
right: 0px;
38
}
39
.container {
40
background-color: #d7d8dc;
41
height: 500px;
42
}
43
.footer {
44
border-top: 1px solid #cccccc;
45
background-color: #fafafa;
46
height: 50px;
47
}
48
.tab1 {
49
float: left;
50
}
51
.tab2 {
52
float: left;
53
}
54
.tab3 {
55
float: left;
56
}
57
.tab4 {
58
float: left;
59
}
60
</style>
61
<div class="header">
62
<div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
63
<div class="search">
64
<input type="text" class="searchbar" placeholder="Search">
65
</div>
66
<div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
67
</div>
68
<div class="container">
69
내용물
70
</div>
71
<div class="footer">
72
<div class="tab1">탭1</div>
73
<div class="tab2">탭2</div>
74
<div class="tab3">탭3</div>
75
<div class="tab4">탭4</div>
76
</div>
77
</body>
78
79
</html>
Copied!

강의자료 18page

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
* { box-sizing: border-box; margin: 0; padding: 0; }
12
body { background-color: #d7d8dc; }
13
.header {
14
background-color: #475d9f;
15
color: #fff;
16
height: 42px;
17
border-bottom: 1px solid #2c3863;
18
}
19
.btn1 {
20
position: absolute;
21
left: 0px;
22
}
23
.search {
24
position: absolute;
25
left: 50px;
26
right: 50px;
27
}
28
.searchbar {
29
border: 1px solid #2c3863;
30
background-color: #323f6b;
31
width: 100%;
32
border-radius: 4px;
33
padding: 6px; margin-top: 7px;
34
color:#ffffff;
35
}
36
.btn2 {
37
position: absolute;
38
right: 0px;
39
}
40
.container {
41
background-color: #d7d8dc;
42
}
43
.footer {
44
border-top: 1px solid #cccccc;
45
background-color: #fafafa;
46
height: 50px;
47
text-align: center;
48
position:fixed; bottom: 0; left: 0; right: 0;
49
}
50
.tab1 {
51
float: left;
52
width: 25%;
53
}
54
.tab2 {
55
float: left;
56
width: 25%;
57
}
58
.tab3 {
59
float: left;
60
width: 25%;
61
}
62
.tab4 {
63
float: left;
64
width: 25%;
65
}
66
</style>
67
<div class="header">
68
<div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
69
<div class="search">
70
<input type="text" class="searchbar" placeholder="Search">
71
</div>
72
<div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
73
</div>
74
<div class="container">
75
내용물
76
</div>
77
<div class="footer">
78
<div class="tab1"><img src="/static/ic_feed.jpg" width="22px" style="margin-top: 15px"></div>
79
<div class="tab2"><img src="/static/ic_person.jpg" width="20px" style="margin-top: 14px"></div>
80
<div class="tab3"><img src="/static/ic_globe.jpg" width="20px" style="margin-top: 14px"></div>
81
<div class="tab4"><img src="/static/ic_etc.jpg" width="20px" style="margin-top: 14px"></div>
82
</div>
83
</body>
84
85
</html>
Copied!

강의자료 19~20page

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
* { box-sizing: border-box; margin: 0; padding: 0; }
12
body { background-color: #d7d8dc; }
13
.header {
14
background-color: #475d9f;
15
color: #fff;
16
height: 42px;
17
border-bottom: 1px solid #2c3863;
18
}
19
.btn1 {
20
position: absolute;
21
left: 0px;
22
}
23
.search {
24
position: absolute;
25
left: 50px;
26
right: 50px;
27
}
28
.searchbar {
29
border: 1px solid #2c3863;
30
background-color: #323f6b;
31
width: 100%;
32
border-radius: 4px;
33
padding: 6px; margin-top: 7px;
34
color:#ffffff;
35
}
36
.btn2 {
37
position: absolute;
38
right: 0px;
39
}
40
.container {
41
background-color: #d7d8dc;
42
}
43
.footer {
44
border-top: 1px solid #cccccc;
45
background-color: #fafafa;
46
height: 50px;
47
text-align: center;
48
position:fixed; bottom: 0; left: 0; right: 0;
49
}
50
.tab1 {
51
float: left;
52
width: 25%;
53
}
54
.tab2 {
55
float: left;
56
width: 25%;
57
}
58
.tab3 {
59
float: left;
60
width: 25%;
61
}
62
.tab4 {
63
float: left;
64
width: 25%;
65
}
66
.feed {
67
background-color: #ffffff;
68
border-top: 1px solid #c0c0c0;
69
border-bottom: 1px solid #c0c0c0;
70
margin: 7px 0;
71
padding: 12px;
72
}
73
.date {
74
color: #999;
75
margin-bottom: 10px;
76
}
77
.title {
78
color: #6184dd;
79
font-weight: 600;
80
}
81
.content {
82
margin-top: 5px;
83
}
84
.accessory {
85
border-top: 1px solid #eee;
86
padding-top:10px;
87
margin-top:10px;
88
color: #999;
89
font-size: 14px;
90
}
91
</style>
92
<div class="header">
93
<div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
94
<div class="search">
95
<input type="text" class="searchbar" placeholder="Search">
96
</div>
97
<div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
98
</div>
99
<div class="container">
100
<div class="feed">
101
<h3 class="name">이름</h3>
102
<div class="date">날짜</div>
103
<a class="title">글 제목</a>
104
<p class="content">글 내용</p>
105
<div class="accessory">
106
<img src="/static/ic_like.jpg" width="16px"> Like <img src="/static/ic_comment.jpg" width="16px"> Comments
107
</div>
108
</div>
109
</div>
110
<div class="footer">
111
<div class="tab1"><img src="/static/ic_feed.jpg" width="22px" style="margin-top: 15px"></div>
112
<div class="tab2"><img src="/static/ic_person.jpg" width="20px" style="margin-top: 14px"></div>
113
<div class="tab3"><img src="/static/ic_globe.jpg" width="20px" style="margin-top: 14px"></div>
114
<div class="tab4"><img src="/static/ic_etc.jpg" width="20px" style="margin-top: 14px"></div>
115
</div>
116
</body>
117
118
</html>
Copied!

Stage 2 - 게시글 모델링

장고의 모델링

models.py
1
from django.db import models
2
3
# Create your models here.
4
class Article(models.Model):
5
author = models.CharField(max_length=120)
6
title = models.CharField(max_length=120)
7
text = models.TextField()
8
password = models.CharField(max_length=120)
9
created_at = models.DateTimeField(auto_now_add=True)
10
11
def __str__(self):
12
return self.title
Copied!
Last modified 3yr ago