엘리스 AI 트랙🐇/토이 프로젝트🚗

[JavaScript 간단한 날씨 웹 만들기] html, css 구성

개발조각 2022. 7. 19. 21:55
728x90
반응형

이번에 간단하게 javascript로 날씨 웹을 만들어볼 예정입니다.😊

이번 날씨 웹은 간단하게 만드는거라 반응형으로 안만들었고,

한눈에 보이기 위해 모바일 크기로 제작하였습니다.

 

피그마로 작업

저는 디자인 작업 안하면 못만드는 병이 있어서...😅

디자인 작업을 해주었습니다.

 

디자인 작업은 처음 피그마를 써봤는데 

처음 써봐서 좀 버벅거리긴 했지만

그동안 써온 디자인 툴(포토샵, xd)와 유사해서 금방 익숙해졌습니다.

(디자인은 핀터레스트를 참고해서 간단하게 디자인해보았습니다.)

 

HTML

<body>
  <!-- day, night -->
  <div class="container day">
    <div class="top">
      <p id="location">서울, 강서구</p>
      <p id="time"></p>
    </div>

    <div class="middle">
      <div class="main_icon">날씨 아이콘</div>
      <p id="temperature"></p>
      <p id="WeatherInfo">맑음</p>
    </div>

    <span class="line"></span>
    <ul class="bottom">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32 192h320c52.94 0 96-43.06 96-96s-43.06-96-96-96h-32c-17.69 0-32 14.31-32 32s14.31 32 32 32h32c17.66 0 32 14.34 32 32s-14.34 32-32 32H32C14.31 128 0 142.3 0 160S14.31 192 32 192zM160 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h128c17.66 0 32 14.34 32 32s-14.34 32-32 32H128c-17.69 0-32 14.31-32 32s14.31 32 32 32h32c52.94 0 96-43.06 96-96S212.9 320 160 320zM416 224H32C14.31 224 0 238.3 0 256s14.31 32 32 32h384c17.66 0 32 14.34 32 32s-14.34 32-32 32h-32c-17.69 0-32 14.31-32 32s14.31 32 32 32h32c52.94 0 96-43.06 96-96S468.9 224 416 224z"/></svg>
        <p>바람</p>
        <p id="wind"></p>
      </li>
      <span></span>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M16 319.1C16 245.9 118.3 89.43 166.9 19.3C179.2 1.585 204.8 1.585 217.1 19.3C265.7 89.43 368 245.9 368 319.1C368 417.2 289.2 496 192 496C94.8 496 16 417.2 16 319.1zM112 319.1C112 311.2 104.8 303.1 96 303.1C87.16 303.1 80 311.2 80 319.1C80 381.9 130.1 432 192 432C200.8 432 208 424.8 208 416C208 407.2 200.8 400 192 400C147.8 400 112 364.2 112 319.1z"/></svg>
        <p>습도</p>
        <p id="humidity"></p>
      </li>
    </ul>
  </div>
</body>

container로 모바일 크기를 만들고

top, middle, bottom (3구역)으로 나누어 구성해주었습니다.

(svg는 fontawesome에서 가지고 왔습니다.)

https://fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

CSS

/* reset */
*{box-sizing: border-box; margin: 0; padding: 0;}
body{font-family: 'Noto Sans KR', sans-serif; line-height: 1;}
li{list-style: none;}

body{display: flex; justify-content: center; align-items: center; height: 100vh;}
.container{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 360px; height: 640px;}
.top, .middle, .bottom{text-align: center;}

/* top */
.top p:first-child{font-weight: 500; font-size: 20px;}
.top p:last-child{font-size: 14px; margin-top: 8px;}

/* middle */
.middle{margin-top: 80px;}
.middle .main_icon{margin: 0 auto; width: 72px; height: 72px; background: gray;}
.middle p:first-of-type{font-weight: 700; font-size: 64px; margin: 24px 0 16px 0;}

.line{margin-top: 40px; width: 32px; height: 1px;}
/* bottom */
.bottom{display: flex; align-items: center; margin-top: 48px;}
.bottom li{width: 100px;}
.bottom li svg{height: 32px;}
.bottom li p:first-of-type{margin-top: 12px;}
.bottom li p:last-of-type{margin-top: 4px; font-weight: 300; font-size: 14px;}
.bottom span{display: block; margin: 0 20px; width: 1px; height: 32px;}

/* 낮 */
.day{background: #DBE2EA; color: #2B323C;}

.day .line{background: #C2C5CC;}

.day svg{fill: #5D6169;}
.day .bottom li:first-child::after{background: #C2C5CC;}
.day .bottom li p:last-of-type{color: #5D6169;}
.day .bottom span{background: #C2C5CC;}


/* 밤 */
.night{background: #2B323C; color: #DBE2EA;}

.night .line{background: #979EA6;}

.night svg{fill: #A3AAB2;}
.night .bottom li:first-child::after{background: #979EA6;}
.night .bottom li p:last-of-type{color: #A3AAB2;}
.night .bottom span{background: #979EA6;}

나중에 일출 일몰 시간에 따라 낮 모드, 밤 모드로 꾸며주기 위해

  • 낮이면 day
  • 밤이면 night

로 구성해 주었습니다.

728x90
반응형