전체 글10 오늘의 집 클론 코딩 우리 조는 "오늘의 집" 사이트로 클론 코딩을 하기로 했다. 나는 그 중 [홈페이지 상단 이미지, 홈페이지 쇼트컷] 에 대해 팀원들에게 설명해주는 것을 맡았다. 1. 홈페이지 상단 이미지 전형적인 구조를 색다르게! 보러가기 2. 홈페이지 쇼트컷 쇼핑하기 빠른가구배송 평수별집구경 공간별사진 빠른시공상담 오늘의집이사 오늘의딜 22년 신년운세 2024. 4. 13. 9. 실행 컨텍스트 실행 컨텍스트 - 자바스크립트 코드가 실행되는 환경 - 전역에서 시작 ➔ 함수 호출 시 스택에 쌓임 함수, 전역 실행 컨텍스트 this 콜백 함수 - 특정 동작 이후 불려지는 함수 = 다른 함수 인자로 보내지는 함수 동적 바인딩 - this가 환경에 따라 바뀌는 것 let o = { name: "Daniel", f1: () => { console.log("[f1] this : ", this); }, f2: function () { console.log("[f2] this : ", this); }, }; o.f1(); // global o.f2(); // o setTimeout(o.f1, 10); // global setTimeout(o.f2, 20); // global 화살표 함수 vs 일반 함수 1. .. 2024. 4. 2. 8. 웹사이트 내비게이션 및 이미지 슬라이드 구현 소개 내비게이션 기능 구현 e.preventDefault(); // 특정 기능 정지 메서드 xxx.querySelector("#intro"); // 1개의 태그를 css선택자 기반으로 가져옴 xxx.querySelectorAll(＂a＂); // 여러개 태그를 css선택자 기반으로 가져옴 xxx.getAttribute("href"); // 특정 태그가 갖고 있는 속성의 속성값을 가져옴 window.scrollTo ({ // 특정 지점으로 스크롤링 'behavior': 'smooth', //부드럽게 이동 'top': xxx.offsetTop // 특정영역의위에서의좌표값 }); 이미지 슬라이드 setInterval(function() { ... }, 3000); // 3초 간격으로 반복적 코드 실행 xxx.anim.. 2024. 3. 29. 7. DOM과 이벤트 소개 DOM DOM (Document Object Model) - 문서 객체 모델 : 객체 지향 모델로 구조화된 문서 표현 - XML, HTML 문서의 프로그래밍 인터페이스 DOM 종류 - Core DOM :모든 문서 타입 접근 및 조작 - HTML DOM : HTML 문서 접근 및 조작 - XML : XML 문서 접근 및 조작 Document 객체 - 웹 페이지 - 메서드 : HTML 요소 선택/ 생성/ 이벤트 핸들러 추가/ 객체 선택 자바스크립트와 DOM // HTML 요소 선택 var selectedItem = document.getElementsByTagName("li"); // 아이디가 “id"인 요소 선택 var selectedItem = document.getElementById(“id"); //.. 2024. 3. 28. 이전 1 2 3 다음