파이썬 유치원 (어린이반)

1 파이썬 유치원

파이썬 유치원은 유튜브 채널 김왼손의 왼손코딩에서 구독자와 함께 진행하는 프로젝트입니다. 프로젝트 기간 동안 스스로 학습하면서 나만의 프로그램을 만들어 봅니다. 파이썬 유치원 1기는 2020년 5월 1일부터 31일까지 한달 동안 진행합니다.

파이썬 유치원에는 강의가 없습니다. 사실 강의만 들어서는 머리에 남는 게 없습니다. 직접 만들어 봐야 합니다. 모든 분야가 그렇겠지만 코딩은 더욱 그렇습니다. 이제 강의는 그만 듣고 직접 만들어 봅시다. 모든 정보는 유튜브와 구글에 있으니까요. 파이썬 유치원에서는 방향과 방법을 함께 고민합니다. 유치원 선생님은 아이가 하고 싶은 대로 자유롭게 두면서 아이가 흥미를 잃지 않게, 다치지 않게 옆에서 도와줍니다. 파이썬 유치원에서의 김왼손은 그런 역할입니다.

파이썬 유치원의 모든 진행 상황은 유튜브 채널 김왼손의 왼손코딩에서 공유합니다. 매주 토요일 저녁 유튜브 라이브에서 어떻게 하고 있는지 함께 살펴보고 어려움이 있다면 함께 고민합니다. 각자의 진행 내용은 제타위키의 파이썬 유치원 문서에서 공유합니다. 진행 내용을 공유하고 서로 의견을 나눌 수 있습니다.

파이썬 유치원 어린이반은 파이썬이나 코딩을 어느정도 배웠고 프로그램을 만들어 본적인 있는 분들을 대상으로 합니다.

2 제타위키 사용법

3 어린이반 친구들

3.1 GreenElf

3.1.1 설명

유트브에서 볼려던 영상을 기억할 수 있도록 저장,유트브를 얼마나 볼지 설정,표시 vs studio code 사용 dev ed 참고함(코딩계 퓨디파이)단점:영어

3.1.2 코드

import tkinter as tk
from tkinter import*
from tkinter import messagebox
from tkinter import Text
root = tk.Tk()
root.title("유트브 도우미 1.0")
root.geometry("400x400")
 
butima1=PhotoImage(file="hey.png")

def intro_message():
     messagebox.showinfo("유트브 도우미1.0에 대하여",message="설명")
#패트리온 계정 만들고 설명쓰기...
firsL=Entry(root,font = ("굴림",12))

messagebox.showinfo("안녕하세요","이런식으로 사용")
 #여기에다 부연설명

btn = Button(root,image=butima1)
btn.pack()
btn.place(x=20, y=30)


intro=Button(root,text ="설명",bg="white",width="3",height=1,command=intro_message)
intro.pack()


root.mainloop()

3.2 _ Starry8004

3.2.1 설명

웹 크롤링

으아니 웨 ㅈㅔ가 어린이반이지유? ;ㅁ; 열띠미 해보게뜸미다

3.2.2 코드

print('안녕 토끼야!')
from bs4 import BeautifulSoup
from urllib.request import urlopen

