💡 API 연동 방법: openweathermap.org에서 무료 가입 후 API 키 발급 → 아래 JS 코드의 YOUR_API_KEY 부분에 붙여넣기
🔍
빠른 선택:
⚠️ 도시를 찾을 수 없습니다. 영문 도시명으로 다시 시도해보세요.
날씨 정보를 가져오는 중...
🌤

오늘의 날씨를 확인하세요

도시 이름을 검색하거나
위의 빠른 선택 버튼을 클릭해보세요

—
—
00:00:00 —
🌤
—°C
—
체감온도: —
💧
—
습도
🌬
—
풍속
📊
—
기압
☁️
—
구름량
🌅 일출 · 일몰
🌅
—
일출
🌇
—
일몰
🌡 오늘의 기온 범위
🥶
—
최저
🥵
—
최고
👁 가시거리
🔭
—
km 앞까지 보임
📍 위치 좌표
🗺
—
—
위도 / 경도
📚

이 페이지에서 배울 수 있는 것들 (클릭해서 펼치기)

▼

🏗 HTML — 구조와 시맨틱

  • input, button 태그로 검색 인터페이스 구성
  • id 속성으로 JS에서 특정 요소 선택 (getElementById)
  • onclick 이벤트 핸들러를 HTML에 직접 연결하는 방법
  • 의미있는 클래스명으로 구조적 마크업 작성

🎨 CSS — 스타일과 레이아웃

  • :root의 CSS 변수(--변수명)로 색상 일괄 관리
  • display: grid와 grid-template-columns로 카드 배치
  • @keyframes와 animation으로 float·spin 효과
  • backdrop-filter: blur()로 유리 질감(glassmorphism) 구현
  • @media (max-width: 600px)로 모바일 반응형 처리
  • transition으로 hover 시 부드러운 변화

⚙️ JavaScript — 동작과 데이터

  • fetch() + async/await로 외부 API 비동기 호출
  • document.getElementById()로 DOM 요소 선택 후 .textContent 변경
  • classList.add/remove/toggle()로 클래스 동적 제어
  • setInterval()로 1초마다 시계 업데이트
  • try/catch로 API 오류 처리
  • 조건문(if/else)으로 날씨 상태별 이모지 분기
  • 전역 변수로 현재 데이터 저장 후 단위 변환(°C ↔ °F)