Mini Projects (66) 썸네일형 리스트형 Modal 복습 HTML Open Modal Hello World Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor natus cupiditate, obcaecati odio sit ducimus eos dolores accusantium tenetur rem. CSS * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } .btn { cursor: pointer; background: #8fcfd1; color: white; font-weight: 700; font-size: 16px; padding: 10px 20px; border: none; border-rad.. Menu Slider & Modal (6) - wrap up 1. HTML에서 - Menu slider나 modal 모두 일단 순서대로 html에 작성 - modal을 감싸는 modal container를 만들어서 거기에 어두운 배경색을 깔고 opacity를 적당히 줘서 뒷배경 전체 흐리게 하는 효과 2. CSS에서 - li:first-of-type 이렇게 하면 li 중 첫번째 li가 select 된다 - position:fixed를 하면 document flow에서 벗어나서 부모 element를 기준으로 배치되고 거기에 고정. - nav에 width:200px주고 transform:translateX(-100%);해서 일단 화면에서 없앤다. -> 나중에 toggle해서 body에 showNav라는 class list가 추가됐을때 transform:translat.. Menu Slider & Modal (5) - Toggle 본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com const toggle = document.getElementById('toggle'); const close = document.getE.. Menu Slider & Modal (4) - Style Modal 본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com .modal-container { background-color: rgba(0, 0, 0, 0.6); display: none; posit.. Menu Slider & Modal (3) - Style Header & Main Section 본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 가장 위 Header 부분 꾸미기. header { background-color: var(--primary-color); color: #.. Menu Slider & Modal (2) - Style Nav 본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 왼쪽 Navigation Bar을 CSS로 꾸며보겠다. nav { background-color: var(--primary-color); .. Menu Slider & Modal (1) - HTML 본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다. https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 20 Web Projects With Vanilla JavaScript Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries) www.udemy.com 0. 페이지 기본 모습 toggle 버튼 눌렸을 때 옆에 나타나는 메뉴 슬라이더 ( 태그) Sign Up 버튼을 눌렸을 때 나타나는 모달창.. Wealth List (6) - Reduce() // calculate entire wealth function calEntireWealth() { const total = data.reduce((acc, user) => (acc += user.money), 0); const div = document.createElement("div"); div.innerHTML = `Total: ${formatMoney(total)}`; main.appendChild(div); } reduce Method는 하나의 value를 return해준다. data를 받아온다 => reduce method를 돌리는데 acc(accumulator)에 user.money 값을 하나하나씩 더해준다. (시작 값은 0) => 그러면 data에 있는 모든 money 값이 다 더해져서 .. 이전 1 2 3 4 5 6 7 ··· 9 다음
