JavaScript208 [JavaScript] 아이템 동적추가 삭제 오늘은 아이템 동적추가 및 삭제를 해보겠습니다. 아래코드를 참고해주세요. index.html grocery bud submit clear items styles.css/*=============== Fonts===============*/@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");/*=============== Variables===============*/:ro.. 2024. 6. 7. [Javascript] 문단 동적생성 index.html tired of boring lorem ipsum? paragraphs: generate app.jsconst text = [ `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant tootsie roll lollipop. Cupcake lemon drops bear claw gummies. Jelly bear claw gummi b.. 2024. 6. 1. [Javascript] count-down timer 오늘은 카운트 다운을 해보겠습니다. index.html old iphone giveaway giveaway ends on Sunday, 24 April 2020, 8:00am Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit molestiae cum libero atque ut voluptate qui consectetur aliquid incidunt voluptatem quos, dolore, non commodi quae.. 2024. 5. 26. [Javascript] tabs 오늘은 자바스크립트로 tab을 이동하는 예제를 가져왔습니다. index.html about Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, aperiam! history vision goals history I'.. 2024. 5. 20. [Javascript] Scroll 오늘은 버튼을 누를시, 해당 화면으로 스크롤되는 기능을 만들어보겠습니다. 아래 코드를 참고하셔서 동작을 확인하세요. index.html home about services tours scroll project Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas eos neque sunt in? Id, necessitatibus quos quisquam distinctio laudantium fugiat? explore tours about us our services featured tours copyright © backroads travel tours company . all rights reserved App.js // ID 'date'인.. 2024. 5. 10. [Javascript] 식당 메뉴판 만들기 오늘은 식당 메뉴판을 만들어보겠습니다. 맨 아래에 이미지 파일들을 원하는 위치에 다운받으세요. 저의 이미지 경로는 ./images/이미지.jpg 입니다. js코드에서 중요한 함수가 3가지 나옵니다. 1. map 함수는 배열의 각 요소에 대해 주어진 함수를 호출 하고, 그 결과를 모아 새로운 배열을 반환합니다. 2. filter 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 함수가 true를 반환하는 모든 요소로 새로운 배열을 생성합니다. 이를 통해 특정 조건을 만족하는 요소들만 필터링할 수 있습니다. 3. reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값(누적값)을 생성합니다. 이 함수는 배열 내의 모든 요소를 하나로 결합하는데 사용됩니다.. 2024. 5. 4. [Javascript] 버튼 이동 시키기 오늘은 버튼을 드래그 하면 버튼이 이동 되도록 만들어 보겠습니다. index.html클릭 결과 2024. 4. 29. [Javascript] FAQ 페이지 만들기 오늘은 간단하게 FAQ페이지를 만들어 보겠습니다. css파일에서 알아야할 내용은 1. `.question-text { ... } ` : (display: none;) 로 인해 페이지가 로드될 때 모든 답변은 숨겨져 있습니다.2. ` .show-text .question-text {}` : .show-text 클래스가 적용된 element의 내부에 위치한 .question-text 클래스를 가진 요소를 대상으로 적용되며, (display: block;) 으로 인해 답변이 보이게됩니다. js파일에서 알아야 할 내용은 1. question.classList.remove("show-text"): 현재 클릭한 질문을 제외한 모든 질문에서 show-text 클래스를 제거하게됩니다. 2. question.clas.. 2024. 4. 28. [Javascript] 모달 만들기 오늘은 모달창을 만들어보겠습니다. css파일에서 볼 부분은 2곳입니다. 1. ` .modal-odverlay{} ` : 모달의 기본 스타일을 설정합니다. 2. ` .open-modal ` : 모달의 가시성을 조절합니다. js파일에서는 2가지를 알아야합니다, 1. modal.classList.add("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 추가합니다. 2. modal.classList.remove("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 제거합니다. index.html modal project open modal modal content app.js const modalBtn = docum.. 2024. 4. 19. 이전 1 2 3 4 5 6 7 8 ··· 24 다음
