index.html

Download
html 106 lines 4.0 KB 
  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Weather App</title>
  7    <link rel="stylesheet" href="style.css">
  8</head>
  9<body>
 10    <div class="app">
 11        <header class="header">
 12            <h1>Weather App</h1>
 13            <p class="subtitle">μ‹€μ‹œκ°„ 날씨 정보</p>
 14        </header>
 15
 16        <div class="search-section">
 17            <input type="text" id="cityInput" placeholder="λ„μ‹œ 이름을 μž…λ ₯ν•˜μ„Έμš” (예: Seoul, Tokyo)" autocomplete="off">
 18            <button id="searchBtn">검색</button>
 19        </div>
 20
 21        <div class="quick-cities">
 22            <button class="city-btn" data-city="Seoul">μ„œμšΈ</button>
 23            <button class="city-btn" data-city="Tokyo">도쿄</button>
 24            <button class="city-btn" data-city="New York">λ‰΄μš•</button>
 25            <button class="city-btn" data-city="London">런던</button>
 26            <button class="city-btn" data-city="Paris">파리</button>
 27        </div>
 28
 29        <div id="loading" class="loading hidden">
 30            <div class="spinner"></div>
 31            <p>날씨 정보λ₯Ό κ°€μ Έμ˜€λŠ” 쀑...</p>
 32        </div>
 33
 34        <div id="error" class="error hidden">
 35            <p id="errorMessage"></p>
 36        </div>
 37
 38        <main id="weatherDisplay" class="weather-display hidden">
 39            <div class="weather-main">
 40                <div class="location">
 41                    <h2 id="cityName">-</h2>
 42                    <p id="country">-</p>
 43                </div>
 44                <div class="temperature">
 45                    <span id="temp">--</span>
 46                    <span class="unit">Β°C</span>
 47                </div>
 48                <div class="weather-icon">
 49                    <img id="weatherIcon" src="" alt="날씨 μ•„μ΄μ½˜">
 50                </div>
 51                <p id="description" class="description">-</p>
 52            </div>
 53
 54            <div class="weather-details">
 55                <div class="detail-item">
 56                    <span class="label">체감 μ˜¨λ„</span>
 57                    <span id="feelsLike" class="value">--Β°C</span>
 58                </div>
 59                <div class="detail-item">
 60                    <span class="label">μŠ΅λ„</span>
 61                    <span id="humidity" class="value">--%</span>
 62                </div>
 63                <div class="detail-item">
 64                    <span class="label">풍속</span>
 65                    <span id="windSpeed" class="value">-- m/s</span>
 66                </div>
 67                <div class="detail-item">
 68                    <span class="label">κΈ°μ••</span>
 69                    <span id="pressure" class="value">-- hPa</span>
 70                </div>
 71                <div class="detail-item">
 72                    <span class="label">κ°€μ‹œκ±°λ¦¬</span>
 73                    <span id="visibility" class="value">-- km</span>
 74                </div>
 75                <div class="detail-item">
 76                    <span class="label">ꡬ름</span>
 77                    <span id="clouds" class="value">--%</span>
 78                </div>
 79            </div>
 80
 81            <div class="sun-times">
 82                <div class="sun-item">
 83                    <span class="sun-label">일좜</span>
 84                    <span id="sunrise" class="sun-value">--:--</span>
 85                </div>
 86                <div class="sun-item">
 87                    <span class="sun-label">일λͺ°</span>
 88                    <span id="sunset" class="sun-value">--:--</span>
 89                </div>
 90            </div>
 91
 92            <div class="update-info">
 93                <p>λ§ˆμ§€λ§‰ μ—…λ°μ΄νŠΈ: <span id="updateTime">--</span></p>
 94            </div>
 95        </main>
 96
 97        <footer class="footer">
 98            <p>Powered by <a href="https://openweathermap.org/" target="_blank">OpenWeatherMap</a></p>
 99            <p class="note">β€» 데λͺ¨μš© APIλ₯Ό μ‚¬μš©ν•˜λ©°, μ‹€μ œ μ„œλΉ„μŠ€μ—μ„œλŠ” 자체 API ν‚€κ°€ ν•„μš”ν•©λ‹ˆλ‹€.</p>
100        </footer>
101    </div>
102
103    <script src="app.js"></script>
104</body>
105</html>