본문 바로가기

전체 글90

8. 영화 앱에 여러 기능 추가하기 화면 이동을 시켜주는 장치인 라우터를 설치해보자. Home은 영화 앱 화면으로 이동시켜주고, About은 개발자 자기 소개 화면으로 이동시켜준다. components 폴더에 Movie 컴포넌트 옮기고 routes 폴더에 라우터가 보여줄 화면을 만든다. 먼저 Home 부터 꾸며보자. .container { height: 100%; display: flex; justify-content: center; } .loader { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; font-weight: 300; } .movies { display: grid; grid-template-columns: repe.. 2020. 8. 11.
[Vanilla-JS] 2. Styles part 먼저 color를 가져와보자. 하기전에 각 브라우저에는 각각 기본 스타일이 설정되어 있으며, 이로 인해 브라우저간에 표시가 생각처럼되지 않을 때가 있기 때문에 미리 각 브라우저의 스타일을 초기화하기 위해서 사용하는 reset.css를 사용! https://meyerweb.com/eric/tools/css/reset/ 여기서 코드를 복사해서 reset.css 파일을 만든 후 붙여넣기를 해준다. 그 후에 styles.css에 import canvas는 html태그이다. 자바스크립트로 작업할 때는 id를 사용하고, 스타일은 class를 사용할거다. @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMac.. 2020. 8. 10.
[Vanilla-JS] 1. Project Setup 노마드코더 www.youtube.com/playlist?list=PL7jH19IHhOLNtwXhfYrbrqM6-CYrVkUWy 먼저 깃허브를 새로 생성하자. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 9.
7. 리액트 영화 앱 다듬기 영화 장르 props 를 추가해보자. genres props가 배열이므로 map() 함수를 사용할거다. genres props를 ul, li 엘리먼트로 감싸 출력할 것. CSS를 수정해보자. * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: #eff3f7; height: 100%; } .movies .movie { background-color: white; margin-b.. 2020. 8. 8.

티스토리툴바