Pre - 실습 코드 복사

반복적이거나 타이핑의 양이 많아 효율성을 저하시키는 코드를 모아 필요시 복사&붙여넣기할 수 있도록 준비하였습니다. 시간이 충분하다면 처음부터 끝까지 직접 타이핑하며 완성하는게 좋습니다. 주로 시간이 한정되어있는 스터디 중에 이용됩니다.
Stage 1 - 함께하는 페이스북 디자인
형태 잡기
강의자료 10page
newsfeed.html
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>뉴스피드</title>
</head>
​
<body>
    <style>
    </style>
    <div class="header">
        <div class="btn1">버튼1</div>
        <div class="search">
            <input type="text" class="searchbar" placeholder="Search">
        </div>
        <div class="btn2">버튼2</div>
    </div>
    <div class="container">
        내용물
    </div>
    <div class="footer">
        <div class="tab1">탭1</div>
        <div class="tab2">탭2</div>
        <div class="tab3">탭3</div>
        <div class="tab4">탭4</div>
    </div>
</body>
​
</html>
강의자료 11page
newsfeed.html의 style 부분
<style>
    .header {
        background-color: #475d9f;
        color: #fff;
    }
    .container {
        background-color: #d7d8dc;
    }
    .footer {
        background-color: gray;
    }
</style>
강의자료 13page
newsfeed.html의 style 부분
<style>
    .header {
        background-color: #475d9f;
        color: #fff;
        border-bottom: 1px solid #2c3863;
        height: 50px;
    }
    .btn1 {
        position: absolute;
        left: 10px;
    }
    .search {
        position: absolute;
        left: 100px;
        right: 100px;
   }
    .btn2 {
        position: absolute;
        right: 10px;
    }
    .container {
        background-color: #d7d8dc;
        height: 500px;
    }
    .footer {
        background-color: gray;
    }
</style>
강의자료 14page
newsfeed.html의 style 부분
<style>
    .header {
        background-color: #475d9f;
        color: #fff;
        border-bottom: 1px solid #2c3863;
        height: 50px;
    }
    .btn1 {
        position: absolute;
        left: 10px;
    }
    .search {
        position: absolute;
        left: 100px;
        right: 100px;
   }
    .btn2 {
        position: absolute;
        right: 10px;
    }
    .container {
        background-color: #d7d8dc;
        height: 500px;
    }
    .footer {
        border-top: 1px solid #cccccc;
        background-color: #ffffff;
        height: 50px;
    }
    .tab1 {
        float: left;
    }
    .tab2 {
        float: left;
    }
    .tab3 {
        float: left;
    }
    .tab4 {
        float: left;
    }
</style>
강의자료 15page
newsfeed.html의 style 부분
<style>
    .header {
        background-color: #475d9f;
        color: #fff;
        height: 50px;
        border-bottom: 1px solid #2c3863;
    }
    .btn1 {
        position: absolute;
        left: 10px;
    }
    .search {
        position: absolute;
        left: 100px;
        right: 100px;
    }
    .searchbar {
        border: 1px solid #2c3863;
        background-color: #323f6b;
    }
    .btn2 {
        position: absolute;
        right: 10px;
    }
    .container {
        background-color: #d7d8dc;
        height: 500px;
    }
    .footer {
        border-top: 1px solid #cccccc;
        background-color: #fafafa;
        height: 50px;
    }
    .tab1 {
        float: left;
    }
    .tab2 {
        float: left;
    }
    .tab3 {
        float: left;
    }
    .tab4 {
        float: left;
    }
