목표물
거의 끝났지만 아직 완전히 끝난게 아니다. 가운데 정렬도 안되어있고 글자 크기도 뒤죽박죽이다. 나의 목표는 아래의 그림같이 나오게 하는거다
그러기 위해서 우선 가운데 정렬부터 하자. 그리고 검사에 들어가서 해당 태그를 클릭한후에 margin, padding 값을 더블클릭하면 임시로 변환할 수 있다. 변화를 줘가면서 균형을 맞추자.
그리고 글자 크기와 스타일도 검색해가면서 마음에 드는 걸로 바꾸어 봤다.
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
34
35
36
37
38
39
40
41
42
43
h1 {
color: #ecf0f1;
transition: color 0.5s ease-in-out;
text-align: center;
margin-bottom: 10px;
margin-top: 50px;
/* 컬러가 바뀔때 0.5초정도 시간을 두고 자연스럽게 바뀌게 하는 효과 */
}
.js-clock {
text-align: center;
margin-top: 120px;
margin-bottom: 10px;
border-bottom-width: 10px;
font-size: 70px;
font-family: "Times New Roman", Times, serif;
}
.js-form {
color: #ecf0f1;
text-align: center;
}
.js-toDoForm {
text-align: center;
padding-left: 13px;
}
.js-greetings {
color: #ecf0f1;
text-align: center;
border-left-width: 12px;
padding-left: 18px;
margin-top: 10px;
margin-bottom: 20px;
font-size: x-large;
font-family: Georgia;
}
.js-toDoList {
color: #ecf0f1;
text-align: center;
font-family: "Times New Roman", Times, serif;
}
input 상자 없애기
근데 input 상자가 여전히 보인다. input 상자가 안보이게 하고 싶고 밑줄도 긋고 싶다. 그리고 글자크기도 조금 키우고 italic 채로도 바꾸고 싶다.
역시 구글 영어 검색이 짱이다. stackflow에서 많은 도움을 받았다. input 에다가 스타일을 입혀준다는 것을 발견했고.크롬에서 placeholder 를 변경해야 할때는 ::placeholder 를 쓰는 것을 알아냈다. 그리고 코드가 끝나고 난후에 세미콜론을 반드시 붙여야 한다는 것도 배웠다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
input[type="text"] {
background: transparent; /*이럼 상자가 보이지 않게 된다.*/
border: none;
color: white;
font-size: 20px;
width: 20%;
padding: 12px 50px;
margin: 2px;
text-align: center;
} /*반드시 코드 끝에 세미콜론(;) 을 붙여주자! 안그럼 인식못한다. */
::placeholder {
/* Firefox, Chrome, Opera */
color: white;
font-style: italic;
font-size: 20px;
text-decoration: underline;
}
목록 똑바로 정렬하기
여기서 끝난게 아니다. 목록이 가운데로 왔지만 계속 정렬이 뻐드렁니 처럼 들쑥날쑥 하다. 그래서 구글링을 또 한다. 결국 알아냈다.
우선 ul 태그를 div 태그로 감싸고 div 태그에다 parent 라는 클래스를 부여한다.
그러고 ul 안에 display: inline-block; 부여하면 보기좋게 줄을 선다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
text-align: center;
}
.parent ul {
display: inline-block;
text-align: left;
}
.parent li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
그럼 그전에 글에서 잠깐 봤던것 처럼 이렇게 나타난다. 짜잔!
그치만 아직 버그가 남아있다. 새로고침을 하면 날씨 정보가 사라진다는 것이다. 콘솔에 가본 결과 fetch 함수 안에 있는 url 에서 lng = undefined 이라고 뜬다.
근데 분명 localstorage 에는 value 값에 longitutde 가 명확하게 저장되어있는데도 불구하고 말이다.
우선 니콜라스 쌤의 깃헙 저장소를 보아도 당최 모르겠다. 우선 여기까지 하고 나중에 파고들어보자!
(해결했다. 이 전 글에서 나와있듯이 getWeather(parsedCoords.latitude, parsedCoords.longitude); 라고 해줬어야 했다. )
느낀점: 확실히 html 하고 python 강의를 들으면서 시행착오를 겪어보니 javascript 기초강의를 이해하기 쉬웠다. 다 연결되는것 같다. 하지만 또다시 느끼는 것은 본인이 스스로 코드를 짜봐야한 다는 것이다. 백날천날 남이 짜주는 코드를 복붙하면 절대로 늘지 않는다. 깜박이는 커서앞에서 꿀먹은 손벙어리가 되어버리고 만다. 또한 구글링의 중요성과 위대함을 또다시 발견하였다. 이럴때는 영어를 배워둔게 천만 다행이라고 생각한다.