-
글쓴이글
-
2021년 5월 29일 23:26 #9801
효기참가자level2에서 animation UI1 강의 중 animate가 적용(?)이 되질 않아서 질문 드렸습니다.
코딩은 똑같이 한것같은데 혹시 무슨 문제가 있을까요?
boot.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Hello, world!</title>
</head>
<body>
<div class="left-menu">
<p>Menu Title</p>
</div>
<div class="black-background">
<div class="white-background">
<p>로그인하세요</p>
<form action="login.php">
<div class="form-group">
<input
type="email"
class="form-control"
placeholder="Email"
id="email"
/>
<p id="email-alert">이메일이 빈칸입니다.</p>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
placeholder="Password"
id="email-password"
/>
<p id="password-alert">패스워드가 빈칸입니다</p>
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button id="close-button" style="background-color: red">닫기</button>
</form>
</div>
</div>
<div class="nav-menu">
<h4 style="margin: 0">coffe studio</h4>
<a id="nav-sub-button">Products</a>
</div>
<ul class="list-group nav-sub">
<li class="list-group-item">Outer</li>
<li class="list-group-item">Innerwear</li>
<li class="list-group-item">Shirts</li>
</ul>
<div class="jumbotron main-background">
<h1 class="display-4">do you like coffee?</h1>
<p class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-4" />
<p>
It uses utility classes for typography and spacing to space content out
within the larger container.
</p>
<a id="login" class="btn btn-primary btn-lg" role="button">Login</a>
<a id="show-menu" class="btn btn-danger btn-lg" role="button"
>Show Menu</a>
</div>
<script>
$("#show-menu").on("click", function{
$(".left-menu").animate({ marginLeft : '0px'});
});
</script><script>
$("#login").on("click", function () {
$(".black-background").fadeIn();
});$("#nav-sub-button").on("click", function () {
$(".nav-sub").slideToggle();
});
$("#close-button").on("click", function () {
$(".black-background").hide();
});
$("form").on("submit", function (e) {
if ($("#email").val() == "") {
e.preventDefault();
$("#email-alert").show();
} else if ($("#email-password").val() == "") {
e.preventDefault();
$("#password-alert").show();
}
});
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
</body>
</html>style.css
.alert {
background-color: rgb(128, 128, 223);
color: rgb(10, 10, 17);
padding: 20px;
border-radius: 5px;
display: none;
}
.main-background {
background: url(photo.jpg);
color: black;
background-size: cover;
border-radius: 0px;
}
.black-background {
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
.white-background {
background: white;
width: 80%;
margin: 100px auto;
padding: 20px;
border-radius: 10px;
}
.nav-menu {
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
}
.nav-sub {
display: none;
}
#email-alert {
display: none;
}
#password-alert {
display: none;
}
.left-menu {
width: 150px;
height: 100%;
background-color: black;
color: white;
position: fixed;
margin-left: -150px;
} -
글쓴이글
- 답변은 로그인 후 가능합니다.