← 전체 목록
파이썬

파이션과 html5 연동방법

작성일: 2024-12-04 · 원본 자료
Python과 HTML5를 연동하여 웹 애플리케이션을 만드는 방법에는 주로 Flask나 Django와 같은 Python 웹 프레임워크를 사용합니다. 여기서는 Flask를 예로 들어 설명드리겠습니다. Flask는 비교적 간단하면서도 유연하게 HTML과 연동할 수 있어 학습이나 프로젝트에 많이 사용됩니다.

1. Flask 설치

먼저, Flask를 설치해야 합니다.
bash
pip install Flask

2. Flask 앱 기본 구조 만들기

Flask 프로젝트 디렉토리를 생성하고, 필요한 파일을 설정합니다.

프로젝트 구조 예시:

my_flask_app/ │ ├── app.py # Flask 애플리케이션 메인 파일 ├── templates/ # HTML 파일들이 저장되는 폴더 │ └── index.html # 기본 HTML 파일 └── static/ # CSS, JavaScript, 이미지 등 정적 파일들이 저장되는 폴더 └── style.css # CSS 파일

3. Flask 애플리케이션 파일 (app.py)

app.py 파일을 생성하고, HTML 파일을 렌더링하는 기본 코드를 작성합니다.
from flask import Flask, render_template app = Flask(__name__) # HTML 페이지를 렌더링하는 라우트 @app.route('/') def home(): return render_template('index.html') # templates 폴더의 index.html 파일 렌더링 if __name__ == '__main__': app.run(debug=True)

4. HTML 파일 작성 (templates/index.html)

templates 폴더에 index.html 파일을 생성하고 HTML5 문서를 작성합니다. Flask에서는 {{ }}와 {% %} 구문을 사용해 Python 변수를 HTML에 전달하거나, 조건문, 반복문 등을 사용할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask and HTML5 Example</title> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> </head> <body> <h1>Welcome to Flask with HTML5!</h1> <p>{{ message }}</p> <!-- Python에서 전달된 변수 표시 --> </body> </html>

5. Flask에서 변수 전달하기

Flask의 render_template 함수에서 index.html로 변수를 전달해 보겠습니다. app.py에 코드를 추가합니다.
@app.route('/') def home(): return render_template('index.html', message="Hello from Flask!")

6. CSS 및 JavaScript 파일 추가 (static/style.css)

static 폴더에 style.css 파일을 생성하여 HTML에 스타일을 적용합니다.
/* style.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; padding: 50px; }

7. 서버 실행

마지막으로 Flask 서버를 실행합니다.
bash
python app.py
웹 브라우저에서 http://127.0.0.1:5000에 접속하면 HTML5 페이지가 보입니다. 이와 같이 Python(Flask)과 HTML5를 연동하여 웹 애플리케이션을 만들 수 있습니다. CSS와 JavaScript는 static 폴더에 추가하여 HTML에서 불러올 수 있습니다.