예전에 만들었던 '간단한 X버튼 만들기'에서는 자바스크립트를 이용해서 만들었고 이번에는 JQuery를 사용해서 만들어 보겠습니다.
먼저 .close선택자와 .notice선택자의 css를 만들고,
.notice {
padding:10px;
background-color:rgb(249, 250, 252);
text-align:left;
margin-top: 5px;
}
.notice h4 {
font-size:1.3rem;
font-weight: 700;
padding:1px 0;
}
.notice p {
-webkit-margin-before: .3em;
-webkit-margin-after: .5em;
}
.close {
float:right;
display:inline-block;
padding:1px 5px;
font-weight: 700;
text-shadow: 0 1px 0 #fff;
font-size: 1.3rem;
}
.close:hover {
border: 0;
cursor:pointer;
opacity: .75;
}예전 것의 id에서 class로 변환했습니다.
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".close").click(function(){
$(".notice").hide();
});
});
</script>
</head>JQuery 3.2.1버전을 사용, 밑에 .hide()문을 사용하여 .notice클래스를 숨깁니다.
<div class="notice"> <span class='close'>×</span> <h4>공지사항</h4> <p>내용</p> </div>
예전 것에 비교해 간단하고 쉽게 사용할 수 있어 더 좋은 것 같습니다.
jQuery hide () 및 show (),toggle()
- $(selector).hide(speed,callback); - HTML 요소를 숨기기
- $(selector).show(speed,callback); - HTML 요소를 보여지기
- $(selector).toggle(speed,callback); - hide () 및 show () 메서드를 서로 전환
: speed - 속도 매개 변수는 "slow", "fast" 또는 밀리 초의 값을 취할 수 있습니다.
예) $(this).hide(500);
: callback - 효과가 완료된 후에 실행될 함수 인 콜백 매개 변수를가집니다.
이 부분은 안 적으려고 했지만, 나중에 잃어버릴 때를 대비해 메모라도 해 놓자는 생각에 적었습니다. 이제 막 배우기 시작해서 무슨 소리인지 개념을 잡고 있지만, 시간이 지나면 알게 되겠다 싶어 메모합니다.
