JS - jQuery를 이용한 간단한 사이드바 구현하기 (Sidebar)

Overivew 이번 포스팅에서는 간단한 사이드바의 기능을 하는 HTML을 구현합니다. 기능 구현에만 중점을 두었기 때문에 디자인은 개인이 알아서! jQuery 호출 HTML 구성 설계 사이드바는 왼쪽 영역에 위치함 사이드바 보이기/감추기 버튼을 통해 사이드바를 보이게하고 감추게 하여야 함 본문은 사이드바의 오른쪽에 위치하여야 함 사이드바의 보이기/감추기에 따라 본문의 내용의 위치도 그에 맞게 변경되어야 함 Sidebar Content Hide Sidebar Show Sidebar A CSS 설정 /* 사이드바 영역에 따른 본문 여백 설정 */ .container { margin-left: 200px; } /* 본문에 보여질 예시를 위한 박스 설정 */ .box { position:absolute; di..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

JS - 이미지를 드래그하여 원하는 위치로 이동하기

이미지 준비 이미지를 테스트하기 위한 파일 및 위치 (http://localhost:3000/img/img.jpg) 위치는 개인에 맞게 설정 기본 구성 html 파일 생성 후 이미지 태그로 이미지 출력 img id : 자바스크립트로 해당 요소 선택을 위함 style : 절대적 X, Y값을 확인하기 위함 + 커서는 손가락 모양으로 변경 draggable : 드래그로 이미지가 파란색 영역으로 선택되지 않기 위함 (전체선택하면 나오는 영역) 마우스 드래그 이벤트 코드 인터넷 검색으로 많은 코드들을 찾았는데 너무 복잡하게 되어있거나, 너무 오래된 레거시 문법들이 많아서 가능한 지식선에서... 최대한 쉽게 정리해보았다. 실행 전체 소스 코드 참고 Mozilla.org - Event.preventDefault() ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 20.
• textsms

jQuery - 요소 선택하기, $("") / $(#"") / $(."") / $("[]") 의 차이점

구문 $() : 제이쿼리 객체 생성 $() 제이쿼리 객체 생성하는 구문 반드시 쌍따옴표(")를 사용한 문자열 형태여야 함 $("") : css 선택자 사용 $("p") css 선택자를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByTagName' 메소드와 동일 위의 예시 구문에서는 p태그를 선택한다는 의미를 가짐 $("#") : id 사용 $("#pId") id를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementById' 메소드와 동일 위의 예시 구문에서는 'pId' 라는 ID를 가진 요소를 선택한다는 의미를 가짐 $(".") : 클래스 사용 $(".pClass") 클래스를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByCl..

• format_list_bulleted Web/Javascript
• · 2023. 4. 20.
• textsms

jQuery - 제이쿼리의 기초, 구문, 사용 방법, 샘플 코드

제이쿼리란? (jQuery) HTML의 클라이언트 조작을 단순화하도록 설계된 자바스크립트 라이브러리 한 개의 자바스크립트 파일로 존재 개발을 쉽게 할 수 있도록 디자인 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 상호작용 등 jQuery 호출하기 jQuery 를 사용하기 위해 jQuery 라이브러리가 담겨있는 자바스크립트 파일을 호출하여야 함 CDN 사이트에서 링크 참조 가능 CDN : 사용자에게 콘텐츠를 제공하는 분산 서버 네트워크 jQuery CDN 확인 링크 : https://releases.jquery.com/ 설계하는 페이지에 따라 jQuery의 종류를 적절히 배치하는 것이 좋음 Uncompressed : 라이브러리 표준 비압축 버전, 주석과 서식이 있는 전체 ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 11.
• textsms

JS - 요소 추가하기(createElement, appendChild), 요소에 스타일 적용하기(className)

예시다음과 같은 div 태그가 있습니다. parent child : hello child 요소 아래에 새로운 div를 추가하여 메시지를 입력하려면 어떻게 해야 할까요?물론, html 태그에 를 정의하여 추가할 수 있지만,정적인 페이지가 아닌 동적인 페이지를 표현하고자 할 때에는 자바스크립트를 사용하여야 합니다.자바스크립트로 요소 생성하기구문createElement(태그이름) : HTML 문서에서 지정한 태그의 요소 생성예시) document.createElement("div") : 페이지에 div 태그 생성단, 요소는 생성되었으나 어디에 위치할지를 지정하지 않았기 때문에 문서 내에서 보이지 않음document.createElement("HTML태그명"); 예시 코드 parent child ..

• format_list_bulleted Web/Javascript
• · 2023. 3. 24.
• textsms

JS Error) Uncaught TypeError: Cannot read properties of null, Cannot set properties of null

Error Uncaught TypeError: Cannot read properties of null 페이지가 로드되기 전에 해당 요소를 호출 할 때 발생하는 에러 Uncaught TypeError: Cannot set properties of null 페이지가 로드되기 전에 해당 요소의 값을 설정할 때 발생하는 에러 해결 방법 해결 방법은 크게 두가지로 나뉨 가장 맨 밑에 위치 시켜서 페이지의 요소가 로드 된 후 호출 window.onload 를 이용하여 웹 페이지가 로드가 끝나면 스크립트 실행 기존 코드 hello 해당 요소 밑에 자바스크립트 코드 위치 div가 온 코드 밑에 위치를 해도 되고 최하단으로 이동해도 됨 스크립트 관리의 가독성을 위해 최하단으로 위치하는 것이 보편적임 hello 자바스크립..

• format_list_bulleted Web/Javascript
• · 2023. 3. 24.
• textsms