[juqery]jquery 이미지 슬라이더 구현 준비 이론

개발 Programming/JQUERY|2018. 9. 12. 18:32

기본 셋팅

- 스타일

캔버스 width 스타일 속성, height 속성 반드시 지정

캔버스 position 스타일 속성 Relative

캔버스 overflow 스타일 속성 hidden

구성 요소 position 스타일 속성 Absolute


캔버스 내부에 구성요소의 position을 절대위치인 Absolute로 설정할 경우 캔버스 뒤에 있는 값이 캔버스 위로 올라오는 문제를 발생할 수 있다.

그렇기 때문에 캔버스의 크기는 무조건 지정해줘야 함!!


아래처럼 구성한 이유는 외부 div태그가 캔버스이고 내부 div태그가 구성요소임. 

캔버스와 구성요소가 정확히 자신 위치를 찾는지 파악하기 위한거임


아래 소스는 div인 사각형이 왼쪽에서 오른쪽으로 이동하는 예제임

<html>
<head>
<style>
* {margin: 0px;padding: 0px}
#canvas{ background:gray}
.inner_box{
background:yellow;
width: 100px;
height: 100px;
position:absolute;
}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});
});
</script>
</head>
<body>
<h3>Test Header</h3>
<div id='canvas'>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
</div>
<h3>Test Header</h3>
</body>
</html>


위 소스에서 마지막 Test Header가 캔버스롤 셋팅된 div에 겹쳐져 있는 것을 볼 수 있음.

따라서 캔버스의 width 스타일 속성과 height 스타일 속성을 반드시 지정해야 함

위 두 속성을 지정해주는게 포인트임


<html>
<head>
<style>
* {margin: 0px;padding: 0px}
#canvas{ background:gray;
width: 600px;
height: 400px;}
.inner_box{
background:yellow;
width: 100px;
height: 100px;
position:absolute;
}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
$('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});
});
</script>
</head>
<body>
<h3>Test Header</h3>
<div id='canvas'>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
</div>
<h3>Test Header</h3>
</body>
</html>



<html>
<head>
<style>
* {margin: 0px;padding: 0px}
#canvas{ background:gray;
width: 600px;
height: 400px;}
.inner_box{
background:yellow;
width: 100px;
height: 100px;
position:absolute;
}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
/* $('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});*/

$('.inner_box').each(function(index){
$(this).css({
left : index * 90,
top : index * 90
});
});
});
</script>
</head>
<body>
<h3>Test Header</h3>
<div id='canvas'>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
</div>
<h3>Test Header</h3>
</body>
</html>


<html>
<head>
<style>
* {margin: 0px;padding: 0px}
#canvas{ background:gray;
width: 600px;
height: 400px;}
.inner_box{
background:yellow;
width: 100px;
height: 100px;
position:absolute;
}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
/* $('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});*/

$('.inner_box').each(function(index){
$(this).css({
left : index * 90,
top : index * 90
});
});
});
</script>
</head>
<body>
<h3>Test Header</h3>
<div id='canvas'>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
</div>
<h3>Test Header</h3>
</body>
</html>




위 소스는 부모 위치에 상관없이 절대위치에 박스가 생성된 모습을 보여줌


부모의 position 속성이 absolute나 relative 일 경우에만 자식 요소들이 부모위치를 기준으로  위치를 잡음 따라서 구성요소 뿐만 아니라 부모의 position도 지정해줘야 함.


overflow 스타일 속성은 내용이 사용할 수 있는 범위를 초과하면 어떻게 처리하는지를 나타냄

overflow 스타일 속성에 hidden 값을 입력하면 캔버스의 공간을 넘어가는내용은 보이지 않게 함


<html>
<head>
<style>
* {margin: 0px;padding: 0px}
#canvas{ background:gray;
width: 600px;
height: 400px;
position:relative;
overflow:hidden;}
.inner_box{
background:yellow;
width: 100px;
height: 100px;
position:absolute;
}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
/* $('div').each(function(index){
$(this).delay(index *500).animate({
left:'500'
},'slow');
});*/

$('.inner_box').each(function(index){
$(this).css({
left : index * 90,
top : index * 90
});
});
});
</script>
</head>
<body>
<h3>Test Header</h3>
<div id='canvas'>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
<div class='inner_box'></div>
</div>
<h3>Test Header</h3>
</body>
</html>











'개발 Programming > JQUERY' 카테고리의 다른 글

[jquery] 이미지 슬라이더 구현  (0) 2018.09.27
[jquery] 시각 효과- animate(),stop(),clearQueue(), delay()  (0) 2018.09.05
[jquery] 입력 양식 이벤트  (0) 2018.09.05
[jquery] 체크박스 이벤트  (0) 2018.09.04
[jquery] 체크박스 체크 예제  (0) 2018.09.04

댓글()

티스토리툴바