혜랑's STORY

[Django Project 시작하기] 본문

무지성 작업실/Namely

[Django Project 시작하기]

hyerang0125 2021. 7. 9. 15:39

Django 프로젝트 시작하기

  1. 가상환경 생성
  2. Django 설치
  3. 프로젝트 생성
  4. App 만들기

1. 가상환경 생성

"myvenv"라는 이름의 가상환경 생성

"source myvenv/Scripts/active" 명령어를 통해 가상환경을 활성화 할 수 있다. (myvenv)가 나오면 활성화 된 것!

2. Django 설치

가상환경을 활성화한 상태에서 Django를 설치할 것이다.

3. 프로젝트 생성

"web"이라는 이름의 프로젝트를 만들었다.

프로젝트 생성하는 명령어

django-admin startproject 프로젝트_이름

프로젝트 폴더로 이동한 뒤 서버를 실행해 보자.

서버를 실행하는 명령어

python manage.py runserver

서버 종료는 ctrl + c

잘 실행되는 것을 확인할 수 있다.

4. App 만들기

"main"이라는 이름의 App을 만들었다.

App 만드는 명령어

python manage.py startapp 앱_이름

[Project와 App의 관계]

  • 하나의 프로젝트 = 하나의 웹 사이트
  • 프로젝트 안의 기능들을 각각의 App으로 관리

추가 설정

  1. settings.py
  2. templates
  3. views.py
  4. urls.py

1. Settings.py : App 만든 것을 알려주기

처음 만들었던 'web' 프로젝트 안에 있는 'settings.py'의 INSTALLED_APPS에 생성한 App을 알려준다.

다음과 같이 추가하면 된다. 이때 주의할 점은 list 형식으로 받기 때문에 뒤에 반드시 **','**를 붙여주어야 한다.

2. templates : home.html 만들기

앱 폴더(main) 안에 templates 폴더를 만든다.

그리고 그 안에 home.html 파일을 만들어 준다.

3. views.py : html 파일을 열어주는 함수 정의하기

view는 django가 제공하는 일반적인 특정 기능과 템플릿 웹페이지의 한 종류이다. 예를 들어, 블로그의 경우 다름과 같은 뷰를 가질 수 있다.

  • Blog 홈페이지 : 가장 최근의 항목들을 보여준다.
  • 세부 페이지 : 하나의 항목에 연결하는 영구적인 링크(permalink)를 제공
  • 댓글 기능 : 특정 항목의 댓글을 다룰 수 있는 기능

View 추가하기

이 함수는 request를 통해 요청이 들어오면 home.html 파일을 반환한다. 즉, render()는 home.html을 화면에 보여주도록 하는 함수인 것이다.

4. urls.py

이제 앱의 url을 정의하고 저장할 차례이다.

main 디렉토리에 urls.py를 생성하여 위와 같이 코드를 작성했다. 이제 최상위 URLconf에서 main.urls 모듈을 바라보도록 설정하자.

기본적인 코드(admin url 설정 등)가 존재하고 여기에 /main 주소에 대해서는 main.urls을 바라보도록 설정하였다.

include() 함수는 다른 URLconf들을 참조할 수 있도록 해주고 Django가 함수 include()를 만나게 되면 설정된 url(/main) 뒤의 url들에 대한 처리를 위하여 main.urls.py인 URLconf로 전달하는 역할을 한다.

+) 동작하는 과정

  1. urls.py(web/urls.py)의 설정을 확인하고 여기의 /main 설정에 따라
  2. main/urls.py를 바라보게 되고
  3. main/urls.py의 URL 설정에 따라 동작한다.

구동된 웹사이트에 접속을 하고 위에서 urls 설정을 해준 주소(/main)로 접속을 하면 정상적으로 view가 표시된다.

+) 공부 : 움직이는 메뉴 버튼

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8"/>
    </head>
    <body>
        <input type="checkbox" id="menuicon">
        <labe1 for="menuicon">
            <span></span>
            <span></span>
            <span></span>
        </labe1>
    </body>
</html>
  • css 코드 및 설명
input[id="menuicon"]{ /*input 요소 중 id 값이 같은 요소만 선택*/
    top: 100px;
    left: 100px;
    display:none; /*요소를 안보이게 가리는 속성*/
}

input[id="menuicon"] + label{ /*인접 요소 '+' 사용*/
    display: block;
    width: 60px;
    height: 40px;
    position: relative; /*absolute의 기준점*/
    cursor: pointer;
}

input[id="menuicon"] + label span{ /*3개의 span 일괄선택*/
    display: block;
    position: absolute; /*레이어 속성*/
    width: 100%;
    height: 5px;
    border-radius: 30px;
    background: #000;
    transition: all .35s; /*모션(애니메이션 효과)*/
}

/*:nth-child(숫자) 각 하위 요소를 순차적으로 선택*/
input[id="menuicon"] + label span:nth-child(1){
    top: 0; /*position:absolute의 정렬 위치값 = 상단*/
}

input[id="menuicon"] + label span:nth-child(2){
    top: 50%; /*중앙*/
    transform: translateY(-50%); /*요소를 Y축으로 값만큼 이동. 정확히 가운데에 위치할 수 있도록*/
}

input[id="menuicon"] + label span:nth-child(3){
    bottom: 0; /*하단*/
}

input[id="menuicon"]:checked + label span:nth-child(1){
    top:50%;
    transform: translateY(-50%) rotate(45deg); /*translateY: Y축 이동, rotate 회전*/
}

input[id="menuicon"]:checked + label span:nth-child(2){
    opacity: 0; /*요소의 투명도 0으로 설정*/
}

input[id="menuicon"]:checked + label span:nth-child(3){
    bottom:50%;
    transform: translateY(50%) rotate(-45deg);
}
  • 실행 결과

둘이 자연스럽게 변경되는 것을 볼 수 있다.

저작자표시 비영리 변경금지