프로그램 설치
프로그래밍 언어는 파이썬을 사용하며 장고(Django) 프레임워크로 구성하려고 합니다.
파이썬 버전은 3.7.9를 선택하여 설치하고, 개발 툴(IDE)은 파이참(Pycharm)을 설치하였습니다. 파이참의 경우 유료버전인 Professional과 무료버전인 Community가 있으며, 사용하기 좀 더 편하고 기능이 다양한 Professional의 평가판을 활용하기로 합니다.
RESTFUL API를 활용하기 위해 djangorestframework 패키지를 설치합니다.
새 프로젝트 생성하기
새 프로젝트 만들기를 누르고 아래 그림에 표시된 각 항목의 값을 확인하고 필요에 따라 수정합니다.
- 프레임워크 타입은 Django를 선택합니다.
- Location은 프로젝트 생성 위치로 기본 설정된 프로젝트 이름을 적절한 값으로 수정합니다.
- 다른 프로젝트에 영향을 주지 않도록 가상환경을 구성하도록 합니다.
- 인터프리터 부분에서 수업에 사용할 파이썬의 버전(3.7)을 선택합니다.
파이썬 장고의 디자인 패턴 MVT
디자인 패턴이란 알고리즘이 아니라 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론입니다. 파이썬 장고에서는 Model, View, Template의 약자인 MVT 패턴을 사용하는데 각 항목의 의미는 다음과 같습니다.
- Model : Database 파트로, 사용자가 사용할 모든 데이터의 정의 및 구조화 등을 담당함
- View : Back-end 파트로, 사용자 행동에 따라 동작 및 처리 방식을 정의함
- Template : Front-end 파트로, 데이터를 화면에 어떻게 표현할지를 정의하며 HTML, CSS 등을 활용함
Template 생성
파이참을 Prefessional로 설치했다면 프로젝트 생성 시 자동으로 templates 이름의 보라색 폴더가 생성되어 있지만, Community로 설치했다면 별도의 폴더로 구성해줍니다.
템플릿 안에 기본 웹 페이지로 구성할 HTML 파일을 생성합니다.
View 생성
사용자 요청에 따른 웹 처리 방식을 정의하기 위해 프로젝트 안에 views.py 파일을 생성하고, 웹 페이지 요청이 있을 때 위에서 생성한 HTML 문서가 열리도록 아래 그림과 같이 입력해줍니다.
URL에 따른 페이지 지정을 위해 urls.py 파일에서 아래와 같이 Main.as_view() 경로를 추가해줍니다.
웹 페이지 테스트
프로그램 상단에 화살표 버튼을 눌러 지금까지 입력한 코드들이 실행되도록 합니다.
참고로 장고로 실행되는 웹의 기본 주소는 http://127.0.0.1:8000 이며, 앞에서 설정한 URL인 main을 덧붙여 접속해봅니다.
HTML, CSS를 활용한 홈페이지 구성 방법 배우기
다음, 네이버 등의 웹 페이지를 보면 로고, 검색창, 로그인창 등 다양한 컨텐츠가 한 화면에 나눠진 공간에 위치하고 있습니다. 웹 페이지에 어떤 정보들을 어떤식으로 표시할 것인지 구상하여 공간을 분할하고 글이나 그림 등을 게시해보는 실습을 진행합니다.
화면 분할 구성하기
홈페이지에 컨텐츠가 들어갈 화면을 어떻게 구성할건지 정하고 거기에 맞게 HTML로 분할 설정을 해야 합니다. 화면 분할에 사용할 HTTP 태그는 <div> 입니다.
<div>를 사용하면 기본적으로 세로로 화면이 분할되며, 분할된 공간을 구분하기 쉽게 백그라운드 색을 넣어 테스트 해봅니다.
가로로 분할하려면 겉에 큰 틀 역할을 하는 <div> 안에 <div>를 넣어서 사용해야 하며, 틀 역할을 하는 <div>에는 style="display: flex; flex-direction: row"를 입력해야 합니다. 그 외에도 width, heigth 등을 사용해 공간의 범위를 지정할 수 있고 border 속성으로 테두리를 설정할 수 있습니다.
이미지 삽입하기
이미지 삽입은 <img> 태그를 하용하고 끝나는 태그 없이 <img src="이미지주소"> 형태로 입력합니다. width와 height 스타일을 넣어 크기 조절도 가능합니다. 여러 그림을 연속으로 넣었을 때 아래와 같이 기본적으로는 가로 정렬이 되며, 세로 정렬을 원할 경우 <div>에 넣어 작성해야 합니다.
스타일 시트 사용하기
HTML 태그에 직접 style을 지정할 수 있지만 설정할 속성이 많아지거나 반복적인 작업인 경우 Class(함수)로 미리 지정해두는 것이 편리합니다.
<head> 안에 <style>로 지정하고 [태그].이름{스타일내용} 형식으로 작성합니다. 특정 태그 안에서 사용할 스타일이라면 앞에 태그를 붙이고 그렇지 않으면 그냥 비워둔 채 작성하면 됩니다.
미리 다양하고 예쁜 CSS를 만들어 공유하는 부트스트랩 사이트가 있으니 여기서 필요한 스타일을 찾아 사용하면 좋습니다.
'Django(웹서비스 만들기)' 카테고리의 다른 글
| [6주차] AWS에 웹 서비스 배포하기 (0) | 2021.12.29 |
|---|---|
| [5주차] Git 사용하기 (0) | 2021.12.24 |
| [4주차] 사용자별 정보 다르게 출력하기 (0) | 2021.12.16 |
| [3주차] 회원가입, 로그인 만들기 (0) | 2021.12.07 |
| [2주차] DB를 활용한 웹 페이지 띄우기 (0) | 2021.12.01 |
