항해99 사전학습 3일차(To-do-list 만들기)

 CSS 기초수업을 드디어 다 마쳤다. 코드를 거의 다 주셨지만 내가 만든 웹페이지를 보니 살짝 뿌듯하기도 하고.. 오늘은 강의가 많지 않아서 비교적 빨리 끝났다. 강의를 들으면서 설명해 주시는 내용이 어떤 것을 의미하는지, 어떤 동작을 하는지 이해하고 있고, 눈으로 강의를 보지 않고 소리만 들으면서 같이 코드를 써 내려가는 나를 보니 3'일만에 많은 것을 배웠구나..'라는 생각이 들었다. 그렇지만 아직 내가 모르는 부분이 많고, 아직 경험해보지 못한 것들이 많이 있기 때문에 나대지는 말아야지.. 오늘도 마찬가지로 헷갈렸던 부분과 새로 알게 된 부분에 대해서 작성하고자 한다.

 

---

1. api 사용시 주의사항(https://api.thecatapi.com/v1/images/search)

function renderGalleryItem() {
    let url = 'https://api.thecatapi.com/v1/images/search'
    fetch(url).then(res => res.json()).then((data) => {
        let imgurl = data[0]['url']
        $('#background').css('background-image', `url('${imgurl}')`)
    })
}

 사실 매우 기초적이며 당연한 부분인데, 강의를 따라 하다 보면 어디서 문제가 생겼는지 모르는 상황이 생긴다. 오늘도 마찬가지로 강의를 따라서 웹페이지를 만들고 있었는데 이미지가 나오지 않았다. 분명 코드도 똑같이 작성했는데 말이다.. 그래서 당황을 하다가 api를 제공하는 페이지를 들어갔더니 다른 api들과는 다르게 리스트[] 형태로 되어있었다.. 강의에는 data['url']이라고 써져 있었는데 실제 api는 리스트 형태였기 때문에 [0]이라고 위치를 제시해줘야 했다. 당연하지만 중요한 사실 하나를 이번 경험을 통해 알게 되었다.

 

 

---

2. 간단한 코드

list-style: none; // li형태에서 점을 없애준다.
display: none;	// 지정해준 부분을 안보이게 한다.
display: block;	// 지정해준 부분을 보이게 한다.

 

 

---

3. 클릭 시 화면을 보이게, 안 보이게 하기

$('#todoIcon').click(function(){
    $('#modalBox').fadeIn().css('display', 'flex');
})
$('#main').click(function(){
    $('#modalBox').fadeOut();
})

 어려운 내용은 아니고 새롭게 배운 fadeIn, fadeOut이다. 이는 Click을 했을 때 지정해 준 것(modalBox)을 보이거나 안 보이게 해주는 코드이다. 여기서 fadeIn 대신에 show를 사용해도 같은 동작을 하며, fadeIn은 서서히 움직인다.

 

 

---

4. 가운데 정렬

width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;

 화면 가운데에 정렬을 하는 코드이다. 정렬은 되는데 '왜 정렬이 되는 거지?'라는 생각이 들었다. 그래서 찾아보고, 일일이 조정해 보면서 답을 알아냈다. 일단 top, left 50%는 위와 왼쪽으로부터 50% 위치에 정렬하는 부분이다. 사실 이렇게만 하면 '가운데 정렬이 돼야 하는 게 아닌가?'라는 생각이 든다. 하지만 저 코드는 width가 300px인 박스의 왼쪽 상단 모서리를 가운데 정렬하는 코드이다. 따라서 width가 300px인 박스를 가운데 정렬하려면 그의 절반인 150px을 뒤로 돌려놔야 한다. 따라서 margin-left와 top이 -150px인 것이다. 이해하고 나니 별거 아닌 것 같다는 생각이 들기도 하고... 

 

 

---

 오늘 배운 내용 중 중요한 것은 이 정도라고 생각하며, 마지막으로 내가 만든 웹페이지를 끝으로 글을 마치고자 한다.

 

내가 만든 웹페이지: https://rladydqls99.github.io/momentum/

모멘텀앱 - 따라만들기