✿∘˚˳°∘°
51일차 : [실습] 슬라이딩메뉴 / 정규표현식 / 반응형 본문
20230208
1. [실습]슬라이딩메뉴
1 - 1 ) 슬라이딩메뉴 기본 : 화살표를 클릭하면 다음이미지를 보여주는 메뉴(단, 처음 or 마지막이미지에 도달하면 끝)
<!DOCTYPE html>
<html lang="en">
<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>이미지슬라이딩</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="js/jquery-3.6.3.min.js"></script>
<link rel="stylesheet" href="css/slide.css">
</head>
<body>
<h1>이미지 슬라이드 기본</h1>
<hr>
<div class="slide-wrap">
<ul>
<li><img src="slideimg/bg-1.jpg"></li>
<li><img src="slideimg/bg-2.jpg"></li>
<li><img src="slideimg/bg-3.jpg"></li>
</ul>
<div class="slide-navi prev">
<span class="material-symbols-outlined">arrow_back_ios</span>
</div>
<div class="slide-navi next">
<span class="material-symbols-outlined">arrow_forward_ios</span>
</div>
</div>
<script src="js/slide1.js"></script>
</body>
</html>.slide-wrap{
width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide-wrap>ul{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
/*width: 3600px;*/
/*이미지하나넓이*갯수 이기때문에 지정하면 지정된 갯수만 사용가능하므로
자바스크립트에서 작성해서 여러이미지를 사용할 수 있게 해줄 것*/
}
.slide-wrap>ul>li{
width: 1200px;
float: left;
/*지금은 공간이 부족해서 float:left를 해도 옆으로 안붙음*/
/*ul태그의 넓이를 지정해서 옆으로 정렬하고 부모태그에 overflow:hidden으로 감춰둘것*/
}
.slide-wrap>ul>li>img{
width: 100%;
height: 500px;
}
.slide-navi:hover{
opacity: 0.8;
}
.slide-navi{
position: absolute;
height: 500px;
line-height: 500px;
top: 0;
width: 100px;
text-align: center;
opacity: 0.4;
cursor: pointer;
}
.slide-navi>span{
font-size: 30px;
color: #fff;
}
.prev{
left: 0;
}
.next{
right: 0;
}//ul의 넓이지정하기
const ul = $(".slide-wrap>ul");
//1.이미지 갯수 구하기(이미지갯수 == li갯수)
const imgCount = ul.children().length;
//이미지 갯수에 따라 ul너비 변경
ul.css("width", (imgCount*1200)+"px");
//현재 슬라이드가 보여주고 있는 이미지번호 - 최초는 0번
let imgNo = 0;
$(".next").on("click", function(){
if(imgNo != imgCount-1){
imgNo++;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "1s");
}
});
$(".prev").on("click", function(){
if(imgNo != 0){
imgNo--;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "1s");
}
});
1 - 2 ) 슬라이딩메뉴 심화 : 화살표를 클릭하면 다음이미지로 넘어가고, 처음 or 마지막 이미지에 도달하면 마지막 or 처음 이미지로 연결하여 무한하게 돌도록 할것 + 3초마다 자동으로 슬라이딩되는 효과
(HTML/CSS는 공통된걸 사용한다)
<!DOCTYPE html>
<html lang="en">
<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>이미지슬라이딩2</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="js/jquery-3.6.3.min.js"></script>
<link rel="stylesheet" href="css/slide.css">
</head>
<body>
<!--이미지가 무한하게 넘어감(끝나면 시작으로)-->
<!--버튼을 누르지 않아도 시간에 따라 슬라이딩-->
<h1>이미지 슬라이드 심화</h1>
<hr>
<div class="slide-wrap">
<ul>
<li><img src="slideimg/bg-1.jpg"></li>
<li><img src="slideimg/bg-2.jpg"></li>
<li><img src="slideimg/bg-3.jpg"></li>
</ul>
<div class="slide-navi prev">
<span class="material-symbols-outlined">arrow_back_ios</span>
</div>
<div class="slide-navi next">
<span class="material-symbols-outlined">arrow_forward_ios</span>
</div>
</div>
<script src="js/slide2.js"></script>
</body>
</html>.slide-wrap{
width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slide-wrap>ul{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
/*width: 3600px;*/
/*이미지하나넓이*갯수 이기때문에 지정하면 지정된 갯수만 사용가능하므로
자바스크립트에서 작성해서 여러이미지를 사용할 수 있게 해줄 것*/
}
.slide-wrap>ul>li{
width: 1200px;
float: left;
/*지금은 공간이 부족해서 float:left를 해도 옆으로 안붙음*/
/*ul태그의 넓이를 지정해서 옆으로 정렬하고 부모태그에 overflow:hidden으로 감춰둘것*/
}
.slide-wrap>ul>li>img{
width: 100%;
height: 500px;
}
.slide-navi:hover{
opacity: 0.8;
}
.slide-navi{
position: absolute;
height: 500px;
line-height: 500px;
top: 0;
width: 100px;
text-align: center;
opacity: 0.4;
cursor: pointer;
}
.slide-navi>span{
font-size: 30px;
color: #fff;
}
.prev{
left: 0;
}
.next{
right: 0;
}const ul = $(".slide-wrap>ul");
//마지막 li를 복사해서 첫번째자식으로 추가
ul.prepend(ul.children().last().clone());
//위에서 첫번째 자식으로 추가했으므로 맨뒤에 붙이고싶은
//원본 첫번째이미지는 두번째자식
ul.append(ul.children().eq(1).clone());
const imgCount = ul.children().length;
ul.css("width", (imgCount*1200)+"px");
let imgNo = 1;
ul.css("transform","translateX("+(-1200*imgNo)+"px)");
let intervalId; //interval함수를 실행하면 받는 값 - 이값을 통해 intval을 멈출 수 있다
$(".next").on("click", function(){
if(imgNo != imgCount-1){
//이미지 자동스크롤 함수를 멈춤
window.clearInterval(intervalId);
imgNo++;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "1s");
//마지막이미지에 도달
if(imgNo == imgCount-1){
//1초이후 실행하기 위함
window.setTimeout(function(){
imgNo = 1;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "0s");
//이미 transition-duration이 1s로 지정되어 있으므로 0s를 적지않으면 1s가 그대로 적용되어 있음
}, 1000);
}
//멈췄던 이미지 자동스크롤 함수를 새로 시작
autoSlide();
}
});
$(".prev").on("click", function(){
if(imgNo != 0){
window.clearInterval(intervalId);
imgNo--;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "1s");
//첫번째 이미지에 도달
if(imgNo == 0){
window.setTimeout(function(){
imgNo = imgCount - 2;
const move = imgNo * (-1200);
ul.css("transform", "translateX("+move+"px)").css("transition-duration", "0s");
},1000);
}
autoSlide();
}
});
autoSlide();
function autoSlide(){
//3초에 한번씩 next버튼 누르기
intervalId = window.setInterval(function(){
$(".next").click();
},3000);
}
2 - 1 ) 정규 표현식
유효성검사
: 사용자가 입력한 데이터가 양식에 맞는지 검사
1) 비밀번호와 비밀번호확인값이 동일한지
2) 아이디 or 비밀번호의 복잡도가 만족하는지
- 정규표현식
: 주로 프로그래밍언어나 text editor(메모장 등)등에서 문자열의 검색/치환을 위해 사용
-- meta문자 : 정규표현식에서 사용하는 기호(어떠한 의미가 있는 문자)
^ $ . + * ? () [] [^] [-] {n} {m} {n,m}
[ - ] : 범위값 지정
[ 가-힣 ] : 한글모든범위
[ a-zA-z0-9] : 영어 대소문자 숫자 - 범위값을 여러개 넣을 수 있다
\d : 숫자
\D : 숫자빼고 나머지
\w : 영문자
\W : 영문빼고 나머지
\s : 띄어쓰기
\S : 띄어쓰기 빼고 나머지
ab?c : b라는문자가 0~1개 ac abc
ab*c : b라는문자가 0~n ac abc abbbbbbbbc
ab+c : b라는문자가 1~n abc abbbbbbbbc
{} : 갯수
[a-z]{2} - 소문자가 2개
[a-z]{2,} - 소문자가 2개이상
[a-z]{2, 4} - 소문자가 2개이상 4개이하
<!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>정규표현식</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>정규표현식 테스트</h1>
<input type="text" name="input" id="input">
<button id="btn">확인</button>
<script>
$("#btn").on("click", function(){
const value = $("#input").val();
let regExp;
//1. a라는 문자가 포함되어 있으면
//regExp = /a/; // 정규표현식 입력
//2. a로 시작하면
// regExp = /^a/;
//3. a 또는 b가 포함되어 있으면
//regExp = /[ab]/;
//4. a 또는 b로 시작하는
//regExp = /^[ab]/;
//5. a로 끝나면
//regExp = /a$/;
//6. a또는 b로 끝나면
//regExp = /[ab]$/;
//7. a로 시작해서 b로 끝나면(단, 중간에 어떤문자가 얼만큼 와도 상관없음)
//regExp = /^a.*b$/;
//8. 숫자만입력(영어대/소문자, 한글 포함하면 안됨)
//regExp = /^[0-9]+$/;
//9. 영어 대/소문자만 입력하고 싶은 경우(1글자 이상)
//regExp = /^[a-zA-Z]+$/;
//10. 영어 대/소문자/숫자만 입력하고 싶은 경우
//regExp = /^[a-zA-Z0-9]+$/;
//11. 한글만 입력하고 싶은 경우
//regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
//12. 한글 3글자만 입력(이름)
//regExp = /^[가-힣]{3}$/;
//13. 한글 2글자~5글자
//regExp = /^[가-힣]{2,5}$/
//14. 아이디(영어 소문자/대문자/숫자 -> 글자수제한 6글자~15글자)
//regExp = /^[a-zA-Z0-9]{6,15}$/;
//15. 영어소문자/대문자/숫자 6~15글자 -> 시작은 무조건 소문자
//regExp = /^[a-z][a-zA-Z0-9]{5,14}$/; //합치면 6~15글자
//정규표현식에 test()함수를 이용해서 검사
//정규표현식.test(문자열); : 정규표현식 만족 시 true / 아니면 false 리턴
const check = regExp.test(value);
if(check){
alert("정규표현식 패턴 만족");
}else{
alert("불만족");
}
});
</script>
</body>
</html>2 - 2 ) 정규표현식 회원가입
<!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>정규표현식 회원가입</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>회원가입</h1>
<hr>
<form action="join.html" method="post" autocomplete="off">
<!-- autocomplete="off" : 자동완성 비활성화 -->
<table>
<tr>
<th>아이디</th>
<td>
<input type="text" name="id">
<span class="comment"></span>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pw">
<span class="comment"></span>
</td>
</tr>
<tr>
<th>비밀번호확인</th>
<td>
<input type="password" name="pwRe">
<span class="comment"></span>
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input type="text" name="name">
<span class="comment"></span>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type="text" name="phone1">
-
<input type="text" name="phone2">
-
<input type="text" name="phone3">
<span class="comment"></span>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input type="text" name="email1">
<span class="comment"></span>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</th>
</tr>
</table>
</form>
<script src="js/regJoin.js"></script>
</body>
</html>
3. 반응형 단위
<!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>반응형 단위</title>
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- 반응형 웹 (responsive web)
https://www.naver.com/ pc화면
https://m.naver.com/ 모바일화면
https://www.kakaocorp.com/page/
pc와 모바일의 주소는 같지만 화면의 크기에 따라 css가 달라진다.(브라우저 크기)
width/height
모바일 min-width,max-width / min-height,max-height
-->
<h1>반응형 단위</h1>
<hr>
<div class="test">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
<hr>
<div class="test">
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
</div>
<div class="test2">
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
</div>
<div class="test3">
<div class="div3"></div>
</div>
</body>
</html>body{
margin: 0;
/* width: 1000px; */
}
.test{
background-color: antiquewhite;
overflow: hidden;
width: 100%;
/* 브라우저 창이 아무리 작아져도 최소 넓이를 가짐 */
min-width: 500px;
/* 브라우저 창이 아무리 커져도 최대 넓이를 가짐 */
max-width: 600px;
}
.div1{
width: 100px;
height: 100px;
background-color: coral;
border: 1px solid black;
float: left;
}
.div2{
/* 부모 넓이 기준 상대크기 -> (부모 넓이 빼면) 브라우저 창 크기에 따라 */
width: 15%;
height: 100px;
background-color: cadetblue;
border: 1px solid black;
float: left;
}
.test2{
/*너비를 따로주지않음 : 항상 100%를 가져감 */
background-color: cornflowerblue;
overflow: hidden;
/*vw(viewport width) : 현재브라우저 크기의 너비를 100등분*/
width: 50vw; /*부모기준이 아닌 현재 브라우저 크기의 50% - 브라우저가 줄어들면 같이 줄어든다 */
/*vh(viewport height) : 현재브러우저 크기의 높이를 100등분*/
height: 30vh;
/*vw,vh : 브라우저크기가 바뀌면 동시에 변경됨*/
}
.test3{
width: 500px;
height: 300px;
background-color: chocolate;
}
.div3{
width: 50vw;
height: 50vh;
background-color: blue;
}
'국비수업 > jQuery' 카테고리의 다른 글
| 51일차 - 1 : modal, flex, bootstrap (0) | 2023.02.09 |
|---|---|
| 50일차 : [실습] 스텝메뉴만들기 / 아코디언메뉴만들기 (0) | 2023.02.07 |
| 49일차 : 이벤트, 효과 (0) | 2023.02.07 |
| 48일차 : 객체조작 (0) | 2023.02.03 |
| 47일차 : 객체탐색 (0) | 2023.02.02 |
'국비수업/jQuery' Related Articles
more