response = urlopen('https://www.naver.com/')
soup = BeautifulSoup(response, 'html.parser')
i = 1
f = open("새파일.txt", 'w')
for anchor in soup.select("span.keyword"):
    data = (str(i) + "위 : " + anchor.get_txt() + "\n"
i=i+1
f.write(data)
f.close()

3.2.3 github

https://github.com/starry8004

3.3 white tree

3.3.1 설명

음악,알림등 기능이 있는 디스코드 봇을 만들고싶어요.

3.3.2 GitHub

https://github.com/Deva125/discrod-bot

3.4 안기웅

3.4.1 About Me

안녕하세요. 비전공자 딸바보 아빠입니다.
저는 전산쟁이 9년차이고요.
프로그래밍은 깊게 안들어가봤어요.
저는 저희 아기 사진 블로그를 만들고 싶습니다.
현재 장고를 공부하고 있습니다.
제 포트폴리오는 아래와 같습니다.

3.4.2 Django Important Notes

  • MVC(Model - View - Controller)
  • MVT(Model - View - Template)
  • Model : models.py
  • View : views.py
  • Template : settings.py
  • URL 정의 : urls.py
  • 로직 정의 : views.py
  • APP 추가 후 settings.py 에 추가를 해야된다.
 그러나 APP를 추가 할때 따로 변수로 빼주고 거기에 넣어주면 좋다.
INSTALLED_APPS += [
    'blog.apps.BlogConfig',                              # blog app 추가
]
  • ImageField를 사용할려면 pillow를 설치해야된다..
pip install pillow
  • ALLOWED_HOSTS  : 루트URL
  • 배포시 DEBUG는 False로
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
  • URLconf : 장고에서 URL과 일치하는 뷰를 찾기 위한 패턴들의 집합
  • static files : 개발 리소스 로서의 정적인 파일 (js, css, image etc)
  • media files : 유저가 업로드 한 모든 정적인 파일 (image, pdf etc)

3.4.3 Django Tutorial

3.4.4 Basic Setting

  • 가상 환경 설정
python -m venv venv
  • django 설치
pip install django
  • django 버전 확인
python -m django --version

3.4.5 Git Setting

  • gitignore 설정

https://developer-ankiwoong.tistory.com/837

  • git 생성

https://github.com/ankiwoong/python_kindergarten

  • git 연결
git remote add orign https https://github.com/ankiwoong/python_kindergarten.git
git remote -v

3.4.6 Project

  • 프로젝트 생성
django-admin startproject anjia .
  • runserver 테스트
python manage.py runserver
  • App 생성
python manage.py startapp blog
  • anjia > settings.py
ALLOWED_HOSTS = ['*']                      # 루트 URL

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

INSTALLED_APPS += [
    'blog.apps.BlogConfig',
]

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

LANGUAGE_CODE = 'ko-kr'         # 언어 : 한국

TIME_ZONE = 'Asia/Seoul'        # 타임존 : 한국 시간(기본 : UTC(세계표준시))
  • 데이터베이스에 변경 필요 사항 추출
python manage.py makemigrations
  • 데이터베이스에 변경사항 반영
python manage.py migrate
  • 관리자 생성
python manage.py createsuperuser
  • Admin 확인
http://127.0.0.1:8000/admin/
  • anjia > urls.py
"""anjia URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import include
from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static


# http://localhost:8000/ => http://localhost:8000/blog
urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
    path('', RedirectView.as_view(url='/blog/', permanent=True)),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)     # staic 정적 파일 처리
  • blog > urls.py
from django.urls import path
from blog import views

# url 처리규칙
urlpatterns = [
    path('', views.index, name='index'),
]
  • blog > views.py
from django.shortcuts import render

# Create your views here.


def index(req):
    context = {

    }

    return render(req, 'index.html', context=context)
  • templates > index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TEST BLOG</title>
  </head>
  <body>
    <h1>Hello My TEST BLOG</h1>
  </body>
</html>
  • anjia > settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static/'),
)
  • Bootstrap

https://colorlib.com/wp/free-bootstrap-blog-templates/

  • templates > index.html
index.html
<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Suppablog - Minimal Blog Html Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Template by Colorlib" />
        <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
        <meta name="author" content="Colorlib" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="shortcut icon" href="images/favicon.png" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CLibre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css"  href='css/clear.css' />
        <link rel="stylesheet" type="text/css"  href='css/common.css' />
        <link rel="stylesheet" type="text/css"  href='css/font-awesome.min.css' />
        <link rel="stylesheet" type="text/css"  href='css/carouFredSel.css' />
        <link rel="stylesheet" type="text/css"  href='css/sm-clean.css' />
        <link rel="stylesheet" type="text/css"  href='style.css' />

        <!--[if lt IE 9]>
                <script src="js/html5.js"></script>
        <![endif]-->

    </head>


    <body class="home blog">

        <!-- Preloader Gif -->
        <table class="doc-loader">
            <tbody>
                <tr>
                    <td>
                        <img src="images/ajax-document-loader.gif" alt="Loading...">
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Left Sidebar -->
        <div id="sidebar" class="sidebar">
            <div class="menu-left-part">
                <div class="search-holder">
                    <label>
                        <input type="search" class="search-field" placeholder="Type here to search..." value="" name="s" title="Search for:">
                    </label>
                </div>
                <div class="site-info-holder">
                    <h1 class="site-title">Suppablog</h1>
                    <p class="site-description">
                        Suppablog is simple and yet cool wordpress theme to lorem ipsum dolor sit.
                    </p>
                </div>
                <nav id="header-main-menu">
                    <ul class="main-menu sm sm-clean">
                        <li><a href="index.html" class="current">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="scroll.html">Scroll</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <footer>
                    <div class="footer-info">
                        © 2018 SUPPABLOG HTML TEMPLATE. <br> CRAFTED WITH <i class="fa fa-heart"></i> BY <a href="https://colorlib.com">COLORLIB</a>.
                    </div>
                </footer>
            </div>
            <div class="menu-right-part">
                <div class="logo-holder">
                    <a href="index.html">
                        <img src="images/logo.png" alt="Suppablog WP">
                    </a>
                </div>
                <div class="toggle-holder">
                    <div id="toggle">
                        <div class="menu-line"></div>
                    </div>
                </div>
                <div class="social-holder">
                    <div class="social-list">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-vimeo"></i></a>
                        <a href="#"><i class="fa fa-behance"></i></a>
                        <a href="#"><i class="fa fa-rss"></i></a>
                    </div>
                </div>
                <div class="fixed scroll-top"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Home Content -->
        <div id="content" class="site-content">
            <div id="blog-wrapper">
                <div class="blog-holder center-relative">


                    <article id="post-1" class="blog-item-holder featured-post">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Crafting</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <h2 class="entry-title">
                                    <a href="single.html">Whatever is begun in anger ends in shame</a>
                                </h2>
                                <div class="excerpt">
                                    Now when I had mastered the language of this water and had come to know every trifling feature that bordered the great river as familiarly as I knew the letters of the alphabet, I had made a valuable acquisition. I still keep in mind a certain wonderful sunset which I witnessed when and steamboating<a class="read-more" href="single.html"></a>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>


                    <article id="post-2" class="blog-item-holder">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <h2 class="entry-title">
                                    <a href="single.html">I like to reinvent myself</a>
                                </h2>
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Science</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>


                    <article id="post-3" class="blog-item-holder">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <h2 class="entry-title">
                                    <a href="single.html">Everything is design</a>
                                </h2>
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Art</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>



                    <article id="post-4" class="blog-item-holder">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <h2 class="entry-title">
                                    <a href="single.html">It’s all about experience</a>
                                </h2>
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Life</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>



                    <article id="post-5" class="blog-item-holder">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <h2 class="entry-title">
                                    <a href="single.html">This is not my code</a>
                                </h2>
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Coding</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>



                    <article id="post-6" class="blog-item-holder">
                        <div class="entry-content relative">
                            <div class="content-1170 center-relative">
                                <h2 class="entry-title">
                                    <a href="single.html">Support human activity</a>
                                </h2>
                                <div class="cat-links">
                                    <ul>
                                        <li>
                                            <a href="#">Advocacy</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="entry-date published">February 12, 2016</div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </article>

                </div>
                <div class="clear"></div>
                <div class="block load-more-holder">LOAD MORE ENTRIES</div>
            </div>

            <div class="featured-image-holder">
                <div class="featured-post-image" style="background-image: url(demo-images/featured-image.jpg)"></div>

            </div>
            <div class="clear"></div>
        </div>



        <!--Load JavaScript-->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type='text/javascript' src='js/imagesloaded.pkgd.js'></script>
        <script type='text/javascript' src='js/jquery.nicescroll.min.js'></script>
        <script type='text/javascript' src='js/jquery.smartmenus.min.js'></script>
        <script type='text/javascript' src='js/jquery.carouFredSel-6.0.0-packed.js'></script>
        <script type='text/javascript' src='js/jquery.mousewheel.min.js'></script>
        <script type='text/javascript' src='js/jquery.touchSwipe.min.js'></script>
        <script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
        <script type='text/javascript' src='js/main.js'></script>
    </body>
</html>
  • templates > single.html
single.html
<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Suppablog - Minimal Blog Html Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Template by Colorlib" />
        <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
        <meta name="author" content="Colorlib" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="shortcut icon" href="images/favicon.png" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CLibre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css"  href='css/clear.css' />
        <link rel="stylesheet" type="text/css"  href='css/common.css' />
        <link rel="stylesheet" type="text/css"  href='css/font-awesome.min.css' />
        <link rel="stylesheet" type="text/css"  href='css/carouFredSel.css' />
        <link rel="stylesheet" type="text/css"  href='css/sm-clean.css' />
        <link rel="stylesheet" type="text/css"  href='style.css' />

        <!--[if lt IE 9]>
                <script src="js/html5.js"></script>
        <![endif]-->

    </head>


    <body class="single-post">

        <!-- Preloader Gif -->
        <table class="doc-loader">
            <tbody>
                <tr>
                    <td>
                        <img src="images/ajax-document-loader.gif" alt="Loading...">
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Left Sidebar -->
        <div id="sidebar" class="sidebar">
            <div class="menu-left-part">
                <div class="search-holder">
                    <label>
                        <input type="search" class="search-field" placeholder="Type here to search..." value="" name="s" title="Search for:">
                    </label>
                </div>
                <div class="site-info-holder">
                    <div class="site-title">Suppablog</div>
                    <p class="site-description">
                        Suppablog is simple and yet cool wordpress theme to lorem ipsum dolor sit.
                    </p>
                </div>
                <nav id="header-main-menu">
                    <ul class="main-menu sm sm-clean">
                        <li><a href="index.html" class="current">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="scroll.html">Scroll</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
                <footer>
                    <div class="footer-info">
                        © 2018 SUPPABLOG HTML TEMPLATE. <br> CRAFTED WITH <i class="fa fa-heart"></i> BY <a href="https://colorlib.com">COLORLIB</a>.
                    </div>
                </footer>
            </div>
            <div class="menu-right-part">
                <div class="logo-holder">
                    <a href="index.html">
                        <img src="images/logo.png" alt="Suppablog WP">
                    </a>
                </div>
                <div class="toggle-holder">
                    <div id="toggle">
                        <div class="menu-line"></div>
                    </div>
                </div>
                <div class="social-holder">
                    <div class="social-list">
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-vimeo"></i></a>
                        <a href="#"><i class="fa fa-behance"></i></a>
                        <a href="#"><i class="fa fa-rss"></i></a>
                    </div>
                </div>
                <div class="fixed scroll-top"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></div>
            </div>
            <div class="clear"></div>
        </div>

        <!-- Single Content -->
        <div id="content" class="site-content center-relative">
            <div class="single-post-wrapper content-1070 center-relative">

                <article class="center-relative">
                    <h1 class="entry-title">
                        I like to reinvent myself
                    </h1>
                    <div class="post-info content-660 center-relative">
                        <div class="cat-links">
                            <ul>
                                <li><a href="#">Science</a></li>
                            </ul>
                        </div>
                        <div class="entry-date published">February 12, 2016</div>
                        <div class="clear"></div>
                    </div>

                    <div class="entry-content">
                        <div class="content-wrap content-660 center-relative">
                            <p>Now when I had mastered the language of this water and had come to know every trifling feature that bordered the great river as familiarly as I knew the letters of the alphabet, I had made a valuable acquisition.</p>
                            <br>
                            <div class="clear"></div>
                        </div>
                        <div class="post-full-width">
                            <script>
                                var slider1_speed = "500";
                                var slider1_auto = "true";
                                var slider1_pagination = "true";
                                var slider1_hover = "true";
                            </script>
                            <div class="image-slider-wrapper">
                                <div class="caroufredsel_wrapper">
                                    <ul id="slider1" class="image-slider slides center-text">
                                        <li><img src="demo-images/01_blogpost_galery.jpg" alt=""></li>
                                        <li><img src="demo-images/02_blogpost_galery.jpg" alt=""></li>
                                        <li><img src="demo-images/03_blogpost_galery.jpg" alt=""></li>
                                    </ul>
                                </div>
                                <div class="slider1_pagination carousel_pagination left"></div>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="content-wrap content-660 center-relative ">
                            <p>I still keep in mind a certain wonderful sunset which I witnessed when and steamboating was new to me. A broad expanse of the river was turned too blood in the middle distance the red hue brightened into gold, through which a solitary log came floating, black and conspicuous in one place a long calm slanting mark lay sparkling upon the water in another the surface was broken by boiling, tumbling rings, that were as many-tinted as an opal where the ruddy flush was faintest, was a smooth spot that was covered with graceful circles and radiating lines.</p>
                            <br>
                            <p class="wrap-blockquote">Ever so delicately traced the shore on our left was densely wooded, and the som ber shadow that fell from this forest was broken in one place by a long, ruffled trail that shone like silver and high above the forest wall.</p>
                            <blockquote class="inline-blockquote">
                                <p>There were graceful curves, reflected images, woody on the heights, soft distances and over the whole scene far and so near, the dissolving lights drifted steadily now dissolving lights.</p>
                            </blockquote>
                            <p class="wrap-blockquote">But as I have said, a day came when I began to cease from noting the glories and the charms which the moon and the sun and the twilight wrought upon the river’s face another day came when I ceased altogether to note them. Then, if that sunset scene had been repeated, I should have looked upon it without rapture, and should have commented upon it, inwardly, after this fashion. But as I have said, a day came when I began to cease from noting the glories and the charms which the moon and the sun and the twilight wrought upon the one graceful curves, reflected images, woody heights, soft distances and over the whole sun scene, far and near, the dissolving lights drifted steadily, enriching it, every passing the moment, with new marvels of coloring. The world was new to me, and I had never seen anything like this at home. But as I have said, a day came when I began to cease from noting the glories and the charms which the moon and the sun and the twilight wrought upon the river’s face another day came when I ceased altogether to note them. Then, if that sunset scene had been repeated, I should have looked upon it without rapture, and should have commented upon it, inwardly, after this fashion.</p>
                            <br>
                            <br>
                            <img src="demo-images/one_drop_post_image02.jpg" alt="">
                            <br>
                            <br>
                            <p>Duis iaculis mattis rutrum. Sed iaculis magna sit amet suscipit ornare. Nulla ornare leo a tortor aliquam, quis interdum ex tempor. Quisque ultricies consequat suscipit. Donec tincidunt tempor ornare. Praesent a enim vel augue suscipit auctor in gravida augue. Suspendisse ut libero sit amet augue molestie fringilla. Fusce molestie, velit a finibus eleifend, nibh odio sagittis est, id aliquet turpis orci quis nibh.</p>
                        </div>
                    </div>
                    <div class="clear"></div>
                </article>
            </div>
        </div>



        <!--Load JavaScript-->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type='text/javascript' src='js/imagesloaded.pkgd.js'></script>
        <script type='text/javascript' src='js/jquery.nicescroll.min.js'></script>
        <script type='text/javascript' src='js/jquery.smartmenus.min.js'></script>
        <script type='text/javascript' src='js/jquery.carouFredSel-6.0.0-packed.js'></script>
        <script type='text/javascript' src='js/jquery.mousewheel.min.js'></script>
        <script type='text/javascript' src='js/jquery.touchSwipe.min.js'></script>
        <script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
        <script type='text/javascript' src='js/main.js'></script>
    </body>
</html>
  • index.html static 수정 작업
index.html
<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <title>Suppablog - Minimal Blog Html Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Template by Colorlib" />
    <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
    <meta name="author" content="Colorlib" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- static 사용을 위한 명령어 -->
    {% load static %}

    <link rel="shortcut icon" href="{% static 'images/favicon.png' %}" />
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CLibre+Baskerville:400,400italic,700'
        rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href='{% static "css/clear.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/common.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/font-awesome.min.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/carouFredSel.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/sm-clean.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/style.css" %}' />

    <!--[if lt IE 9]>
                <script src="{% static 'js/html5.js' %}"></script>
        <![endif]-->

</head>


<body class="home blog">

    <!-- Preloader Gif -->
    <table class="doc-loader">
        <tbody>
            <tr>
                <td>
                    <img src="{% static 'images/ajax-document-loader.gif' %}" alt="Loading...">
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Left Sidebar -->
    <div id="sidebar" class="sidebar">
        <div class="menu-left-part">
            <div class="search-holder">
                <label>
                    <input type="search" class="search-field" placeholder="Type here to search..." value="" name="s"
                        title="Search for:">
                </label>
            </div>
            <div class="site-info-holder">
                <h1 class="site-title">Suppablog</h1>
                <p class="site-description">
                    Suppablog is simple and yet cool wordpress theme to lorem ipsum dolor sit.
                </p>
            </div>
            <nav id="header-main-menu">
                <ul class="main-menu sm sm-clean">
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="scroll.html">Scroll</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
            <footer>
                <div class="footer-info">
                    © 2018 SUPPABLOG HTML TEMPLATE. <br> CRAFTED WITH <i class="fa fa-heart"></i> BY <a
                        href="https://colorlib.com">COLORLIB</a>.
                </div>
            </footer>
        </div>
        <div class="menu-right-part">
            <div class="logo-holder">
                <a href="index.html">
                    <img src="{% static 'images/logo.png' %}" alt="Suppablog WP">
                </a>
            </div>
            <div class="toggle-holder">
                <div id="toggle">
                    <div class="menu-line"></div>
                </div>
            </div>
            <div class="social-holder">
                <div class="social-list">
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-youtube-play"></i></a>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-vimeo"></i></a>
                    <a href="#"><i class="fa fa-behance"></i></a>
                    <a href="#"><i class="fa fa-rss"></i></a>
                </div>
            </div>
            <div class="fixed scroll-top"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></div>
        </div>
        <div class="clear"></div>
    </div>

    <!-- Home Content -->
    <div id="content" class="site-content">
        <div id="blog-wrapper">
            <div class="blog-holder center-relative">


                <article id="post-1" class="blog-item-holder featured-post">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Crafting</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <h2 class="entry-title">
                                <a href="single.html">Whatever is begun in anger ends in shame</a>
                            </h2>
                            <div class="excerpt">
                                Now when I had mastered the language of this water and had come to know every trifling
                                feature that bordered the great river as familiarly as I knew the letters of the
                                alphabet, I had made a valuable acquisition. I still keep in mind a certain wonderful
                                sunset which I witnessed when and steamboating<a class="read-more"
                                    href="single.html"></a>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>


                <article id="post-2" class="blog-item-holder">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <h2 class="entry-title">
                                <a href="single.html">I like to reinvent myself</a>
                            </h2>
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Science</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>


                <article id="post-3" class="blog-item-holder">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <h2 class="entry-title">
                                <a href="single.html">Everything is design</a>
                            </h2>
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Art</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>



                <article id="post-4" class="blog-item-holder">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <h2 class="entry-title">
                                <a href="single.html">It’s all about experience</a>
                            </h2>
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Life</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>



                <article id="post-5" class="blog-item-holder">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <h2 class="entry-title">
                                <a href="single.html">This is not my code</a>
                            </h2>
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Coding</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>



                <article id="post-6" class="blog-item-holder">
                    <div class="entry-content relative">
                        <div class="content-1170 center-relative">
                            <h2 class="entry-title">
                                <a href="single.html">Support human activity</a>
                            </h2>
                            <div class="cat-links">
                                <ul>
                                    <li>
                                        <a href="#">Advocacy</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-date published">February 12, 2016</div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </article>

            </div>
            <div class="clear"></div>
            <div class="block load-more-holder">LOAD MORE ENTRIES</div>
        </div>

        <div class="featured-image-holder">
            <div class="featured-post-image"
                style="background-image: url({% static 'demo-images/featured-image.jpg' %})"></div>

        </div>
        <div class="clear"></div>
    </div>



    <!--Load JavaScript-->
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type='text/javascript' src='{% static "js/imagesloaded.pkgd.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.nicescroll.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.smartmenus.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.carouFredSel-6.0.0-packed.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.mousewheel.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.touchSwipe.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.easing.1.3.js" %}'></script>
    <script type='text/javascript' src='{% static "js/main.js" %}'></script>
</body>

</html>
  • single.html static 수정 작업
single.html
<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <title>Suppablog - Minimal Blog Html Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Template by Colorlib" />
    <meta name="keywords" content="HTML, CSS, JavaScript, PHP" />
    <meta name="author" content="Colorlib" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    {% load static %}

    <link rel="shortcut icon" href="{% static 'images/favicon.png' %}" />
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7CLibre+Baskerville:400,400italic,700'
        rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href='{% static "css/clear.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/common.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/font-awesome.min.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/carouFredSel.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/sm-clean.css" %}' />
    <link rel="stylesheet" type="text/css" href='{% static "css/style.css" %}' />

    <!--[if lt IE 9]>
                <script src="{% static 'js/html5.js' %}"></script>
        <![endif]-->

</head>


<body class="single-post">

    <!-- Preloader Gif -->
    <table class="doc-loader">
        <tbody>
            <tr>
                <td>
                    <img src="{% static 'images/ajax-document-loader.gif' %}" alt="Loading...">
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Left Sidebar -->
    <div id="sidebar" class="sidebar">
        <div class="menu-left-part">
            <div class="search-holder">
                <label>
                    <input type="search" class="search-field" placeholder="Type here to search..." value="" name="s"
                        title="Search for:">
                </label>
            </div>
            <div class="site-info-holder">
                <div class="site-title">Suppablog</div>
                <p class="site-description">
                    Suppablog is simple and yet cool wordpress theme to lorem ipsum dolor sit.
                </p>
            </div>
            <nav id="header-main-menu">
                <ul class="main-menu sm sm-clean">
                    <li><a href="index.html" class="current">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="scroll.html">Scroll</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
            <footer>
                <div class="footer-info">
                    © 2018 SUPPABLOG HTML TEMPLATE. <br> CRAFTED WITH <i class="fa fa-heart"></i> BY <a
                        href="https://colorlib.com">COLORLIB</a>.
                </div>
            </footer>
        </div>
        <div class="menu-right-part">
            <div class="logo-holder">
                <a href="index.html">
                    <img src="{% static 'images/logo.png' %}" alt="Suppablog WP">
                </a>
            </div>
            <div class="toggle-holder">
                <div id="toggle">
                    <div class="menu-line"></div>
                </div>
            </div>
            <div class="social-holder">
                <div class="social-list">
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-youtube-play"></i></a>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-vimeo"></i></a>
                    <a href="#"><i class="fa fa-behance"></i></a>
                    <a href="#"><i class="fa fa-rss"></i></a>
                </div>
            </div>
            <div class="fixed scroll-top"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i></div>
        </div>
        <div class="clear"></div>
    </div>

    <!-- Single Content -->
    <div id="content" class="site-content center-relative">
        <div class="single-post-wrapper content-1070 center-relative">

            <article class="center-relative">
                <h1 class="entry-title">
                    I like to reinvent myself
                </h1>
                <div class="post-info content-660 center-relative">
                    <div class="cat-links">
                        <ul>
                            <li><a href="#">Science</a></li>
                        </ul>
                    </div>
                    <div class="entry-date published">February 12, 2016</div>
                    <div class="clear"></div>
                </div>

                <div class="entry-content">
                    <div class="content-wrap content-660 center-relative">
                        <p>Now when I had mastered the language of this water and had come to know every trifling
                            feature that bordered the great river as familiarly as I knew the letters of the alphabet, I
                            had made a valuable acquisition.</p>
                        <br>
                        <div class="clear"></div>
                    </div>
                    <div class="post-full-width">
                        <script>
                            var slider1_speed = "500";
                            var slider1_auto = "true";
                            var slider1_pagination = "true";
                            var slider1_hover = "true";
                        </script>
                        <div class="image-slider-wrapper">
                            <div class="caroufredsel_wrapper">
                                <ul id="slider1" class="image-slider slides center-text">
                                    <li><img src="{% static 'demo-images/01_blogpost_galery.jpg' %}" alt=""></li>
                                    <li><img src="{% static 'demo-images/02_blogpost_galery.jpg' %}" alt=""></li>
                                    <li><img src="{% static 'demo-images/03_blogpost_galery.jpg' %}" alt=""></li>
                                </ul>
                            </div>
                            <div class="slider1_pagination carousel_pagination left"></div>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="content-wrap content-660 center-relative ">
                        <p>I still keep in mind a certain wonderful sunset which I witnessed when and steamboating was
                            new to me. A broad expanse of the river was turned too blood in the middle distance the red
                            hue brightened into gold, through which a solitary log came floating, black and conspicuous
                            in one place a long calm slanting mark lay sparkling upon the water in another the surface
                            was broken by boiling, tumbling rings, that were as many-tinted as an opal where the ruddy
                            flush was faintest, was a smooth spot that was covered with graceful circles and radiating
                            lines.</p>
                        <br>
                        <p class="wrap-blockquote">Ever so delicately traced the shore on our left was densely wooded,
                            and the som ber shadow that fell from this forest was broken in one place by a long, ruffled
                            trail that shone like silver and high above the forest wall.</p>
                        <blockquote class="inline-blockquote">
                            <p>There were graceful curves, reflected images, woody on the heights, soft distances and
                                over the whole scene far and so near, the dissolving lights drifted steadily now
                                dissolving lights.</p>
                        </blockquote>
                        <p class="wrap-blockquote">But as I have said, a day came when I began to cease from noting the
                            glories and the charms which the moon and the sun and the twilight wrought upon the river’s
                            face another day came when I ceased altogether to note them. Then, if that sunset scene had
                            been repeated, I should have looked upon it without rapture, and should have commented upon
                            it, inwardly, after this fashion. But as I have said, a day came when I began to cease from
                            noting the glories and the charms which the moon and the sun and the twilight wrought upon
                            the one graceful curves, reflected images, woody heights, soft distances and over the whole
                            sun scene, far and near, the dissolving lights drifted steadily, enriching it, every passing
                            the moment, with new marvels of coloring. The world was new to me, and I had never seen
                            anything like this at home. But as I have said, a day came when I began to cease from noting
                            the glories and the charms which the moon and the sun and the twilight wrought upon the
                            river’s face another day came when I ceased altogether to note them. Then, if that sunset
                            scene had been repeated, I should have looked upon it without rapture, and should have
                            commented upon it, inwardly, after this fashion.</p>
                        <br>
                        <br>
                        <img src="{% static 'demo-images/one_drop_post_image02.jpg' %}" alt="">
                        <br>
                        <br>
                        <p>Duis iaculis mattis rutrum. Sed iaculis magna sit amet suscipit ornare. Nulla ornare leo a
                            tortor aliquam, quis interdum ex tempor. Quisque ultricies consequat suscipit. Donec
                            tincidunt tempor ornare. Praesent a enim vel augue suscipit auctor in gravida augue.
                            Suspendisse ut libero sit amet augue molestie fringilla. Fusce molestie, velit a finibus
                            eleifend, nibh odio sagittis est, id aliquet turpis orci quis nibh.</p>
                    </div>
                </div>
                <div class="clear"></div>
            </article>
        </div>
    </div>



    <!--Load JavaScript-->
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
    <script type='text/javascript' src='{% static "js/imagesloaded.pkgd.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.nicescroll.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.smartmenus.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.carouFredSel-6.0.0-packed.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.mousewheel.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.touchSwipe.min.js" %}'></script>
    <script type='text/javascript' src='{% static "js/jquery.easing.1.3.js" %}'></script>
    <script type='text/javascript' src='{% static "js/main.js" %}'></script>
</body>

</html>
  • style.css 경로 수정 작업
.read-more {
  background-image: url("../images/arrow.png");
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: -11px;
  margin-left: 15px;
}


  • featured-image 기본 이미지 확인
  • featured-image 수정 이미지
  • featured-image 수정 후 테스트 작업
  • 상세 페이지 연결 작업

blog > urls.py

from django.urls import path
from blog import views

# url 처리규칙
urlpatterns = [
    path('', views.index, name='index'),
    path('single/', views.single, name='single'),
]

blog > views.py

from django.shortcuts import render

# Create your views here.


def index(req):
    context = {

    }

    return render(req, 'index.html', context=context)


def single(req):
    context = {

    }

    return render(req, 'single.html', context=context)
  • blog 모델링 작업

blog > models.py

from django.db import models
from django.urls import reverse


# 블로그 카테고리
class Category(models.Model):
    name = models.CharField(max_length=50, help_text='블로그 카테고리')

    def __str__(self):
        return self.name


# 블로그 글(제목, 작성일, 대표 이미지, 내용, 분류)
class Post(models.Model):
    title = models.CharField(max_length=200)
    title_image = models.ImageField(blank=True)
    content = models. TextField()
    createDate = models.DateTimeField(auto_now_add=True)
    updateDate = models.DateTimeField(auto_now_add=True)
    category = models.ManyToManyField(Category, help_text='블로그 카테고리')

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('single', args=[str(self.id)])

anjia > settings.py

# 미디어 파일 처리
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

anjia > urls.py

"""anjia URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import include
from django.views.generic import RedirectView
from django.conf import settings
from django.conf.urls.static import static


# http://localhost:8000/ => http://localhost:8000/blog
urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
    path('', RedirectView.as_view(url='/blog/', permanent=True)),
]

