날씨 앱 디자인을 만들기 위한 HTML, CSS, 및 JavaScript 예제를 제공하겠습니다. 이 예제를 통해 실제 날씨 정보를 가져와 표시하는 날씨 앱 스타일 페이지를 만들 수 있습니다.
HTML 파일 생성:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>날씨 앱</title>
</head>
<body>
<div class="weather-app">
<div class="weather-header">
<h1>날씨 앱</h1>
</div>
<div class="weather-body">
<div class="weather-info">
<h2>서울의 현재 날씨</h2>
<p id="weather-description">맑음</p>
<p id="temperature">기온: 25°C</p>
<p id="humidity">습도: 50%</p>
</div>
<div class="weather-icon">
<img id="weather-icon" src="" alt="날씨 아이콘">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 스타일링 (styles.css 파일):
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.weather-app {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.weather-header h1 {
font-size: 24px;
margin: 0;
}
.weather-body {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.weather-info {
text-align: left;
padding: 10px;
}
.weather-icon img {
width: 100px;
height: 100px;
}
JavaScript 코드 (script.js 파일):
// script.js
const weatherDescription = document.getElementById("weather-description");
const temperature = document.getElementById("temperature");
const humidity = document.getElementById("humidity");
const weatherIcon = document.getElementById("weather-icon");
// 날씨 정보 가져오기 (예제에서는 하드코딩)
const fakeWeatherData = {
description: "맑음",
temperature: "25°C",
humidity: "50%",
iconUrl: "https://www.example.com/weather-icon.png",
};
// 날씨 정보 표시
weatherDescription.textContent = `날씨: ${fakeWeatherData.description}`;
temperature.textContent = `기온: ${fakeWeatherData.temperature}`;
humidity.textContent = `습도: ${fakeWeatherData.humidity}`;
weatherIcon.src = fakeWeatherData.iconUrl;
weatherIcon.alt = "날씨 아이콘";
이제 HTML, CSS, JavaScript 파일을 생성하고 코드를 복사하여 각 파일에 붙여넣은 후 웹 브라우저에서 실행합니다. 이 예제에서는 하드코딩된 가짜 날씨 데이터를 사용하므로 실제 날씨 데이터를 가져오려면 API를 사용해야 합니다.
'HTML 예제' 카테고리의 다른 글
| 스크롤링 텍스트: CSS 스크롤링 텍스트 효과 (0) | 2023.12.06 |
|---|---|
| 404 오류 페이지: 404 오류 페이지를 유쾌하게 디자인 (0) | 2023.12.06 |
| 나만의 스티커 만들기: HTML5 <canvas>로 나만의 스티커 생성 (0) | 2023.12.06 |
| 3D 회전 메뉴: CSS 3D 변환으로 메뉴 항목 회전 효과 (0) | 2023.12.06 |
| 트위터 피드 스타일링: 트위터 피드를 모바일 앱처럼 스타일링 (0) | 2023.12.06 |
