본문 바로가기

분류 전체보기

 (207)
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 값이 다 더해져서 ..
Wealth List (5) - filter() function showOnlyMios() { data = data.filter((elem) => elem.money > 1000000); updateDOM(); } filter 함수는 크게 어렵지 않았다 array에서 특정 조건을 만족하는 element들만 모아서 새로운 array를 return해준다.

티스토리툴바