{"id":64,"date":"2024-12-04T04:07:36","date_gmt":"2024-12-04T04:07:36","guid":{"rendered":"http:\/\/211.230.203.47\/wordpress\/?p=64"},"modified":"2024-12-04T04:07:55","modified_gmt":"2024-12-04T04:07:55","slug":"%ed%8c%8c%ec%9d%b4%ec%85%98%ea%b3%bc-html5-%ec%97%b0%eb%8f%99%eb%b0%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/www.soon7shop.kr\/wordpress\/?p=64","title":{"rendered":"\ud30c\uc774\uc158\uacfc html5 \uc5f0\ub3d9\ubc29\ubc95"},"content":{"rendered":"

Python\uacfc HTML5\ub97c \uc5f0\ub3d9\ud558\uc5ec \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0\ub294 \uc8fc\ub85c Flask<\/strong>\ub098 Django<\/strong>\uc640 \uac19\uc740 Python \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 Flask\ub97c \uc608\ub85c \ub4e4\uc5b4 \uc124\uba85\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. Flask\ub294 \ube44\uad50\uc801 \uac04\ub2e8\ud558\uba74\uc11c\ub3c4 \uc720\uc5f0\ud558\uac8c HTML\uacfc \uc5f0\ub3d9\ud560 \uc218 \uc788\uc5b4 \ud559\uc2b5\uc774\ub098 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n

1. Flask \uc124\uce58<\/h3>\n

\uba3c\uc800, Flask\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n

\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
pip install Flask
\n<\/code><\/div>\n<\/div>\n

2. Flask \uc571 \uae30\ubcf8 \uad6c\uc870 \ub9cc\ub4e4\uae30<\/h3>\n

Flask \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud558\uace0, \ud544\uc694\ud55c \ud30c\uc77c\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n

\ud504\ub85c\uc81d\ud2b8 \uad6c\uc870 \uc608\uc2dc:<\/h4>\n
\n
my_flask_app\/
\n\u2502
\n\u251c\u2500\u2500 app.py # Flask \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uba54\uc778 \ud30c\uc77c
\n\u251c\u2500\u2500 templates\/ # HTML \ud30c\uc77c\ub4e4\uc774 \uc800\uc7a5\ub418\ub294 \ud3f4\ub354
\n\u2502 \u2514\u2500\u2500 index.html # \uae30\ubcf8 HTML \ud30c\uc77c
\n\u2514\u2500\u2500 static\/ # CSS, JavaScript, \uc774\ubbf8\uc9c0 \ub4f1 \uc815\uc801 \ud30c\uc77c\ub4e4\uc774 \uc800\uc7a5\ub418\ub294 \ud3f4\ub354
\n\u2514\u2500\u2500 style.css # CSS \ud30c\uc77c
\n<\/code><\/div>\n<\/div>\n

3. Flask \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud30c\uc77c (app.py<\/code>)<\/h3>\n

app.py<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, HTML \ud30c\uc77c\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \uae30\ubcf8 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

\n
\n

<\/code><\/code>from flask import Flask, render_template<\/p>\n

<\/code><\/code>app = Flask(__name__)<\/p>\n

<\/code><\/code># HTML \ud398\uc774\uc9c0\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \ub77c\uc6b0\ud2b8
\n@app.route(‘\/’)
\ndef home():
\nreturn render_template(‘index.html’) # templates \ud3f4\ub354\uc758 index.html \ud30c\uc77c \ub80c\ub354\ub9c1<\/p>\n

<\/code><\/code>if __name__ == ‘__main__’:
\napp.run(debug=True)<\/p>\n


\n<\/code><\/p>\n<\/div>\n<\/div>\n

4. HTML \ud30c\uc77c \uc791\uc131 (templates\/index.html<\/code>)<\/h3>\n

templates<\/code> \ud3f4\ub354\uc5d0 index.html<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 HTML5 \ubb38\uc11c\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. Flask\uc5d0\uc11c\ub294 {{ }}<\/code>\uc640 {% %}<\/code> \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud574 Python \ubcc0\uc218\ub97c HTML\uc5d0 \uc804\ub2ec\ud558\uac70\ub098, \uc870\uac74\ubb38, \ubc18\ubcf5\ubb38 \ub4f1\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\n
<!DOCTYPE html>
\n<html lang=\"en\">
\n<head>
\n<meta charset=\"UTF-8\">
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
\n<title>Flask and HTML5 Example<\/title>
\n<link rel=\"stylesheet\" href=\"{{ url_for('static', filename='style.css') }}\">
\n<\/head>
\n<body>
\n<h1>Welcome to Flask with HTML5!<\/h1>
\n<p>{{ message }}<\/p> <!-- Python\uc5d0\uc11c \uc804\ub2ec\ub41c \ubcc0\uc218 \ud45c\uc2dc -->
\n<\/body>
\n<\/html>
\n<\/code><\/div>\n<\/div>\n

5. Flask\uc5d0\uc11c \ubcc0\uc218 \uc804\ub2ec\ud558\uae30<\/h3>\n

Flask\uc758 render_template<\/code> \ud568\uc218\uc5d0\uc11c index.html<\/code>\ub85c \ubcc0\uc218\ub97c \uc804\ub2ec\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

app.py<\/code>\uc5d0 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n

\n
@app.route('\/')
\ndef home():
\nreturn render_template('index.html', message=\"Hello from Flask!\")
\n<\/code><\/div>\n<\/div>\n

6. CSS \ubc0f JavaScript \ud30c\uc77c \ucd94\uac00 (static\/style.css<\/code>)<\/h3>\n

static<\/code> \ud3f4\ub354\uc5d0 style.css<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uc5ec HTML\uc5d0 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

\n
\/* style.css *\/
\nbody {
\nfont-family: Arial, sans-serif;
\nbackground-color: #f4f4f4;
\ntext-align: center;
\npadding: 50px;
\n}
\n<\/code><\/div>\n<\/div>\n

7. \uc11c\ubc84 \uc2e4\ud589<\/h3>\n

\ub9c8\uc9c0\ub9c9\uc73c\ub85c Flask \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n

\n
bash<\/div>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
python app.py
\n<\/code><\/div>\n<\/div>\n

\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/127.0.0.1:5000<\/code>\uc5d0 \uc811\uc18d\ud558\uba74 HTML5 \ud398\uc774\uc9c0\uac00 \ubcf4\uc785\ub2c8\ub2e4.<\/p>\n

\uc774\uc640 \uac19\uc774 Python(Flask)\uacfc HTML5\ub97c \uc5f0\ub3d9\ud558\uc5ec \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS\uc640 JavaScript\ub294 static<\/code> \ud3f4\ub354\uc5d0 \ucd94\uac00\ud558\uc5ec HTML\uc5d0\uc11c \ubd88\ub7ec\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"

Python\uacfc HTML5\ub97c \uc5f0\ub3d9\ud558\uc5ec \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc5d0\ub294 \uc8fc\ub85c Flask\ub098 Django\uc640 \uac19\uc740 Python \uc6f9 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 Flask\ub97c \uc608\ub85c \ub4e4\uc5b4 \uc124\uba85\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. Flask\ub294 \ube44\uad50\uc801 \uac04\ub2e8\ud558\uba74\uc11c\ub3c4 \uc720\uc5f0\ud558\uac8c HTML\uacfc \uc5f0\ub3d9\ud560 \uc218 \uc788\uc5b4 \ud559\uc2b5\uc774\ub098 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. 1. Flask \uc124\uce58 \uba3c\uc800, Flask\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4. bash pip install Flask 2. Flask \uc571 \uae30\ubcf8 \uad6c\uc870 \ub9cc\ub4e4\uae30 Flask \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud558\uace0, \ud544\uc694\ud55c \ud30c\uc77c\uc744 … \ub354 \ubcf4\uae30 “\ud30c\uc774\uc158\uacfc html5 \uc5f0\ub3d9\ubc29\ubc95”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-6"],"_links":{"self":[{"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=64"}],"version-history":[{"count":3,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.soon7shop.kr\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}