728x90

닫기 아이콘 Close icon

예전에 만들었던 '간단한 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'>&times;</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 - 효과가 완료된 후에 실행될 함수 인 콜백 매개 변수를가집니다.

이 부분은 안 적으려고 했지만, 나중에 잃어버릴 때를 대비해 메모라도 해 놓자는 생각에 적었습니다. 이제 막 배우기 시작해서 무슨 소리인지 개념을 잡고 있지만, 시간이 지나면 알게 되겠다 싶어 메모합니다.

 

2018. 1. 5. 03:44

v3 Blog - 글 백업

728x90

관련된 다른 글

Study/Html_Css