8th DAY
포지션을 이용한 움직이는 신발
position: relative, absolute
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position04_신발을 움직여보자</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/position04.css">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/position04.js"></script>
</head>
<body>
<section class="shoes">
<div class="case">
<ul>
<li>
<img src="../img/01s.png" alt="">
</li>
<li>
<img src="../img/01s02.png" alt="">
</li>
<li>
<img src="../img/01s03.png" alt="">
</li>
<li>
<img src="../img/01s04.png" alt="">
</li>
</ul>
</div>
<ul class="num">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</section>
</body>
</html>
<!-- tap메뉴 만들때 사용하는 방법 -->
<!-- 자바스크립트는 인덱스번호 0부터 시작
css는 1부터 시작 --><html>
body {
background: #333;
}
.shoes {
padding: 100px 0;
}
.shoes > .case {
position: relative;
width: 809px;
height: 450px;
margin: 0 auto;
overflow: hidden;
}
.shoes .case ul {
position: absolute;
top: -450px;
left: 0;
transition: 1s;
transition-timing-function: cubic-bezier(0.34, -0.85, 0.54, 1.65);
}
.num {
display: flex;
justify-content: center;
gap: 40px;
color: #fff;
font-size: 30px;
}
/* position:absolute top:0을 주고 position: relative의 높이를 안 준 상태에서 overflow:hidden하면 이미지들이 사라짐 */<css>
position:absolute top:0을 주고 position: relative의 높이를 안 준 상태에서 overflow:hidden하면 이미지들이 사라진다.
집에서 복습을 하는데, ul을 사용하면 나오는 동그란 점이 나와서 뭐가 잘못 된거고;;했는데
알고보니 reset.css을 link 하지 않았다는 것..🚬세상 당황황당
꼭.. reset.css link해야돼..🚬
$(function () {
$('.num li').on('click', function () {
var idx = $(this).index();
console.log(idx)
$('.shoes .case ul').css({top:-450 * idx})
})
})/
<JavaScrip>
결과물 : http://127.0.0.1:5502/doc/position03.html
'수업내용' 카테고리의 다른 글
| [HTML, CSS with JS] 표정이 변하는 스마일 만들기_2022.05.26.THU (0) | 2022.06.01 |
|---|---|
| [HTML, CSS with JS] position 폭파시켜보자_2022.05.26.THU (0) | 2022.06.01 |
| [HTML, CSS with JS] DK-steel 홈페이지를 만들어보자(연습용)_2022.05.23.MON ~ 2022.05.27.FRI (0) | 2022.06.01 |
| [HTML, CSS with JS] position의 기초_2022.05.20.FRI (0) | 2022.06.01 |
| [HTML, CSS with JS] position의 기초_2022.05.19.THU (0) | 2022.06.01 |
