이번 글에서는 Flask 코드에서 자주 쓰이는 template() 함수에 대해 알아보고, HTML에서 줄바꿈이 어떻게 자동으로 일어나는지, 그리고 태그들의 동작 원리를 실제 코드와 함께 쉽게 설명해드릴게요 :)
템플릿 함수를 사용하는 이유는?
템플릿 함수 예시
def template(contents, content):
return f'''<!doctype html>
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{contents}
</ol>
{content}
</body>
</html>
'''왜 템플릿 따로 함수로 만들었을까요?
- 메인 페이지(/)와 상세 페이지(/read/1/) 모두 동일한 HTML 구조를 반복해서 사용하고있어요.
- 다만, 바뀌는 부분은
- 왼쪽 글 목록 → contents
- 오른쪽 본문 내용 → content
- 그래서 공통 구조는 함수로 재사용하고, 바뀌는 부분만 인자로 전달하는게 편리해요.
템플릿 없이 짰을 때 문제점
@app.route('/')
def index():
return '''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>...</ol>
<h2>Welcome</h2>
Hello, Web
</body>
</html>
'''- 글이 추가될 때마다 <li>를 직접 추가해야 하고, 코드 중복이 많아져서 관리와 유지보수가 어렵습니다.
실제 사용하는 예
@app.route('/read/<int:id>/')
def read(id):
title = ''
body = ''
for topic in topics:
if topic['id'] == id:
title = topic['title']
body = topic['body']
break
return template(getContents(), f'<h2>{title}</h2>{body}')- 본문 내용을 담은 f'<h2>{title}</h2>{body}'도 템플릿 함수에 넘겨서 화면에 표시하는 구조!
줄바꿈은 따로 안했는데… 왜 자동으로 줄이 나눠질까요?
return template(getContents(), f'<h2>{title}</h2>{body}')- 코드상에서는 줄을 나눠서 쓴 적이 없지만,
- 브라우저에서는 이렇게 보여요:
HTML
html is...
줄이 바뀌는건 HTML 태그의 성격 덕분이에요.
<h1>, <h2>, <p>, <ol>, <ul>, <div> 등은 "블록 요소(Block Element)" 라고 해요.
- 이 태그들은 자기 줄을 하나씩 차지하면서 자동 줄바꿈을 해줘요.
- 그래서 <h2> 뒤에 바로 텍스트가 이어져 있어도, 브라우저는 줄을 바꿔서 아래에 출력하는 거죠.
반대로 줄바꿈 안 되는 태그도 있어요
- <span>, <b>, <i> 같은 인라인 요소들은 줄바꿈 없이 한 줄에 나란히 배치됩니다.
<span>hello</span><span>world</span>→ 브라우저에서는: helloworld 이렇게 한 줄로 이어져서 나와요
실제 코드를 다시 보면:
f'<h2>{title}</h2>{body}'이 문자열은 HTML5 문법 기준에서:
- <h2> → 블록 요소라 한 줄 차지
- {body} → 다음 줄에 출력됨
즉, 줄바꿈은 우리가 한 게 아니라 HTML이 자동으로 해주는 것이라고 생각하면 됩니다.
마지막 정리!
오늘도 Flask에 대해 정리 해 보았어요.
이해 안되는게 있다면 댓글로 남겨주세요 :)
'👩🏻💻 개발 공부' 카테고리의 다른 글
| [Flask 입문 3탄] 리스트, 딕셔너리, f-string, 따옴표까지 한 번에 이해하기! (0) | 2025.04.15 |
|---|---|
| [Flask 입문 2탄] HTML 구조 이해하며 Flask 라우팅 따라잡기 (h1, a, ol 태그) (0) | 2025.04.14 |
| [Flask 입문 1탄] 파이썬으로 웹서버 만들기 – 라우팅 기초까지 쉽게 배우기! (0) | 2025.04.14 |
| 📝 재귀함수가 뭐야? – 정말 초보를 위해 이해하기 쉽게 설명 (0) | 2025.04.07 |
| 파이썬은 어떤 언어일까? | 인터프리터, 동적 타이핑, 활용 분야까지 쉽게 이해하기 (0) | 2025.04.06 |