urlpatterns += static(settings.STATIC_URL,
                      document_root=settings.STATIC_ROOT)     # staic 정적 파일 처리
urlpatterns += static(settings.MEDIA_URL,
                      document_root=settings.MEDIA_ROOT)     # media 정적 파일 처리

makemigrations 작업

python manage.py makemigrations

migrate 작업

python manage.py migrate

3.5 lee windRider

3.5.1 설명

스마트팜

  • 온도,습도센서에서 데이타를 받아 환기및 물주기를 하고 작물별 생육과정을 기록할수 있게 한다..
  • 스마트폰에서 원격으로 물주기및 환기를 할 수 있도록 한다.

3.5.2 GitHub

https://github.com/kbntt/smartfarm.git


3.6 HJW

3.6.1 설명

첫번째 프로그램은 계산기 프로그램을 디자인해서 만드는것이고 두번째는 게임프로그램을 디자인해서 만들어보고 싶습니다.

3.6.2 GitHub

https://github.com/python


3.7 박성민

3.7.1 설명

스도쿠 인공지능을 만들고 싶습니다

3.7.2 GitHub

https://github.com/python


3.8 대박이아빠

3.8.1 설명

시간대별로 뉴스 검색해서 단체 카카오톡방에 전송하는 기능을 만들고 싶습니다.

3.8.2 GitHub

https://github.com/python


3.9 송윤희

3.9.1 설명

30분 간격으로 기록하는 다이어리 만들기

3.9.2 GitHub

https://github.com/python


3.10 Wonsik lee

3.10.1 설명

크롤링 또는 API 회사 업무와 연계된 자동화

3.10.2 GitHub

https://github.com/python


3.11 Goodmorn

3.11.1 설명

웹 스크래퍼 만들기

3.11.2 GitHub

https://github.com/python

3.12 ktkalpha

3.12.1 설명

1. 게임 만들기, 2. gui가 있는 게임 만들기.

3.12.2 코드

import turtle as t
t.write('hello python')

3.12.3 Github

https://github.com/ktkalpha

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}