[목표]가로 스크롤이 필요한 부분을 제공하는 스크롤을 이용해서가 아닌 마우스로 클릭 후 드래그하는 방법으로 구현해보고자 한다.  [코드] 1. 변수 및 초기화 //스크롤을 할 컨테이너를 선택 const scrollContainer = document.getElementById("scrollContainer");let isMouseDown = false; //사용자가 마우스를 클릭 했는지 여부를 추적let startX; // 마우스를 클릭한 최초의 x 좌표 let scrollLeft; // 드래그 시작 시 컨테이너의 가로 스크롤 위치 2. 마우스 누를때 이벤트  scrollContainer.addEventListener("mousedown", (e) => { isMouseDown = tr..

DOM(Document Object Model) : 문서 객체 모델이라고 하며 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. ▶ 요소를 추출 하는 메서드 document.getElementById("아이디"); // 아이디에는 중복이 없음으로 요소 한개만 반환한다. document.getElementsByTagName("태그명"); // 동일한 태그명을 찾아서 배열(여러개일 테니까) 에 담아서 반환 한다. document.getElementsByClassName ("클래스명"); // 동일한 클래스명을 찾아서 배열에 담아서 반환한다. ▶ innerHTML 여는 태그와 닫는 태그 사이의 값 여기가 ..

페이지 이동 : 원하는 링크를 첨부하여 페이지를 이동하는 기능을 구현 할 수 있다. location.href : 페이지 그대로의 이동 location.replace() : 현재 페이지에 덮어 씌우는 역할. 이전 페이지로 이동 불가능 window.open() : 새 창으로 페이지를 이동

대화 상자(dialog box) : window 객체는 사용자에게 보여줄 수 있는 간단한 대화 상자를 하기와 같이 제공한다. 원래는 window.대화상자() 이렇게 써야 하는데 window라는 접두사를 생략하고 사용 한다. ① alert("메세지") : alert() 메소드는 입력한 메시지를 보여주고, 그에 대한 사용자가 확인 버튼을 누를 때 까지 기다린다. ② confirm("메세지") : 사용자에게 메시지를 보여주고, 확인은 true, 취소는 false로 그 결과를 boolean 값으로 반환한다. confirm() 메소드 confirm 대화 상자 ③ prompt("메세지") : 사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환한다. prompt