사용하는 기본 html, js, css 파일
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./main.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<!--주석 1-->
<div id="c1" class="child">사과</div>
<div class="child">바나나</div>
<div class="child">체리</div>
<!--주석 2-->
텍스트 1 텍스트 2
</div>
</body>
</html>
기본 main.js
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
style.css
// style.css
body{
width: 3000px;
height: 3000px;
}
.parent{
width: 300px;
height: 200px;
margin-top: 100px;
margin-left: 50px;
padding: 20px;
overflow: auto;
border: 10px solid;
}
.child{
height: 100px;
margin-bottom: 20px;
border: 10px solid red;
font-size: 50px
}
너비 높이 확인
innerWidth, innerHeight
console.log(window.innerWidth)
console.log(window.innerHeight)- 현재 창의 너비와 높이를 확인합니다.
- px 기준으로 측정하며, 창의 크기를 확인하므로 최대화, 최소화, 임의지정 시의 크기가 다르게 나옵니다.
offsetWidth, offsetHeight
//300(width)+20(padding-left)+20(padding-right)+20(border) = 360
//200(height)+20(padding-top)+20(padding-bottom)+20(border) = 260
console.log(parentEl.offsetWidth, parentEl.offsetHeight)
console.log(childEl.offsetWidth, childEl.offsetHeight)- 테두리 선을 포함한 요소의 너비/높이를 얻습니다.
clientWidth, clientHeight
//300(width)+20(padding-left)+20(padding-right) = 340
//200(height)+20(padding-top)+20(padding-bottom) = 240
console.log(parentEl.clientWidth, parentEl.clientHeight)
console.log(childEl.clientWidth, childEl.clientHeight)- 테두리 선을 제외한 요소의 너비/높이를 얻습니다.
스크롤 위치 확인
scrollX, scrollY
console.log(window.scrollX)
console.log(window.scrollY)- 현재 스크롤의 위치를 지정해줍니다.
- X축은 가로, Y축은 세로를 나타내며, y는 맨 위가 0, x는 맨 왼쪽이 0입니다.
스크롤 이동 - scrollTo
setTimeout(()=>{
window.scrollTo(0,200)
},2000)
childEl.addEventListener('click', ()=>{
parentEl.scrollTo({
top:200,
left:0,
behavior: 'smooth'
})
})- 지정된 좌표로 대상을 스크롤합니다.
- behavior 속성을 사용해 스크롤 당시의 효과를 지정할 수도 있습니다.
'자바스크립트' 카테고리의 다른 글
| JavaScript 이벤트 - 이벤트 전파 (0) | 2024.04.22 |
|---|---|
| JavaScript 이벤트 (0) | 2024.04.22 |
| JavaScript DOM - 생성,조회,수정 (2) (0) | 2024.04.20 |
| JavaScript DOM - 생성, 조회, 수정 (0) | 2024.04.19 |
| JavaScript DOM - 요소(Element)와 노드(Node) (0) | 2024.04.16 |
