파이션과 html5 연동방법

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에서 불러올 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다