- 개요
지금까지 구한 텍스트, 그림으로 html 파일을 만들어봅시다.
파이썬으로 html 파일을 직접 작성할 것이고, html/css의 기초는 알고 있으셔야 합니다.
- html 파일 만들기
파이썬 코드의 정보 중 총 3개가 html 파일로 전달되어야 합니다.
1. 시간
안개 속보의 2번째 줄을 보면 속보가 나온 시간이 있습니다.
그림을 그린 시간보다 10분을 더해줘야 합니다.
2. 안개 현황 텍스트
2번째 전 포스트에서 안개 현황에 넣을 텍스트를 만들었습니다.
텍스트를 html에 넣기 좋게 태그를 입혀야합니다.
3. 시정 자료 그림
저번 포스트에서 vis.png라는 이름으로 저장했습니다.
4. 배치
전 아래와 같은 구조로 각 요소를 배치했습니다.
점이 찍혀있으면 클래스 이름입니다(e.g., div .container > div 태그의 클래스 이름이 container)
그럼 코드를 보죠.
최종적으로 plot.html 파일을 저장합니다.
"""
이 코드 내에서 정의가 안된 변수는 이전 포스트에서 정의된 것
"""
title_time = time + timedelta(minutes=10) # 10분 더함
sentence_html = ''.join([f'<p style="margin-top:0px; padding-top: 2px; padding-bottom: 2px">{sentence}</p>\n' for sentence in sentences]) # 태그를 씌워서 꾸밈
html_file = "plot.html" # 저장할 파일 이름
#css 파일을 따로 만들지 않고 style 태그를 html 파일에 직접 넣음
style_content = """
<style>
.container {
width: 1000px;
background-color: #eef2f7;
margin:auto;
}
.phen {
font-size: 20px;
color:#c84041;
text-align: center;
width: 100%;
}
ul {
list-style-type: square;
padding-left: 25px;
}
li {
font-weight: 600;
margin-bottom: 8px
}
.content {
width:98%;
background-color: white;
height: 250px;
margin:auto;
overflow: auto;
}
.content p {
margin:auto;
padding-top:18px;
padding-left:18px;
}
.img {
padding-top: 15px;
padding-bottom: 1px;
width: 100%;
display: flex;
justify-content:center;
}
</style>
"""
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{style_content}
</head>
<body>
<div class="container">
<div class="phen"> <h4>- 안개 -</h4></div>
<ul>
<li> [기상청속보] {title_time.strftime("%Y")}년 {title_time.strftime("%m")}월
{title_time.strftime("%d")}일 {title_time.strftime("%H")}시 {title_time.strftime("%M")}분</li>
<li> 속보 내용 </li>
</ul>
<div class="content">
<p><안개 현황과 전망></p>
<p>○ (현황) 현재 ({title_time.strftime('%H')})시, 경기내륙과 전라내륙을 중심으로 가시거리 200m 미만의 짙은 안개가 낀 곳이 있음</p>
<p>* 주요지점 가시거리 현황({title_time.strftime('%d')}일 {title_time.strftime('%H')}시 현재, 단위: m)</p>
{sentence_html}
<p>○ (전망) 전망에 해당하는 내용</p>
<p>문장 1</p>
<p>문장 2</p>
<p>문장 3</p>
</div>
<div class="img">
<img src="vis.png" style="width:30%; height:auto;" >
</div>
</div>
</body>
</html>
"""
# 저장
with open(html_file, "w") as f:
f.write(html_content)
- 결과
plot.html을 파일을 실행하면 아마 웹브라우저로 열릴 것입니다.
기상청 안개 속보 화면과 제가 만든 것을 비교해보죠.
margin, padding, height, width 등 디테일이 좀 아쉽긴 하지만 그래도 거의 똑같네요.
좀 더 똑같이 만들려면 개발자도구에서 기상청 안개 속보 화면의 css를 그대로 따오면 될 겁니다.
그럼 안개 속보 화면 만들기 포스트는 마치겠습니다.
'대기과학 > 프로그래밍' 카테고리의 다른 글
| [python] 스마트서울 도시데이터 센서(S-DoT)로 보는 집중호우 발생시 온도장: 2. 온도장 확인 및 레이더 에코와 비교 (0) | 2025.01.08 |
|---|---|
| [python] 스마트서울 도시데이터 센서(S-DoT)로 보는 집중호우 발생시 온도장: 1. 자료 전처리 (0) | 2025.01.07 |
| [python, html/css] 안개 속보 화면 만들기: 3. 시정 자료로 그림 그리기 (0) | 2024.12.05 |
| [python, html/css] 안개 속보 화면 만들기: 2. 자료 다운로드와 처리 (3) | 2024.12.04 |
| [python, html/css] 안개 속보 화면 만들기: 1. 흐름 및 계획 (0) | 2024.12.03 |