10/20 HTML & 개인 과제1

내일배움캠프 오늘 학습 내용

 

• HTML 1주차
• 개인과제

 

웹 브라우저 작동

 

서버에서 브라우저가 request를 보내면 서버가 responce로 html 페이지를 띄워 주어 우리에게 화면을 보여준다. 정보만 있는 것을 CSS로 보기 좋게 꾸미고, JavaScript로 해당 웹 페이지가 동적으로 움직일 수 있게 해준다. HTML문서는 다양한 태그를 통해 내용을 나누고 사용할 수 있다. 

CSS는 HTML에서도 사용할 수 있는 style tag를 따로 빼낸 것에 가깝다. 이것을 이용하여 색깔, 문서 정렬, 크기, 폰트 등을 정리할 수 있다. 이런 CSS를 보다 더 보기 좋게 미리 만들어둔 것이 bootstrap이며 해당하는 코드를 가져와 버튼이나 다양한 경우에서 사용할 수 있는 리스트들을 제공한다. 

 

 

 

개인 과제 진행 사항

 

어제 통째로 가져왔던 JSON 파일을 파싱하여 필요한 정보만 화면에 띄우는 것에 성공하였다. 또, CSS를 어느 정도 이용하여 해당 내용을 보기 좋게 정리하여 가져올 수 있었다. 카드를 클릭하면 해당하는 id를 alert로 출력한다. Search는 입력된 이름을 가져와 그에 해당하는 데이터를 찾고 영화 정보를 출력하는 것까지 성공하였으나, 사용한 api에서 search기능을 제공한다는 것을 알게 되었기에 다음에는 그것을 활용해보기로 하였다. 또, CSS가 미흡하여 윈도우 화면 크기에 따라 출력하는 모양이 달라지기 때문에 여유가 된다면 이것을 더 개선해보고자 한다.

 

과제 진행 상황 1)기본 출력 2)카드 클릭시 id 출력 3) search