각진 세상에 둥근 춤을 추자

[API] 1. 기상청 단기예보 조회 서비스 - 화면 구현 본문

프로젝트/공공데이터 포털 API

[API] 1. 기상청 단기예보 조회 서비스 - 화면 구현

circle.j 2024. 1. 16. 13:31

공공데이터 포털 API 중 기상청 단기예보 조회 서비스를 이용한다.

장소 검색에 따라 장소별 날씨를 조회할 수 있다. 

 

구현 화면 
  • 메인 화면
  • 검색 결과 화면

 

1. HTML 

 

(1) 메인 화면 코드 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="/Weather/css/style.css">
</head>
<body>
    <div id="wrapper">
        <header>
            <img src="/Weather/img/weather.png">
            <p>날씨 단기예보 검색</p>
        </header>
        <main>
            <div class="ct_msg">
                <p>장소를 검색하세요</p>
            </div>
            <div class="ct_search">
                <div class="search_bar">
                    <img src="/Weather/img/search.png">
                    <input class="searchText" type="text" placeholder="장소 입력 후 검색 버튼 클릭">
                </div>
                <div class="btnSearch">검색</div>
            </div>
        </main>
        <footer>
            <div class="ct_footer">
                Copyright© circle All Rights RESERVED.
            </div>
        </footer>
    </div>
</body>
</html>

 

(2) 검색 결과 화면 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search</title>
    <link rel="stylesheet" href="/Weather/css/style.css">
</head>
<body>
    <div id="wrapper">
        <header>
            <img src="/Weather/img/weather.png">
            <p>날씨 단기예보 검색</p>
        </header>
        <main>
            <div class="ct_search">
                <div class="search_bar">
                    <img src="/Weather/img/search.png">
                    <input class="searchText" type="text" placeholder="장소 입력 후 검색 버튼 클릭">
                </div>
                <div class="btnSearch">검색</div>
            </div>
            <div class="ly_content">
                <div class="ct_map">map</div>
                <div class="ct_weather">weather</div>
            </div>
        </main>
        <footer>
            <div class="ct_footer">
                Copyright© circle All Rights RESERVED.
            </div>
        </footer>
    </div>
</body>
</html>

 

2. CSS 

 

전체 CSS 코드

더보기 
/* common css */
* {
margin: 0;
padding: 0;
font-family: 'Lato','Nanum Gothic',dotum,'돋움',arial,sans-serif;
font-size: 15px;
font-weight: 400;
box-sizing: border-box;
}

ul, ol {list-style: none;}
a {text-decoration: none; color: #000000;}
input, textarea {outline: none;}

/* wrapper */
#wrapper {
    width: 100vw;
}

/* 헤더 */
header {
    width: 100%;
    height: 80px;
    color:#F9F7F7;
    background: #112D4E;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 23px;
}
header > img {
    width: 48px;
}
header > p {
    font-size: 30px;
    font-weight: 600;
}

/* 메인 */
main {
    width: 100%;
    height: calc(100vh - 130px);
    margin-top: 80px;
    margin-bottom: 50px;
    background: #F9F7F7;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

/* 푸터 */
footer {
    width: 100%;
    height: 50px;
    background: #DBE2EF;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.ct_footer {
    font-size: 15px;
}

/* Main Page */
.ct_msg {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ct_msg > p {
    font-size: 50px;
    font-weight: 600;
}
.ct_search {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.search_bar {
    position: relative;
}
.search_bar > img {
    position: absolute;
    left: 20px;
    top: 21px;
    width: 30px;
}
.search_bar > .searchText {
    width: 700px;
    height: 70px;
    font-size: 30px;
    padding-left: 72px;
    padding-right: 30px;
    border: 1px solid #D2DFE5;
    border-radius: 5px;
}
.btnSearch {
    border: 1px solid;
    width: 100px;
    height: 70px;
    font-size: 30px;
    font-weight: 600;
    line-height: 68px;
    text-align: center;
    background: #3F72AF;
    color:#F9F7F7;
    border: 1px solid #3F72AF;
    border-radius: 4px;
}
.btnSearch:hover {
    cursor: pointer;
}

/* Search Page */
.ly_content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.ct_map {
    width: 48%;
    height: 600px;
    background: #fff;
    border: 1px solid #D2DFE5;
}
.ct_weather {
    width: 48%;
    height: 600px;
    background: #fff;
    border: 1px solid #D2DFE5;
}
저작자표시

'프로젝트 > 공공데이터 포털 API' 카테고리의 다른 글

[API] 3. 기상청 단기예보 조회 서비스 - 공공데이터포털 API  (0) 2024.01.17
[API] 2. 기상청 단기예보 조회 서비스 - KakaoMap API  (0) 2024.01.17
'프로젝트/공공데이터 포털 API' Related Articles more