브라우저 제목

첨부된 동영상을 참조하세요(중간중간에 매끄럽지 않은 부분이 있습니다. 참고하세요)--확인해보니 녹음이 안되었습니다.

마이크에 문제가 있나봅니다.ㅜ.ㅜ(그래도 한번 보시면 이해될 수 있으리라 생각됩니다. 빠른 시일내에 처리하도록 하겠습니다.)

사용할 소스

<!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();
    });
    
});

제목 날짜
gtq자료 2019.05.27
자료 file 2018.12.11
버튼이 있는 슬라이딩 file 2018.08.30
자격증 세로 네비게이션 2018.08.19
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
woff변환 프로그램 file 2018.06.18
태그와 css정리 목록 file 2018.06.15
연산자와 네비고정, 네비 메뉴 file 2018.06.12
네비 드롭(click)2 file 2018.06.11
네비 드롭(click)1 file 2018.06.11
bxslider 연결 및 기본 옵션 file 2018.06.07
jquery 로그인 팝업 2018.06.06
jquery 시작 동영상 file 2018.06.06
태그 정리 file 2018.06.04
21일차 동영상은 제작하지 않았습니다. 2018.05.08
레이아웃6 두번째 file 2018.05.04
레이아웃6 첫번째 file 2018.05.04
레이아웃5 file 2018.05.03
레이아웃2 file 2018.05.03
태그 목록