아래 에러나는 전체 구요 계속 에러납니다.

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글
2022년 1월 21일 14:18 #25349

조가비
참가자

선생님하는거 그대로 따라하는 중인데 그런 에러가 왜 나는지요?

여기서 막혀서 진도가 안나갑니다

저장을 안하진않았구요

그럴정도로 it에 초보는 아닙니다.(프로그래머 10년경력)

아래코드는 프로그램 전체 복붙 한거니까 한번 봐주세요 그부분

<!doctype html>
<html lang="kor">
<head>

<meta charset="euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<link href="css/scroll.css" rel="stylesheet">

<title>스크롤애니메이션1:스크롤시변하는 Navbar만들기</title>
</head>
<body>
<div class="left-menu">
<ul>
<li class="list-group-item">브라질리언왁싱</li>
<li class="list-group-item">바디왁싱</li>
<li class="list-group-item">페이스왁싱</li>
<li class="list-group-item">각질관리 프로그램</li>
<li class="list-group-item">페디플래닝</li>
<li class="list-group-item">울쎄라리프팅</li>
</ul>
</div>

<script>
// console.log( $(window).scrollTop() );
//스크롤바를 내리면
// .nav-menu가 background : white;
$(window).on(‘scroll’,function(){
// console.log(‘안녕’)
// 만약에 지금 스크롤을 100px 내릴때만 아래 코드 실행
// 지금 얼만큼 스크롤을 내렸는지알수있는 함수
// $('.nav-menu').addClass('nav-black');
});
</script>

<div class="Top-menu">
<p>Top Menu Title</p>
</div>

<div class="black-background">
<div class="white-background">


<p>로그인하세요</p>
<form action="wax6001q.html">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" id="email">
<p id="email-alert">이메일이 빈칸이네요~~</p>
<p id="email-regural-alert">이메일 형식이 맞지 않아요</p>
<p id="email-ing">email 입력 중....</p>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" id="password">
<p id="password-alert">비밀번호를 입력해 주세요</p>
<p id="password-ing">비밀번호 입력 중....</p>
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button class="btn btn-danger" id="close">닫기</button>
<button class="btn btn-primary" id="hoiwon-gaip">회원가입</button>
</form>
</div>
</div>

<div class="nav-menu">
<h4 style="margin:0">Victoria Waxing</h4>
<a class="nav-sub-button">예약하기</a>
</div>

<ul class="list-group nav-sub">
<br><br>
<li class="list-group-item">브라질리언왁싱</li>
<li class="list-group-item">바디왁싱</li>
<li class="list-group-item">페이스왁싱</li>
<li class="list-group-item">각질관리 프로그램</li>
<li class="list-group-item">페디플래닝</li>
<li class="list-group-item">울쎄라리프팅</li>
</ul>

<div class="Jumbotron main-background">
<br><br><br>

<p class="lead">빅토리아왁싱에 오신것을 환영합니다.</p>
<hr class="my-4">
<p>브라질리언왁싱</p>
<p>남성 55,000원 여성 45,000원</p>
<a id="login" class="btn btn-primary btn-lg" href="#" role="button">회원로그인</a><br>
<a id="show-menu" class="btn btn-danger btn-lg" href="#" role="button">시술항목보기</a><br>
<a id="hide-menu" class="btn btn-danger btn-lg" href="#" role="button">시술항목감추기</a>

</div>

<script>
$('#close').click(function(){
// close 버튼이 작동하지 않는다. 아래와같이 하니까
// $('.black-background').addClass('slide-up');
// hide는 가능하다.
$('.black-background').hide();
});