</style>
현재까지 전체 코드
newsfeed.html
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>뉴스피드</title>
</head>
​
<body>
    <style>
        .header {
            background-color: #475d9f;
            color: #fff;
            height: 50px;
            border-bottom: 1px solid #2c3863;
        }
        .btn1 {
            position: absolute;
            left: 10px;
        }
        .search {
            position: absolute;
            left: 100px;
            right: 100px;
        }
        .searchbar {
            border: 1px solid #2c3863;
            background-color: #323f6b;
        }
        .btn2 {
            position: absolute;
            right: 10px;
        }
        .container {
            background-color: #d7d8dc;
            height: 500px;
        }
        .footer {
            border-top: 1px solid #cccccc;
            background-color: #fafafa;
            height: 50px;
        }
        .tab1 {
            float: left;
        }
        .tab2 {
            float: left;
        }
        .tab3 {
            float: left;
        }
        .tab4 {
            float: left;
        }
    </style>
    <div class="header">
        <div class="btn1">버튼1</div>
        <div class="search">
            <input type="text" class="searchbar" placeholder="Search">
        </div>
        <div class="btn2">버튼2</div>
    </div>
    <div class="container">
        내용물
    </div>
    <div class="footer">
        <div class="tab1">탭1</div>
        <div class="tab2">탭2</div>
        <div class="tab3">탭3</div>
        <div class="tab4">탭4</div>
    </div>
</body>
​
</html>
디테일 잡기
이미지 다운로드 후 facebook/static 폴더에 넣으셔야 합니다.
이미지 다운로드 http://bit.ly/2z4e1rt​
강의자료 17page
newsfeed.html
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>뉴스피드</title>
</head>
​
<body>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        .header {
            background-color: #475d9f;
            color: #fff;
            height: 42px;
            border-bottom: 1px solid #2c3863;
        }
        .btn1 {
            position: absolute;
            left: 0px;
        }
        .search {
            position: absolute;
            left: 50px;
            right: 50px;
        }
        .searchbar {
            border: 1px solid #2c3863;
            background-color: #323f6b;
            width: 100%;
            border-radius: 4px;
            padding: 6px; margin-top: 7px;
            color:#ffffff;
        }
        .btn2 {
            position: absolute;
            right: 0px;
        }
        .container {
            background-color: #d7d8dc;
            height: 500px;
        }
        .footer {
            border-top: 1px solid #cccccc;
            background-color: #fafafa;
            height: 50px;
        }
        .tab1 {
            float: left;
        }
        .tab2 {
            float: left;
        }
        .tab3 {
            float: left;
        }
        .tab4 {
            float: left;
        }
    </style>
    <div class="header">
        <div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
        <div class="search">
            <input type="text" class="searchbar" placeholder="Search">
        </div>
        <div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
    </div>
    <div class="container">
        내용물
    </div>
    <div class="footer">
        <div class="tab1">탭1</div>
        <div class="tab2">탭2</div>
        <div class="tab3">탭3</div>
        <div class="tab4">탭4</div>
    </div>
</body>
​
</html>
강의자료 18page
newsfeed.html
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>뉴스피드</title>
</head>
​
<body>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background-color: #d7d8dc; }
        .header {
            background-color: #475d9f;
            color: #fff;
            height: 42px;
            border-bottom: 1px solid #2c3863;
        }
        .btn1 {
            position: absolute;
            left: 0px;
        }
        .search {
            position: absolute;
            left: 50px;
            right: 50px;
        }
        .searchbar {
            border: 1px solid #2c3863;
            background-color: #323f6b;
            width: 100%;
            border-radius: 4px;
            padding: 6px; margin-top: 7px;
            color:#ffffff;
        }
        .btn2 {
            position: absolute;
            right: 0px;
        }
        .container {
            background-color: #d7d8dc;
        }
        .footer {
            border-top: 1px solid #cccccc;
            background-color: #fafafa;
            height: 50px;
            text-align: center;
            position:fixed; bottom: 0; left: 0; right: 0;
        }
        .tab1 {
            float: left;
            width: 25%;
        }
        .tab2 {
            float: left;
            width: 25%;
        }
        .tab3 {
            float: left;
            width: 25%;
        }
        .tab4 {
            float: left;
            width: 25%;
        }
    </style>
    <div class="header">
        <div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
        <div class="search">
            <input type="text" class="searchbar" placeholder="Search">
        </div>
        <div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
    </div>
    <div class="container">
        내용물
    </div>
    <div class="footer">
        <div class="tab1"><img src="/static/ic_feed.jpg" width="22px" style="margin-top: 15px"> </div>
        <div class="tab2"><img src="/static/ic_person.jpg" width="20px" style="margin-top: 14px"></div>
        <div class="tab3"><img src="/static/ic_globe.jpg" width="20px" style="margin-top: 14px"> </div>
        <div class="tab4"><img src="/static/ic_etc.jpg" width="20px" style="margin-top: 14px"></div>
    </div>
