목록분류 전체보기 (8101)

투케이2K

59. (javascript/자바스크립트) 객체 특정 좌표 확인 및 강제 클릭 이벤트 수행 - createEvent , elementFromPoint

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨)..
JavaScript 2021. 6. 14. 08:24
6. (jquery/제이쿼리) Jquery 사용해 window resize 화면 변경 감지 및 window width 화면 크기 확인, offset 객체 좌표 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window load : 브라우저 로딩 완료 상태를 확인합니다 2. window resize : 브라우저 화면 변경 ..
Jquery 2021. 6. 13. 19:34
5. (jquery/제이쿼리) Jquery 사용해 closest, parents 부모 노드 찾기 및 children 자식 노드 찾기

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. closest() 메소드는 자신을 포함한 조상 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 ..
Jquery 2021. 6. 13. 18:37
58. (javascript/자바스크립트) view port 뷰 포트, scroll 스크롤 참고한 객체 좌표값 구하기 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. getBoundingClientRect : view port 화면 기준으로 객체 좌표값을 구할 때 사용합니다 ..
JavaScript 2021. 6. 13. 11:12
57. (javascript/자바스크립트) 로컬 스토리지 (local storage), 세션 스토리지 (session storage) 지원 여부 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. 로컬 스토리지 : 동일한 컴퓨터에서 동일한 브라우저를 사용할 때 데이터가 저장됩니다 (브라우저를 닫아도 유지됨..
JavaScript 2021. 6. 13. 10:43
56. (javascript/자바스크립트) 세션 스토리지 (session storage) 사용해 데이터 저장 및 삭제 수행

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [브라우저 종료 (전)] ​ [브라우저 종료 (후)]​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. 세션 스토리지 : 윈도우나 브라우저을 닫기 전까지 데이..
JavaScript 2021. 6. 13. 10:16
55. (javascript/자바스크립트) 로컬 스토리지 (local storage) 사용해 데이터 저장 및 삭제 수행

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. 로컬 스토리지 : 동일한 컴퓨터에서 동일한 브라우저를 사용할 때 데이터가 저장됩니다 2. 로컬 스토리지는 여러..
JavaScript 2021. 6. 12. 22:18
34. (html/css/javascript/jquery) qrcode 라이브러리 사용해 QR 코드 생성 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] QR 생성 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : ..
FrontEnd 2021. 6. 12. 19:11
4. (jquery/제이쿼리) Jquery 사용해 body 영역 클릭 이벤트 감지 및 객체 id 확인 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : html의 로딩이 끝난 후에 시작합니다 (이미지, 영상 등 모두 로드 완료 후 실행됨) 2. ..
Jquery 2021. 6. 11. 15:36
33. (html/css/javascript/jquery) a 태그 하이퍼링크 기능 사용해 브라우저, 파일, 태그, 함수 이동 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 브라우저 이동 파일 이동 태그 이동 함수 호출 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 ..
FrontEnd 2021. 6. 11. 15:23
32. (html/css/javascript/jquery) font face 사용해 내부 저장된 파일 폰트 적용 실시 및 font family 속성 설명

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [적용 (전)] ​ [적용 (후)] ​ [저장 경로] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시..
FrontEnd 2021. 6. 11. 14:25
54. (javascript/자바스크립트) 자바스크립트 이벤트 (event) 등록 방법 정의 - 이벤트 즉시 등록 , addEventListener 등록 , function 호출

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [JS 소스 코드] ​ [BODY 소스 코드] one two three /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : 웹브라우저 로딩 완료 상태를 ..
JavaScript 2021. 6. 11. 09:38
53. (javascript/자바스크립트) 윈도우 (window) 대화 상자 팝업창 표시 실시 - alert , confirm , prompt

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. 대화 상자는 브라우저에서 사용자에게 보여줄 수 있는 간단한 이벤트 창을 제공합니다 2. window 객체..
JavaScript 2021. 6. 11. 09:09
52. (javascript/자바스크립트) navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니..
JavaScript 2021. 6. 11. 08:52
51. (javascript/자바스크립트) screen 사용해 디스플레이, 브라우저, 실제 사용 가능 화면 크기 구하기 - screen.avail , window.outer

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체입니다 2. screen 객체의 wi..
JavaScript 2021. 6. 11. 08:39
50. (javascript/자바스크립트) history 사용해 히스토리 목록 개수 확인, 페이지 앞으로가기 (forward) 및 뒤로가기 (back) 수행

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. history 객체는 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다 2. 자바스크립트는 ..
JavaScript 2021. 6. 11. 08:15
49. (javascript/자바스크립트) this 사용해 function 함수 호출하면서 객체 id 값 넘겨주기 및 넘어온 객체 id 값 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [JS 소스 코드] ​ ​ [BODY 소스 코드] 앞으로 이동 뒤로 이동 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. this : 현재 자기 자신을 의미합니다 2. main(..
JavaScript 2021. 6. 11. 08:00
48. (javascript/자바스크립트) location 사용해 url , port , host 정보 출력 및 새로운 페이지 링크 이동 (href , replace) 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. location : 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 ..
JavaScript 2021. 6. 11. 07:42
47. (javascript/자바스크립트) body 클릭 이벤트 감지, 동적 div 레이아웃 생성 및 클릭 이벤트 확인 - document body onclick

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] 동적 추가 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. h..
JavaScript 2021. 6. 10. 18:04
46. (javascript/자바스크립트) 브라우저 사이즈, 해상도 구하기 및 window open 윈도우 창 열기 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* [요약 설명] 1. browserWidth : 브라우저 바디 영역 크기를 구합니다 2. screenWidth : 브라우저 해상도 값을 구합니다 3. window.open : 윈도우 창을 호출합니다 */ /* 이벤트 함수 정의 */ function main(){ console.log("[main] : [start]"); /* 버전별 예외 상황 회피 : 브라우저 가로, 세로 크기 구하기 */ var browserWidth..
JavaScript 2021. 6. 10. 15:10
Prev 1 ··· 360 361 362 363 364 365 366 ··· 406 Next