본문 바로가기
728x90

프론트엔드111

[Javascript] 엘리먼트 앞 / 뒤에 특정 엘리먼트 삽입하기 insertBefore, insertAdjacentElement 자바스크립트 엘리먼트 (노드) 앞 뒤에 특정 엘리먼트 (노드) 삽입 하기 insertBefore / insertAdjacentElement 기본 형태 //기준 엘리먼트에 삽입할 엘리먼트를 옵션에 맞는 위치에 삽입 //옵션은 beforebegin, afterbegin, beforeend, afterend가 있고 //기준 노드의 앞, 뒤 추가는 beforebegin, afterend를 사용 //기준 노드의 자식 노드로 앞, 뒤 추가는 afterbegin, beforebegin을 사용한다 기준노드.insertAdjacentElement(옵션, 삽입할노드); //기준 노드 앞에 추가할 노드 삽입 부모노드.insertBefore(추가할노드, 기준노드); 샘플 예제 : insertAdjacentElement Hel.. 2021. 5. 24.
[Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() Javascript 원하는 태그로 스크롤 이동하기 Element.scrollIntoView 이동 원하는 엘리먼트.scrollIntoView() 기능에 대한 설명은 샘플예제 속 주석 처리를 위해 소스 코드 하나하나 설명해놓았음 기본 형태 //Element : 이동 원하는 엘리먼트 Element.scrollIntoView(옵션); 샘플 예제 : 액션가면을 찾아라! 출력 결과 2021. 5. 23.
[Javascript] 마우스 이벤트 mouse event [자바스크립트] 마우스 이벤트 모음 Mouse Events mouseover : 해당 엘리먼트 위에 마우스 커서가 진입한 순간 이벤트 발생 mouseout : 해당 엘리먼트 위에서 마우스 커서가 이탈하는 순간 이벤트 발생 mousedown : 해당 엘리먼트 위에서 마우스 버튼을 클릭하는 순간 이벤트 발생 mouseup : 해당 엘리먼트 위에서 마우스 버튼 클릭 후 떼는 순간 이벤트 발생 mousemove : 해당 엘리먼트 위에서 마우스의 커서가 움직이는 동안 이벤트발생 샘플 예제 출력 결과 2021. 5. 21.
[Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload [자바스크립트 / Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload와 unload 차이와 사용 예제 웹 로드시 이벤트 window.addEventListener('load', 콜백함수); DOM 요소 로드시 이벤트 window.addEventListener('DOMContentLoaded', 콜백함수); 웹 브러우저 윈도우 창 종료 직전 이벤트 window.addEventListener('beforeunload', 콜백함수); 웹 브라우저 윈도우 창 종료 이벤트 window.addEventListener('unload', 콜백함수); 샘플 예제 출력 결과 ps. unload는 종료해야 생기는 이벤트 이므로 console.log에 출력되지 않는 것을 알수 있다 2021. 5. 21.
[Javascript] script 태그 안에 defer란? [자바스크립트] script 태그 안에 defer란? DOM 요소의 로드가 끝나고 난 후 해당 스크립트를 실행하라는 속성이다 유사한 기능을 수행하는 것으로는 윈도우 로드 이벤트가 있는데 window.addEventListener('load',e=>{}); 해당 이벤트는 DOM 요소 뿐 아니라 모든 요소의 로드 이후에 실행을 하라는 이벤트인 점에서 defer와 차이가 있다 기본 형태 샘플 예제 [index.html] [example.js] console.log(`example.js 실행~!`); 출력 결과 (콘솔) example.js 실행~! index.html:13 window > load 이벤트 실행! 2021. 5. 21.
[FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo [프론트엔드 / 자바스크립트] 스크롤 이동하기 window.ScrollBy window.ScrollTo 현재 좌표를 기준으로 전달된 좌표만큼 이동하고 싶다면 window.scrollBy(x,y) 전달된 좌표로 이동 하고 싶다면 window.scrollTo(x,y) 기본 형태 //현재 좌표값 + 전달된 좌표값 window.scrollBy(x,y) //전달된 좌표값으로 이동 window.scrollTo(x,y) 샘플 예제 500px 지점 출력 결과 2021. 5. 21.
[프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) [Front-end / Javascript] 프론트엔드 자바스크립트로 좌표 값 구하기 브라우저에서 좌표값은 크게 두가지 종류로 나뉘는데 첫번째는 "전체 스크롤 기준" 으로 구할 수 있고 두번째는 "현재 창 기준"으로 구할수 있다 기본 형태 //브라우저 전체 (스크롤 전체) 기준 좌표 값 event.pageX : 스크롤 전체 기준 X 좌표 값 event.pageY : 스크롤 전체 기준 Y 좌표 값 //현재 창 기준 좌표 값 event.clientX : 현재 창 기준 X 좌표 값 event.clientY : 현재 창 기준 Y 좌표 값 아래 예제는 클릭했을때 현재 포인터가 위치한 좌표를 구하는 예제이다 샘플 예제 출력 결과 2021. 5. 21.
[프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() [Front-End / Javascript] 브라우저 엘리먼트 좌표 값 구하기 기본 형태 elem.getBoundingClientRect(); 객체 구조 elem.getBoundingClientRect().x : 현재 창기준 x좌표 elem.getBoundingClientRect().y : 현재 창기준 y좌표 elem.getBoundingClientRect().width : 엘리먼트 가로 elem.getBoundingClientRect().height : 엘리먼트 세로 elem.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리 elem.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 .. 2021. 5. 20.
[프론트엔드] 윈도우 창 / 스크롤바 / 브라우저 사이즈 feat 자바스크립트 [자바스크립트 / Javascript] 윈도우 창 / 스크롤바 / 브라우저 / 컨텐츠 사이즈 알아내기 window.screen.width / window.screen.height : 사용자 전체화면 사이즈 window.outerWidth / window.outerHeight : 브라우저 전체 사이즈 (검색창 포함) window.innerWidth / window.innerHeight : 브라우저 내부 사이즈 (검색창 미포함 / 스크롤바 포함) document.body.clientWidth / clientHeight : 브라우저 현재 화면 사이즈 (검색창 미포함 / 스크롤바 미포함) 샘플 예제 실행 결과 2021. 5. 20.
[Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login 홈페이지 페이스북 간편 로그인 기능 구현 [Javascript Facebook Login] 내 웹 사이트에 페이스북 로그인 기능을 구현하려면 먼저 아래와 같은 준비물이 필요하다 1. 페이스북 개발자 계정 2. 페이스북 개발자 계정 내 페이스북 앱 등록 3. 페이스북 개발자 앱 등록 ID, 웹 URL 등록 페이스북 개발자 계정 가입하기 아래 페이스북 개발자 공홈에서 회원가입을 한다. https://developers.facebook.com/ Facebook for Developers Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. 개발자를 교육하고 연 de.. 2021. 5. 14.
728x90

티스토리툴바