JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기
2022. 10. 4. 12:40ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body style="overflow: none;">
<button id="login">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div>
<div class="slide-containver">
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png">
</div>
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png">
</div>
<div class="slide-image">
<img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png">
</div>
</div>
<button class="pre-slide">이전</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="after-slide">다음</button><br>
<div id="now"></div>
<script>
//처음에 페이지 업로드 되었을때 1번 사진이 보이도록 함
$('.slide-containver').css('transform', 'translateX(100vw)');
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
//margin-left로 slide 하는 경우
// $('.slide-1').on('click', function(){
// $('.slide-containver').css('margin-left', '0vw');
// });
// $('.slide-2').on('click', function(){
// $('.slide-containver').css('margin-left', '-100vw');
// });
// $('.slide-3').on('click', function(){
// $('.slide-containver').css('margin-left', '-200vw');
// });
//어떤 사진이 보일지 나타내는 함수
function slidego(aa){
if(aa==1){
$('.slide-containver').css('transform', 'translateX(100vw)');
}else if(aa==2){
$('.slide-containver').css('transform', 'translateX(0vw)');
}else if(aa==3){
$('.slide-containver').css('transform', 'translateX(-100vw)');
}
};
var page=1;
//transform으로 slide 하는 경우
$('.slide-1').on('click', function(){
slidego(1);
page=1;
$('#now').html('현재 페이지 '+page);
});
$('.slide-2').on('click', function(){
slidego(2);
page=2;
$('#now').html('현재 페이지 '+page);
});
$('.slide-3').on('click', function(){
slidego(3);
page=3;
$('#now').html('현재 페이지 '+page);
});
//이전 버튼
$('.pre-slide').on('click', function(){
page-=1;
if(page===0){
page=1;
}
slidego(page);
$('#now').html('현재 페이지 '+page);
});
//다음 버튼
$('.after-slide').on('click', function(){
page+=1;
if(page===4){
page=3;
}
slidego(page);
$('#now').html('현재 페이지 '+page);
});
$('#now').html('현재 페이지 '+page);
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>main.css
/*
vh = viewport height
vw = viewport width
즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.
100vh, 100vw 가 전체 화면의 기준이 됩니다.
예를들어,
현재 스크린 크기가 height = 1000px, width = 800px 이라면
1vh = 10px / 1vw = 8px 이 될 것이고
height: 50vh;
width: 25vw;
로 설정한다면
height - 500px
width - 200px
실제로 이런식으로 적용이 되겠죠!
% 와 차이는?
그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다.
첫번째로는, vh 는 width 에서도 사용이 가능합니다.
width: 100% 와
width: 100vh 는 엄연히 다른 뜻이지요!
마찬가지로 vw 도 height에서 사용이 가능합니다.
두번째로는
vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환합니다!
반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환합니다.
또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환하죠.
출처: https://programming119.tistory.com/93 [개발자 아저씨들 힘을모아:티스토리]
*/
.slide-containver{
width: 300vw;
transitiona: all 1s;
}
.slide-image{
float: left;
/*none (기본값) : 정렬하지 않는다.
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다. */
width: 100vw;
}
.slide-image img{
width: 100%;
}
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group{
display: none;
}
.show{
display: block;
}
/* 모달창 용 =====================*/
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 160px;
visibility: hidden;
/* 애니메이션 줄때 display: none 대용 이게 잘먹힌다
display:none은 html에서 없애는거고 visibility: hidden은 모습만 숨기는것
*/
opacity: 0;
/* 0은 완전히 투명해서 안보이고 1에 가까울수록 잘보임 */
/* position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록
아래로 내려갑니다. */
transition: all 1s;
/* 모든 속성이 변할때 1초가 걸리게함 */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
/* ==========================*/
.show-modal{
visibility: visible;
/* 애니메이션 줄때 display: block 대용 */
opacity: 1;
}강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(17)- 스크롤 이벤트로 만드는 재밌는 기능들 (0) | 2022.10.07 |
|---|---|
| JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기 (0) | 2022.10.04 |
| JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(13)-setTimeout 타이머주는 법 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(12)-변수, 사칙연산 실력향상 과제 (0) | 2022.10.03 |