❖ 플라스크로 HTML 파일 렌더링

1. 📁templates 폴더 생성 후 html 파일(템플릿)을 폴더 안으로 이동
   (인터넷에서 가져온 html 파일 확장자가 htm일 경우 'l' 추가하여 수정하기)
2. from flask import render_template 임포트
3. 리턴값으로 render_template 메소드를 호출 후 html 파일 이름을 전달
   
   

🏗️ personal-site-form.html
Day41-42의 HTML 파일 활용

⌨️ server.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("personal-site-form.html")

if __name__ == "__main__":
    app.run(debug=True)

정적 파일인 프로필 사진이 렌더링되지 않음

❖ 플라스크를 활용하여 정적 파일 서브하기

1. 📁static 폴더 생성 후 정적 파일(이미지, 비디오, CSS 파일 등)을 폴더 안으로 이동
2. HTML 파일에 적어야 할 정적 파일의 경로는 static/파일 이름이 된다

❗️크롬 브라우저에서 변경된 내용이 바로 적용되지 않을 경우 강력 새로고침(shift + 새로고침) 하기
(정적 파일, 자바스크립트 등 자주 바뀌지 않는 것들을 캐시로 저장하여 인터넷 사용을 절약하기 때문)

🏗️ personal-site-form.html

…
<td><img src="static/profile.png" alt="profile pic" width="150" height="150"></td>
…

이미지가 정상적으로 렌더링된 모습

❖ 빠른 웹 개발을 위한 웹사이트 템플릿

1. html5up(무료 템플릿 사이트)에서 템플릿 다운
   (무료로 이용하려면 디자이너에 대한 출처를 명시해야 한다)
2. html 파일과 정적 파일들을 프로젝트의 각 폴더로 복사
3. html 파일에서 정적 파일들의 경로 수정하기
4. 파이썬에서 서버 열기
5. 크롬 브라우저에서 웹사이트의 단락, 텍스트 등을 바로 편집하거나 삭제해서 원하는 모습으로 만들기
   a. 편집 : 개발자 도구 → 콘솔 → document.body.contentEditable=true 입력(JS 코드)
   b. 삭제 : 커서 모양 아이콘을 클릭하고 요소를 선택 후 해당 html 코드에서 delete 키
   
6. 변경 후 파일 → 페이지를 다른 이름으로 저장 으로 웹페이지 저장
7. 프로젝트의 템플릿 폴더에 새 html 파일로 덮어씌우기
   
   

🗂️ Day56 프로젝트: 웹사이트 템플릿으로 명함 제작

🔍 유의 사항

• 무료 템플릿 웹사이트에서 가져온 템플릿을 바꿔서 간단한 명함 형태 제작하기
• 강의에서 사용한 명함 모양 템플릿은 더 이상 제공되지 않아서 임의로 변경

▷ Angela Yu, [Python 부트캠프 : 100개의 프로젝트로 Python 개발 완전 정복], Udemy, https://www.udemy.com/course/best-100-days-python/?couponCode=ST3MT72524