토글기능 추가(날씨 토글)
챌린지 도중 다른 사람의 작품도 보았는데 그 중에 어떤 사람이 토글버튼을 추가해서 그 버튼을 누르면 날씨가 펼쳐지게 하였고 다시 누르면 날씨박스가 닫혀서 보이지 않았다. 무언가 내가 이 사이트랑 좀더 친밀해진 느낌이었고 재밌었고 깔끔했다. 그래서 나도 구현해보려고 했다. 로직을 순서대로 설명하자면.
- 우선 html 부터 손을 봐야한다. label과 button을 추가한다.
- 그리고 weather.js 에서 API로 정보를 전달받고 전달받은 정보를 button안에 있는 내용을 채워준다
- toggle.js 에서 버튼의 기능을 추가하고 활성화한다.
1. html 만들기
label과 button을 추가한다. 그리고 button안에 날씨의 내용을 추가한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="js_weather">
<label for="weatherBtn">
<img src="src/img/weather.png" alt="" class="weatherToggleImg" />
</label>
<!-- label.for = button.id 면 label을 눌렀을때 button도 같이 작동한다. 그리고 날씨 아이콘을 다운받고 label안에 img.src에 추가해주었다. -->
<button class="see_weather" id="weatherBtn">
<span class="weatherToggleImg">🔻</span>
<div class="weather_box non-showing">
<!-- 날씨 박스를 만들고 그 안에 날씨의 내용을 채워넣었다. -->
<!-- 도시/날씨/온도/체감온도 -->
<span class="city"></span>
<div class="weather">
<span class="weather_description"></span>
<img src="" alt="" class="weather_icon" />
</div>
<span class="current_temp"></span>
<span class="feel_like"></span>
</div>
</button>
</div>
2. weather.css 추가
클릭하기 전에는 label img와 화살표만 보이게 했고 둘다 크기를 어느정도 조정하고, 위치를 오른쪽 위에 위치하게 했다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.see_weather {
background: transparent;
outline: none;
border: none;
border: 1.5px solid white;
position: absolute;
top: 15vmin;
right: 5vmin;
width: 10vmin;
transform: rotateZ(0deg);
/* 버튼의 위치가 돌아가게 하는 property이다 */
transform-origin: top left;
border-radius: 0.9vmin;
transition: all 200ms linear;
}
/* 버튼의 위치와 크기 스타일을 설정했다. */
.see_weather:hover {
cursor: pointer;
border-color: pink;
background-color: rgba(236, 240, 241, 1);
}
/* 버튼에 커서를 올렸을때 스타일 */
.js_weather {
font-size: 2.1vmin;
font-weight: 700;
padding: 1vmin 1vmin;
}
/* weather 토글 전체의 크기 설정 */
그라고 버튼을 눌렀을때 non-showing class 가 없어지면서 weather-box 가 드러나고, button class 에 forWeatherBtnWidth가 추가된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.weather_box {
display: flex;
flex-direction: column;
transform: rotateZ(-90deg);
align-items: baseline;
}
.weather {
display: flex;
align-items: center;
justify-content: center;
}
.forWeatherBtnWidth {
background-color: rgba(236, 240, 241, 0.5);
font-size: 2vmin;
padding: 0px;
font-weight: 900;
color: black;
border: none;
border-top: 0.5vmin solid rgba(255, 255, 255, 0.7);
border-bottom: 0.5vmin solid rgba(255, 255, 255, 0.7);
top: 1vmin;
right: -5vmin;
width: 19vmin;
height: 26vmin;
transform: rotateZ(90deg); /* 왼쪽 위로 펼쳐지도록 함. */
transform-origin: top left;
}
.forWeatherBtnWidth:hover {
background-color: rgba(236, 240, 241, 0.7);
}
중요한것은 글자크기 위치를 설정할때 vmin을 사용하였다. viewport minimum의 약자로 viewport 즉, 모바일화면의 가로 세로중 최소넓이의 100분의 1의 크기를 의미한다. 즉 화면에 따라 수치가 비율적으로 알아서 달라진다는 의미.
그리고 js 기능을 추가해주었는데 그 기능은 다음글에서 설명하도록 하겠다.