$('#login').click(function(){
// $('.black-background').show();
// $('.black-background').animate({ marginTop : '0px' },1000);
// 아래와 같이 사용할수도 있다.
// $('.black-background').show().animate({ marginTop : '0px' },1000);
// margin 을 사용하면 스무스하게 되지 않는다.
// $('.black-background').css('marginTop','0px');
// 그래서 transform을 쓴다. transform: translate() : X축 Y축으로 이동하게 만들고싶을때
// transform: translateX() : X축으로 이동하게 만들고싶을때
// transform: translateY() : Y축으로 이동하게 만들고싶을때
// $('.black-background').css('transform','translateY(0px)');
// 복잡한 애니메이션만들때는 그냥 클래스를 하나더 만들어서 그걸 만드는게 낫다.
// 이미 css에서 slide-down을 만들어두고 여기서 클래서 생성하기만 하면 된다.
$('.black-background').addClass('slide-down');
});
$('#show-menu').click(function(){
$('.left-menu').animate({marginLeft : '0px'},1000);
});
$('#hide-menu').click(function(){
$('.left-menu').animate({marginLeft : '-150px'},1000);
});

// 범위가 function
var 나이 = 20;
// 범위가 {}
// 재선언이 불가능한 변수를 만들때
// 최초선언 후 변할수 있다.
let 나이1 = 20;
나이1 = 나이1++;

// 범위가 {}
// 재선언이 불가능, 재할당이 불가능, 최초선언 후 해당값이 변하지도 않는다.
const 나이2 = 20;

// 아래 input는 이메일쪽에 글씨가 입력되는 도중에 나타나게 한다.
$('#email').on('input',function() {
$('#email-ing').show();
});
$('#password').on('input',function() {
$('#password-ing').show();
});
// change는 input란에 값을 입력하다가 다른곳에 커서를 한번 찍을때 즉 포커스를 잃을때 실행
$('#email').on('change',function() {
// $('#email-ing').show();
});
$('#password').on('change',function() {
// $('#password-ing').show();
});

// email 정규식표현 체크 /abc/
// 지금 abc가 들어있나요? --> /abc/.test('abcdefg');
// email 정규식
// []를 사용 -> /[A-z]/ -> 대문자 A 부터 z까지 ex) /[A-z]/.test('s') : s 가 있는지
// /[\S]/.test('ㄴ') -> \S : 특수문자포함 모든 문자
// [\S@] -> 모든문자 다음에 @가 나오는지
// [\S@\S.\S] -> 모든문자 다음에 @,모든문자 다음에 ., 모든문자 -> 이렇게 나오는지 체크
// 그런데 \S는 단하나의 문자를 의미 bjbjk@ 되면 모든문자가 k만 체크한다.
// 그래서 @앞의 모든문자를 체크하고 싶으면 \S+@
// 정확한 이메일 형식 --> /\S+@\S+.\S+/ -> 이렇게 하면 딱맞다.
$('form').on('submit',function(e){
// 만약 입력된 값이 이메일 정규식이 맞는 경우
// 폼의 전송을 막는것이 바로 아래, 안내문 띄움.
if ((/\S+@\S+.\S+/.test($('#email').val())) == false) {
e.preventDefault();
$('#email-regural-alert').show();
// $('#email-alert').style.display = 'block';
} else if($('#email').val() == '') {
e.preventDefault();
} else {
$('#email-alert').hide();
var input_password = $('#password').val();
// 아래형식으로 하면 알파벳이 먼저오고 뒤에 숫자가 와야 한다. 반대면 전송안됨
if(/[a-z]+[0-9]+/.test(input_password) == false) {
e.preventDefault();
$('#password-alert').show();
// $('#password-alert').style.display = 'block';
} else if(input_password == '') {
e.preventDefault();
}
}
});
/*
// 폼이 전송될 때
// 만약 이메일 input에 입력된값이 빈칸인 경우
// 폼의 전송을 막음 안내문 띄움
$('form').on('submit',function(e){
// submit가 바로 폼이 전송시를 의미하며 function의 e의 경우 이벤트 를 의미한다.
// 폼의 전송을 막는것이 바로 아래, 안내문 띄움.
if($('#email').val() == '') {
e.preventDefault();
$('#email-alert').show();
// $('#email-alert').style.display = 'block';
} else {
$('#email-alert').hide();
if($('#password').val() == '') {
e.preventDefault();
$('#password-alert').show();
// $('#password-alert').style.display = 'block';
}
}
});
*/
/*
$('#logout').on('click', function(){
$('.black-background').fadeOut();
});
$('#login').on('click', function(){
// $('.black-background').fadeIn();
if($('#test-input').val()!='안녕') {
$('.black-background').fadeToggle();
}
// $('.black-background').fadeOut();
});
*/
$('.nav-sub-button').click(function(){
// $('.nav-sub').slideDown();
// $('.nav-sub').fadeIn();
// $('.black-background').fadeOut();
// 만약에 리스트가 보이면 안보이게 안보이면 보이게 해야한다.
// 쌩자바스크립트의 경우
// $('.nav-sub').slideToggle();
// 그냥 Toggle만 사용시는 hide()와 show()의 경우이다.
$('.nav-sub').toggle();
});

