다연이네

[days02] display:none과 visibility: hidden 본문

Web/CSS

[days02] display:none과 visibility: hidden

　다연　 2020. 12. 4. 18:39
반응형

요약: display:none는 흔적조차 남지 않고 visibility: hidden은 흔적을 남긴다.

 

 

1. display:none 

display : none이 적용되어 있는 버튼을 누르면 box1이 사라지며 공간조차 남지 않는다.

display : none

2. visibility: hidden

visibility : hidden이 적용되어 있는 버튼을 누르면 box2가 사라지며 있던 공간이 남는다.

visibility : hidden

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.imgbox{
	width:120px;
	text-align: center;
	border: 1px solid gray;
	padding: 6px;
	
	float: left;
}

.imgbox img, .imgbox button{
	width:100%; /* 부모(.imgbox)의크기 (120px)를 따라간다 */
}
</style>

</head>
<body>

<!-- .imgbox#imgbox1 -->
<div class="imgbox" id="imgbox1">
Box1
<img src="../images/img_5terre.jpg" alt="" />
<button onclick="remove();">Remove</button>
</div>

<div class="imgbox" id="imgbox2">
Box2
<img src="../images/img_forest.jpg" alt="" />
<button onclick="hide()">Hide</button>
</div>

<div class="imgbox" id="imgbox3">
Box3
<img src="../images/img_lights.jpg" alt="" />
<button onclick="resetAll()">Reset All</button>
</div>

<script>
	function remove() {
		//console.log("remove() 함수 호출됨"); /* f12눌러서 콘솔창 봐야함 */
		//1. imgbox1 아이디를 가진 div요소를 얻어와서
		//2. 그 요소의 style 속성에 display=none
		//javascript로 처리
		
		document.getElementById("imgbox1").style.display="none";
		//														속성.속성값="" 쌍따옴표 반드시
	
	}
	
	function hide() {
		//console.log("hide() 함수 호출됨");
		document.getElementById("imgbox2").style.visibility="hidden";
	}
	
	function resetAll() {
		//console.log("resetAll() 함수 호출됨");
		document.getElementById("imgbox1").style.display="block"; //다시보이게
		document.getElementById("imgbox2").style.visibility="visible";
	}

</script>
</body>
</html>

 

 

위의 코딩을 JQuery를 사용해 변경해보자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.imgbox{
	width:120px;
	text-align: center;
	border: 1px solid gray;
	padding: 6px;
	float: left;
}

.imgbox img, .imgbox button{
	width:100%; 
}
</style>

</head>
<body>

<div class="imgbox" id="imgbox1">
Box1
<img src="../images/img_5terre.jpg" alt="" />
<button >Remove</button>
</div>

<div class="imgbox" id="imgbox2">
Box2
<img src="../images/img_forest.jpg" alt="" />
<button >Hide</button>
</div>

<div class="imgbox" id="imgbox3">
Box3
<img src="../images/img_lights.jpg" alt="" />
<button >Reset All</button>
</div>

<script>
	/* 버튼을 찾아오려하는데 id값이 없다 
		-> 버튼은 버튼인데 id기 imgbox1 안에 있는 버튼 으로 찾아오자 */
	$("#imgbox1 > button").click(function(){
		$("#imgbox1").hide();
	});
	$("#imgbox2 > button").click(function(){
		$("#imgbox2").css("visibility", "hidden"); /* visibility=hide를 jquery로  */
		/* .css(속성명, 속성값) */
	});
	$("button","#imgbox3").click(function(){ /*이렇게 찾아올 수도 있음  */
		  $("#imgbox1").show();  /* hide로 숨긴거면 show()로 보이게 할 수 있음 */
	 	 $("#imgbox2").css("visibility","visible");  
		// $("#imgbox1, #imgbox2").slideToggle();
	
	});

</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days02] 1) sticky와 2) fixed으로 sticky 효과 내기  (0) 2020.12.04
[days02] 위치 속성(position)  (0) 2020.12.04
[days02] 테이블 만들기  (0) 2020.12.04
[days02] 1. CSS 목록 속성 2. 마우스 롤오버 (+href, src, url 차이)  (0) 2020.12.04
[days02] 페이징 처리  (0) 2020.12.04
'Web/CSS' Related Articles more
Comments