</body>
​
</html>
강의자료 19~20page
newsfeed.html
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>뉴스피드</title>
</head>
​
<body>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background-color: #d7d8dc; }
        .header {
            background-color: #475d9f;
            color: #fff;
            height: 42px;
            border-bottom: 1px solid #2c3863;
        }
        .btn1 {
            position: absolute;
            left: 0px;
        }
        .search {
            position: absolute;
            left: 50px;
            right: 50px;
        }
        .searchbar {
            border: 1px solid #2c3863;
            background-color: #323f6b;
            width: 100%;
            border-radius: 4px;
            padding: 6px; margin-top: 7px;
            color:#ffffff;
        }
        .btn2 {
            position: absolute;
            right: 0px;
        }
        .container {
            background-color: #d7d8dc;
        }
        .footer {
            border-top: 1px solid #cccccc;
            background-color: #fafafa;
            height: 50px;
            text-align: center;
            position:fixed; bottom: 0; left: 0; right: 0;
        }
        .tab1 {
            float: left;
            width: 25%;
        }
        .tab2 {
            float: left;
            width: 25%;
        }
        .tab3 {
            float: left;
            width: 25%;
        }
        .tab4 {
            float: left;
            width: 25%;
        }
        .feed {
            background-color: #ffffff;
            border-top: 1px solid #c0c0c0;
            border-bottom: 1px solid #c0c0c0;
            margin: 7px 0;
            padding: 12px;
        }
        .date {
            color: #999;
            margin-bottom: 10px;
        }
        .title {
            color: #6184dd;
            font-weight: 600;
        }
        .content {
            margin-top: 5px;
        }
        .accessory {
            border-top: 1px solid #eee;
            padding-top:10px;
            margin-top:10px;
            color: #999;
            font-size: 14px;
        }
    </style>
    <div class="header">
        <div class="btn1"><img src="/static/ic_pencil.jpg" width="22px" style="margin:9px 0 0 13px"></div>
        <div class="search">
            <input type="text" class="searchbar" placeholder="Search">
        </div>
        <div class="btn2"><img src="/static/ic_info.jpg" width="22px" style="margin:9px 13px 0 0"></div>
    </div>
    <div class="container">
        <div class="feed">
            <h3 class="name">이름</h3>
            <div class="date">날짜</div>
            <a class="title">글 제목</a>
            <p class="content">글 내용</p>
            <div class="accessory">
                <img src="/static/ic_like.jpg" width="16px"> Like <img src="/static/ic_comment.jpg" width="16px"> Comments
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="tab1"><img src="/static/ic_feed.jpg" width="22px" style="margin-top: 15px"> </div>
        <div class="tab2"><img src="/static/ic_person.jpg" width="20px" style="margin-top: 14px"></div>
        <div class="tab3"><img src="/static/ic_globe.jpg" width="20px" style="margin-top: 14px"> </div>
        <div class="tab4"><img src="/static/ic_etc.jpg" width="20px" style="margin-top: 14px"></div>
    </div>
</body>
​
</html>
Stage 2 - 게시글 모델링
장고의 모델링
models.py
from django.db import models
​
# Create your models here.
class Article(models.Model):
    author      = models.CharField(max_length=120)
    title       = models.CharField(max_length=120)
    text        = models.TextField()
    password    = models.CharField(max_length=120)
    created_at  = models.DateTimeField(auto_now_add=True)
​
    def __str__(self):
        return self.title
4주차 - 살아있는 뉴스피드 만들기
Stage 1 - 함께하는 페이스북 디자인
Last updated 2 years ago