$('.btn').on('click', function(){
// $('#login').on('click', function(){
// $('.black-background').style.display = 'none';
// $('.black-background').slideUp();
// $('.black-background').slideDown();
// $('.black-background').fadeIn();
// $('.black-background').show();
// $('.black-background').hide();
});
</script>

<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>
<h4 class="my-4 text-center">샵내부</h4>

<div style="overflow:hidden; position: relative">
<div class="slide-container">
<div class="slide-box">

</div>
<div class="slide-box">

</div>
<div class="slide-box">

</div>

</div>
<button class="slide-prev">Prev</button>
<button class="slide-next">Next</button>
</div>

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

<script>
// 아래와 같이 하면 편리하다.
// 전체사진갯수가 변경시에는 main.css의 slide container의 width도 변경
var 전체사진갯수 = 3;
var 지금보이는사진 = 1;
$('.slide-next').click(function(){
if(지금보이는사진 < 전체사진갯수) {
$('.slide-container').css('transform','translateX(-' + 지금보이는사진 + '00vw)');
//아래와 같이 하는건 사진을 다 보여줬을때 첨으로 가게하는것
지금보이는사진++;
// 지금보이는사진이 마지막사진일때는 버튼이 더이상 동작하지 않음.
}
});
// 아래는 직전 사진으로 돌아갈때
$('.slide-prev').click(function(){
// 지금보이는사진이 1일때는 동작하지 않는다.
if(지금보이는사진 > 1) {
$('.slide-container').css('transform','translateX(-' + (지금보이는사진 - 2) + '00vw)');
//아래와 같이 하는건 사진을 다 보여줬을때 첨으로 가게하는것
지금보이는사진--;
}
});
// -------------여기까지는 아래와 같은 경우를 간소화한것 ----
// 지금보이는 사진이 1번째 사진이다.
/*
var 지금보이는사진 = 1;
$('.slide-next').click(function(){
if(지금보이는사진==1){
// 사진2를 보여주세요
$('.slide-container').css('transform','translateX(-100vw)');
지금보이는사진++;
} else if(지금보이는사진==2) {
$('.slide-container').css('transform','translateX(-200vw)');
지금보이는사진++;
} else if(지금보이는사진==3) {
$('.slide-container').css('transform','translateX(0vw)');
지금보이는사진 = 1;
}
});
*/
// 위와같은 방식은 계속 코딩을 추가해야 하는것이다, 그래서 별로다.
//--------------여기까지
$('.slide-1').click(function(){
//아까 그div가 transform: translateX(-100vw); 되어야 함
$('.slide-container').css('transform','translateX(0vw)');
});
$('.slide-2').click(function(){
//아까 그div가 transform: translateX(-100vw); 되어야 함
$('.slide-container').css('transform','translateX(-100vw)');
});
$('.slide-3').click(function(){
//아까 그div가 transform: translateX(-100vw); 되어야 함
$('.slide-container').css('transform','translateX(-200vw)');
});
</script>




<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>



</body>
</html>

2022년 1월 21일 17:23 #25369

codingapple
키 마스터

$(window).on(‘scroll’,

따옴표가 특수기호 따옴표라그런듯요 일반 따옴표로 바꿉시다
글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

아래 에러나는 전체 구요 계속 에러납니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png