Q) 맨 상단의 버튼을 눌러 당근그림 사이에 있는 토끼로 이동하도록 만들어보기.
A)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll</title>
<style>
body{
background-color: black;
text-align: center;
}
img{
display: block;
margin : auto;
}
button{
background-color: lightcoral;
color : white;
outline: none;
font-size: 32px;
margin: 16px 0;
cursor: pointer;
}
</style>
</head>
<body>
<button class="tag">Find a rabbit</button>
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img id= "rabbit" src="img/rabbit.png" alt="rabbit">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot">
<img src="img/carrot.png" alt="carrot" >
<script>
const button = document.querySelector('button');
const rabbit = document.querySelector('#rabbit');
button.addEventListener('click', () => {
rabbit.scrollIntoView({behavior: 'smooth', block: 'center'});
});
</script>
</body>
</html>
scrollIntoView()
Opitonal
-behavior Optional
전환에니메이션을 정의.
"auto", "smooth"중 하나 선택. 기본값은 "auto".
-block Optional
수직 정렬을 정의
"start", "center", "end", "nearest"중 하나 선택. 기본값은 "start".
-inline Optional
수평 정렬을 정함
One of "start", "center", "end", "nearest"중 하나 선택. 기본값은 "nearest".
디자이너에서 개발자로 가는 발자국들을 기록하는 공간입니다.