첨부된 동영상을 참조하세요(중간중간에 매끄럽지 않은 부분이 있습니다. 참고하세요)--확인해보니 녹음이 안되었습니다.
마이크에 문제가 있나봅니다.ㅜ.ㅜ(그래도 한번 보시면 이해될 수 있으리라 생각됩니다. 빠른 시일내에 처리하도록 하겠습니다.)
사용할 소스
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 시작</title>
<!-- 외부 style -->
<!-- 외부 script -->
</head>
<body>
</body>
</html>
* 동영상을 보고 CSS와 jQuery를 연결 한 후에 아래의 코드를 따라가세요
작성할 첫번째
<div class="h-pop-wrap">
<div class="h-pop">헤더 팝업</div>
</div>
<div class="full-container wrap">
<div class="full-container header">
<header id="header">헤더</header>
</div>
<div class="full-container nav">
<nav id="gnb">전체 네비</nav>
</div>
<div class="contents">
컨텐츠
</div>
<div class="full-container footer">
<footer id="footer">푸터</footer>
</div>
</div>
첫번째 CSS
@charset "utf-8";
html,body{
margin:0;
background:#aaaaaa;
}
a{
color:#333333;
text-decoration:none;
}
a:hover{
color:orange;
}
*{
position:relative;
}
.h-pop-wrap{
width:100%;
background:gold;
}
.h-pop{
width:100%;
max-width:1400px;
height:50px;
margin:0 auto;
background:yellow;
}
.full-container{
width:100%;
}
.header{
background:#eeeeee;
}
#header{
width:100%;
max-width:1400px;
height:150px;
margin:0 auto;
background:white;
}
.nav{
background:black;
}
#gnb{
width:100%;
max-width:1400px;
height:70px;
background:#eeeeee;
margin:0 auto;
}
.contents{
width:100%;
max-width:1400px;
height:1500px;
background:white;
margin:0 auto;
}
.footer{
background:darkred;
}
#footer{
width:100%;
max-width:1400px;
height:100px;
margin:0 auto;
background:#999999;
}
popup 태그
contents에 작성합니다.
<!-- popup -->
<div class="popup">
<h3>공지사상</h3>
<button class="p-close">X</button>
</div>
CSS를 작성합니다.
/* popup CSS */
.popup{
position:absolute;
width:300px;
height:400px;
background:#cccccc;
border:5px solid black;
z-index:999999;
top:10%;
left:30%;
}
.popup h3{
width:50%;
background:black;
padding:10px 0;
margin:10px auto;
color:white;
text-align:center;
}
.p-close{
position:absolute;
bottom:20px;
right:20px;
}
jQuery 부분
$(document).ready(function(){
// popup
$(".p-close").click(function(){
$(".popup").hide();
});
});