Web dev/JavaScript
-
JavaScript / fetch() 로 html include 하기Web dev/JavaScript 2022. 4. 16. 00:35
이전에 php로 include 하여 html을 불러와 사용해보았다. (무료) 이번에는 깃헙페이지에 배포를 하려하는데 php는 지원을 하지 않는다고 한다. 그래서 헤더와 풋터를 자바스크립트 fetch()로 불러왔다. html을 불러올 스크립트를 따로 빼주었다. //inc.js fetch("./inc/header.html") .then(response => { return response.text() }) .then(data => { document.querySelector("#header").innerHTML = data; }); fetch("./inc/aside.html") .then(response => { return response.text() }) .then(data => { document.qu..
-
JavaScript / 브라우저 화면 넓이, 높이 값 구하기Web dev/JavaScript 2022. 4. 15. 21:53
자주 사용하는거라 메모 ㅎㅎ.. window.screenTop : 상단으로부터 브라우저 위치 window.screenLeft : 왼쪽으로부터 브라우저 위치 window.innerWidth : 브라우저 화면의 너비(viewport) window.innerHeight : 브라우저 화면의 높이(viewport) window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함)
-
JavaScript / Scroll event , scrollTop 구하기Web dev/JavaScript 2022. 3. 25. 14:03
리엑트로 퍼블리싱중이다. 스크롤 시 헤더가 변화하는걸 구현하려고 했다. 처음엔 훅으로 해보려고 했는데 잘안되서그냥 자바스크립트로 구현했다. 1. 스크롤이벤트 발생시 함수를 실행해준다. document.addEventListener('scroll', function() { scrollDown(); }); 2. 스크롤 했을때 일정구간이 지나면 클래스를 부여한다. const scrollDown = () =>{ const scrollTop = document.documentElement.scrollTop; const headerWrap = document.getElementById("header"); if(scrollTop > 100){ console.log("헤더야 없어져랏") headerWrap.classL..
-
JavaScript / Class 제어하기Web dev/JavaScript 2022. 3. 25. 13:44
리엑트로 퍼블리싱중이다. 아직 나에게는 제이쿼리가 익숙하지만 요즘 잘 안쓴다길래 바닐라스크립트로하려고기본중에 기본인 클래스 제어하는걸 공부해봤다. const element = document.getElementById('element'); 1. 클래스 추가 element.classList.add('class1'); // 1개 추가 element.classList.add('class1', 'class2') // 여러개 추가 2. 클래스 제거 element.classList.remove('class1'); // 1개 제거 element.classList.remove('class1', 'class2') // 여러개 제거 3. 클래스 교체 element.classList.replace('oldClass', 'n..