탐구하는 취르미

scrollTo(), scrollBy(), scrollIntoView() 메서드를 활용해 스크롤 조작하는 방법에 대해서 알아보겠습니다. scrollTo() 이동할 좌표값을 받아 절대적인 위치로 스크롤을 이동시킵니다. window.scrollTo(x좌표, y좌표); scrollTo() 예시 //문서의 상단으로 스크롤 이동 window.scrollTo(0, 0); //문서의 200px 위치로 스크롤 이동 window.scrollTo(0, 200); //문서의 300px, 500px 위치로 스크롤 이동 window.scrollTo(300, 500); scrollBy() 이동할 좌표값을 받아 현재 위치에서 상대적인 위치로 스크롤을 이동시킵니다. window.scrollBy(x좌표, y좌표); scrollBy()..

다양한 방법으로 요소의 높잇값 구하는 방법에 대해서 알아보겠습니다. 요소의 높이값을 구하는 속성으로 clientHeight, offsetHeight, scrollHeight 그리고 메서드로 getBoundingClientRect().height 가 있습니다. 어떤 차이점이 있는지 알아보도록 합시다. 1. clientHeight 해당 요소의 내부 높이를 반환합니다. 콘텐츠(contents)와 패딩(padding)을 포함하지만 테두리, 스크롤바는 제외합니다. const elHeightValue = el.clientHeight; 2. offsetHeight 해당 요소의 콘텐츠(contents)와 패딩(padding), 테두리(border)를 포함한 전체 높이를 반환합니다. 스크롤바는 제외합니다. const e..

객체 안의 키(key)를 상수로 사용하고 싶을 때, 구조 분해 할당을 활용해 보자! const students = { apple: "애플", banana: "바나나", orange: "오렌지" } const { apple, banana, orange } = students; //키(key)값 만으로 호출할 수 있게 됨! console.log(apple); //애플 console.log(banana); //바나나 console.log(orange); //오렌지 배열은 인덱스(index)를 기준으로 구조 분해할 수 있다 const user = ["1", "2", "3"] const [ one, two, three ] = user; //즉 배열은 인덱스 기준으로 구조분해 할 수 있다 console.log(on..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 인덱스 혹은 키 값을 개별 변수(상수)에 담을 수 있도록 사용하는 Javascript 표현식 //const { 객체 내 key값 } = 객체명 //정해진 key값이 있기 때문에, { 객체 내 key값 }은 바꿀수 없다 const person = { age: 30, height: 175, hobby: "coding" } //⭐️ 구조 분해 할당, 객체 안의 key값이 각각 하나의 상수가 되는 것! const { age, height, hobby } = person console.log(age); //30 //import { key값 } from "경로/라이브러리명"과 연관지어 생각해 볼 수 있음! ⭐️ 중요 import { key값 } from "경로/라..

Math의 메소드 Math.ceil(x) : x보다 크거나 같은(이상) 수 중에서 가장 작은 정수를 반환 console.log(Math.ceil(1.5)); //2, 소숫점 이하를 올림 console.log(Math.ceil(1.9)); //2 Math.floor(x) : x보다 작거나 같은(이하) 수 중에서 가장 큰 정수를 반환 console.log(Math.floor(1.5)); //1, 소숫점 이하를 내림 console.log(Math.floor(1.9)); //1 Math.round(x) : x에서 가장 가까운 정수를 반환 console.log(Math.round(1.831)); //2 console.log(Math.round(1.15)); //1 console.log(Math.round(-10...

HTMLElement.style const ele = document.querySelector('.ele'); ele.style.display = 'flex'; /* 스타일 속성 해제(삭제)하기 */ ele.style.display = ''; HTMLElement.style.cssText const ele = document.querySelector('.ele'); ele.style.cssText = `display: flex; justify-content: center; align-items: center; `; HTMLElement.classList.add('className') const ele = document.querySelector('.ele'); ele.classList.add('activ..