보이기와 감추기 - visibility 와 display

JavaScript

레이어 보이기와 감추기

 

 

자바스크립트 및 CSS를 이용하여 DIV를 보이게하고 감추는 방법에 대하여 알아보도록 하겠습니다. 

 

먼저 보이고 보이지 않게 될 대상을 하나 생성합니다.

 

<div id="target" style="width:100px;height:100px; background-color:blue;"></div>

 

가로, 세로 100px 의 사각형 모양에 파란색의 배경색을 지정 해 보았습니다.

그리고 div의 id는 target로 설정 하였습니다.

 

이제 이 DIV를 보이게 또는 보이지 않게 제어할 버튼을 만들어 보겠습니다.

감추기 버튼과 보이기 버튼 두개의 버튼을 만들어 봅니다.

 

<input type="button" value="감추기" onclick="document.all['target'].style.visibility = 'hidden';">
<input type="button" value="보이기" onclick="document.all['target'].style.visibility = 'visible';">

 

 

 

여기에서 끝나면 조금 아쉽죠 그래서 한 가지 더 알아 보도록 하겠습니다.

보이이 감추기 기능을 가지고 있는 함수는visiblility와 함께 display라는 함수가 있습니다.

 

<input type="button" value="감추기" onclick="document.all['target'].style.display= 'none';">
<input type="button" value="보이기" onclick="document.all['target'].style.display = 'block';">

 

 

그럼 두 가지의 차이는 무었일까요?

 

클릭 해 보셨으면 아셨겠지만 visibility 는 공간을 그대로 두고 단순히 보이지 않게 합니다.

하지만 display는 공간까지 사라지게 만든다는 것입니다.