HTML
HTML = Hyper Text Markup Language
hyper: 건너 편의, 초월, 과도한- 많은 수의 문서를 하이퍼링크로 서로 연결시킬 수 있는 문서의 구조
- 참조(하이퍼링크)를 통해 한 문서에서 다른문서로 즉시 접근할 수 있는 텍스트
- 하이퍼텍스트는 1960년대 컴퓨터 개척자이자 철학자인 테드 넬슨이 처음 고안
- 문서의 구조
- 기존 문서: 순차적, 서열형 구조
- 하이퍼텍스트 : 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형 구조
- 책과는 완전 다른 컨셉으로, 하이퍼링크로 연결된 문서들을 어떠한 행위(click)에 따라 자유롭게 이동
- 검색엔진과 더불어 정보습득의 새로운 장을 인류에게 가져다 주었다.
Tags
- tag는 하나의 키워드
- opening tags + closing tags 인데 closing tags가 없는 경우도 많다.
- XHTML에서는
<img>가 아닌<img/>사용 - 중첩태그 :
<H1> <I> The Nation </I> </H1> - 속성의 값을 설정하기 위해
“와‘모두 사용 - 주석 :
<!--주석-->
CSS
사용 이유: 명확성, 확장성, 유지보수 편의성으로 template과 같은 컨셉으로 분리하는 것이다.
오늘 >> 스마트폰으로 촬영 - 업로드 - YOLO - 게시물처럼 관리, 리스트화
AWS 포트 두개씩 필요. 하나는 주피터노트북, 하나는 서버
모바일 지원 HTML
모바일 viewport 지원
<head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> </head>스마트폰에 맞춰서 scaling
모바일 camera 지원
<input type='file' name='file1' accept='image/*' capture='camera'>
python web server 구축
- SimpleHTTPServer
python -m http.server 9000- 스크립트 기반 웹서버
- Web Framework 기반 웹서버
- Flask : 경량 웹서버. 정말 기능이 없다
- Django : MVC 기반의 웹서버
python web server programming - Flask
- 파이썬으로 작성된 마이크로 웹 프레임워크
- 최소한의 기능만 제공하여 유연한 어플레키이션 제작 가능
- 설치 :
pip install Flask
Flask folder 기본 구조
- 폴더 기본 구조
- 루트 폴더 : app
- 정적파일 폴더: app/static
- 하위에 css, img, js 폴더 생성
- 템플릿 폴더: app/templates
- python 코드는 루트 폴더에 작성
Template 기반 Flask : 변수 공유
render_template
- .py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('home.html', htmlvariable=pyvariable)- .html
HTML에서 파이썬의 객체에 접근하려면 {{변수}} 를 사용한다.
{% for %},{% endfor %} 사용해 반복처리
<!--예시-->
<ul>
{% for s in list %}
<li>이름은 {{s}}</li>
{% endfor %}
</ul>공유할 변수가 여러 개일 경우
딕셔너리의 리스트로 자료를 저장한다.
[ {}, {}, ...]
#DB
lista = ["book2.jpg", "dog.jpg", "single.jpeg"]
listb = ['책데이터', '개영상테스트', '사람']
# 여러 리스트를 딕셔너리로 합치기
listData = []
id = []
for i in range(len(lista)):
id.append(int(i))
listData.append({'id': id[i], 'img': lista[i], 'title': listb[i]})갤러리와 이미지 디테일
- gallery.html
@app.route('/image')
def image():
return render_template('image.html', listData=listData)<table border="5">
{% for s in listData %}
<tr>
<td><a href="/view?id={{s.id}}"><img src='/static/{{s.img}}' width=100></a></td>
<td>{{s.title}}</td>
</tr>
{% endfor %}
</table>- view.html (이미지 상세보기)
@app.route('/view')
def view():
localid = request.args.get('id')
return render_template('view.html', s=listData[int(localid)])<font size="20">{{s.title}}</font>
<br>
<img src="/static/{{s.img}}">
<br>
<a href="/image"><font size="10">목록으로</font></a>file-upload form
- gallery.html
<form action = "/fileUpload" method="POST" enctype="multipart/form-data">
<input type="file" name="file1"><br>
제목 : <input type="text" name="title">
<input type="submit" value="전송">
</form>메소드는 POST 필수
enctype 설정도 필수. 부가적인 데이터도 같이 전송되기 때문에 multipart
- .py
@app.route('/fileUpload', methods=['POST'])
def fileUpload() :
if request.method == 'POST' : #파일 업로드는 POST 방식만 가능
f =request.files['file1'] #form에서의 변수
f.save('./static/downloads/' + f.filename) #서버의 실제 물리적인 폴더 경로
title = request.form.get('title')
return '업로드 완료'javascript로 리턴
def goURL(msg, url) :
html = f"""
<script>
alert("@msg")
window.location.href = "@url"
</script>
""" #위의 html은 단지 문자열일 뿐이다. 서버에서는 문자열을 리턴하고, 브라우저에서 html을 디코딩한다.
html = html.replace("@msg", msg)
html = html.replace("@url", url)
return html
@app.route('/fileUpload', methods=['POST'])
def fileUpload() :
if request.method == 'POST' : #파일 업로드는 POST 방식만 가능
f =request.files['file1'] #form에서의 변수
f.save('./static/' + f.filename) #서버의 실제 물리적인 폴더 경로
title = request.form.get('title')
id = len(listData)
listData.append({'id':id, 'img':f.filename, 'title':title})
return goURL("업로드가 성공했습니다.","/image")'Python > Django' 카테고리의 다른 글
| Django에서 blog 구현 (0) | 2020.02.19 |
|---|---|
| Django에 Database 사용하기 (1) | 2020.02.19 |
| Python Socket programming (0) | 2020.02.18 |
| OSI 참조 모델 이론 (0) | 2020.02.18 |
| AJAX를 활용한 비동기 방식 웹페이지 Django로 구동하기 (0) | 2020.02.14 |
