[CSS/JavaScript] 버튼(element) 숨기기 보이기

 

 

이번에는 CSS를 사용하여

버튼(element)을 숨기는 방법과

사용자 이벤트가 발생하였을 때

Javascript를 사용하여 버튼을 숨기고 다시 보일수 있는 방법(토글)을 정리하였습니다.

 

1. [CSS] 버튼 숨기기
   1. display : none;
   2. visibility : hidden;
2. [Javascript] 버튼 숨기기, 보이기 (토글)
   1. display 속성
   2. visibility 속성

 

 

 

1. [CSS] 버튼 숨기기

  display : none;  

 

<input type='button' value='버튼1' id='btn1'/>
<input type='button' value='버튼2' id='btn2'/>
<input type='button' value='버튼3' id='btn3'/>

#btn2 {
  display : none;
}

 

위 예제에는 원래 3개의 버튼이 존재 합니다. (버튼1, 버튼2, 버튼3)

 

display: none;

display 속성값을 none으로 설정하면

해당 버튼은 화면에서 사라지고, 더 이상 화면에서 공간을 차지하지 않게 됩니다.

 

이 예제에서는

'버튼2'에 CSS의 'display' 속성 값을 'none' 설정하여

'버튼2'를 화면에서 숨겼습니다.

'버튼2'가 사라지고, '버튼2'는 더이상 공간을 차지하지 않고,

'버튼1' 다음에 바로 '버튼3'가 온 것을 확인할 수 있습니다.

 

 

 

  visibility : hidden;  

 

<input type='button' value='버튼1' id='btn1'/>
<input type='button' value='버튼2' id='btn2'/>
<input type='button' value='버튼3' id='btn3'/>

#btn2 {
  visibility : hidden;
}

 

visibility: hidden;

CSS의 'visibility' 속성은

화면의 레이아웃을 변경하지 않고,

element를 숨기거나 보여줍니다.

 

이번에는 '버튼2'의 'visibility' CSS 속성을 'hidden'으로 지정하였습니다.

'버튼2'가 화면에서 사라졌지만

'display: none'과는 다르게

'버튼2'가 여전히 화면의 한 영역을 차지 하고 있습니다.

 

 

 

 

2. [Javascript] 버튼 숨기기, 보이기 (토글)

 

  display 속성  

 

<div>
  <input type='button' value='버튼' id='btn1'/>
</div>
<div>
  <input 
         type='button' 
         value='이 버튼을 클릭하세요' 
         id='btn2'
         onclick='toggleBtn1()'/>
</div>

function toggleBtn1() {
  
  // 토글 할 버튼 선택 (btn1)
  const btn1 = document.getElementById('btn1');
  
  // btn1 숨기기 (display: none)
  if(btn1.style.display !== 'none') {
    btn1.style.display = 'none';
  }
  // btn` 보이기 (display: block)
  else {
    btn1.style.display = 'block';
  }
  
}

 

위 예제는

'이 버튼을 클릭하세요' 버튼을 클릭할 때마다

'버튼' 버튼이 토글되는 예제입니다.

 

document.getElementById('btn1');

getElementById() 함수를 사용하여

토글할 대상 버튼을 선택하였습니다.

 

if(btn1.style.display !== 'none') {

 ....

} else {

 ....

}

토글할 대상 버튼의 상태를 체크하여

(display 속성값이 'none'인지 체크)

display 속성값을 변경하여

버튼을 화면에 숨기고, 보여줍니다.

 

 

 

  visibility 속성  

 

<div>
  <input type='button' value='버튼' id='btn1'/>
</div>
<div>
  <input 
         type='button' 
         value='이 버튼을 클릭하세요' 
         id='btn2'
         onclick='toggleBtn1()'/>
</div>

function toggleBtn1() {
  
  // 토글 할 버튼 선택 (btn1)
  const btn1 = document.getElementById('btn1');
  
  // btn1 숨기기 (visibility: hidden)
  if(btn1.style.visibility !== 'hidden') {
    btn1.style.visibility = 'hidden';
  }
  // btn` 보이기 (visibility: visible)
  else {
    btn1.style.visibility = 'visible';
  }
  
}

 

위 예제와 마찬가지 방법으로

이번에는 visibility 속성값을 변경하여

버튼 토글 기능을 구현하였습니다.

여기서는,

버튼이 사라지더라도

버튼 영역이 그대로 유지되는 것을 확인할 수 있습니다.

 

 

---

 

CSS의 display, visibility 속성을 이용하여

화면에서 버튼을 숨기고 보이는 방법을 알아보았습니다.