지난 시간엔 Flask를 처음 설치하고, 간단한 라우팅을 통해 텍스트를 브라우저에 띄워보는 기본을 배웠어요.
이번에는 Flask 코드 속에 들어 있는 HTML 태그들을 하나하나 정확히 해석하면서, 라우팅과 함께 작동하는 구조를 더 깊이 이해해볼게요!
예제 코드
우선 예제 코드부터 다시 한 번 살펴볼게요.
from flask import Flask
app = Flask(__name__)
topics = [
{'id': 1, 'title': 'html', 'body': 'html is...'},
{'id': 2, 'title': 'css', 'body': 'css is...'},
{'id': 3, 'title': 'javascript', 'body': 'javascript is...'}
]
@app.route('/')
def index():
liTags = ''
for topic in topics:
liTags += f'<li><a href="/read/{topic["id"]}">{topic["title"]}</a></li>'
return f'''<!doctype html>
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
<h2>Welcome</h2>
Hello, Web
</body>
</html>
'''
@app.route('/read/<id>/')
def read(id):
print(id)
return 'Read' + id
app.run(debug=True)HTML 태그 해석하기
코드 안에서 우리가 직접 작성한 HTML 부분을 차근차근 해석해볼게요.
<h1><a href="/">WEB</a></h1>
- <h1>은 가장 큰 제목 태그입니다. h1~h6까지 있어요.
- <a href="/">는 이 제목에 클릭 가능한 링크를 걸어주는 태그에요.
- 링크 주소는 /, 즉 홈화면을 뜻합니다.
- 이 태그는 브라우저에서 "WEB"이라는 큰 글씨로 보이고, 클릭하면 다시 메인화면(/)으로 이동해요.
<ol>
<li><a href="/read/1">html</a></li>
<li><a href="/read/2">css</a></li>
<li><a href="/read/3">javascript</a></li>
</ol>- <ol>: 순서가 있는 리스트를 만들어줍니다. 앞에 숫자가 자동으로 붙어요.
- <li>: 리스트 항목을 한 줄씩 추가하는 태그입니다.
- <a href="/read/1">html</a>: "html"이라는 텍스트를 클릭하면 /read/1 경로로 이동하도록 링크가 걸려 있어요.
[a href 추가 예시]
<a href="https://google.com">Google로 가기</a>이 코드는 "Google로 가기" 글자를 클릭하면 https://google.com 으로 이동하게 링크를 걸어 둔 코드입니다.
[<ol> <li> 추가 예시]
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
위의 코드를 실행시키면 아래와 같은 결과가 나옵니다.
1. HTML
2. CSS
3. JavaScript
<ol>을 통해 순서가 있는 리스트임을 알 수 있고, 각각 <li>를 통해 순서를 알 수 있습니다.
<ul>이라고 적힌 경우, 숫자로 된 순서 리스트가 아닌 '점'으로 표시 됩니다.
오늘 내용 정리 !
이번 내용은 Flask 안에서 자주 쓰이는 기본 html 용어들을 살펴보았어요!
꼭 이해하고 넘어가면 좋을 것 같아요 :)
'👩🏻💻 개발 공부' 카테고리의 다른 글
| [Flask 입문 4탄] 템플릿 함수와 HTML 자동 줄바꿈의 비밀까지 파헤치기 (0) | 2025.04.15 |
|---|---|
| [Flask 입문 3탄] 리스트, 딕셔너리, f-string, 따옴표까지 한 번에 이해하기! (0) | 2025.04.15 |
| [Flask 입문 1탄] 파이썬으로 웹서버 만들기 – 라우팅 기초까지 쉽게 배우기! (0) | 2025.04.14 |
| 📝 재귀함수가 뭐야? – 정말 초보를 위해 이해하기 쉽게 설명 (0) | 2025.04.07 |
| 파이썬은 어떤 언어일까? | 인터프리터, 동적 타이핑, 활용 분야까지 쉽게 이해하기 (0) | 2025.04.06 |
