[JavaScript] 요소 숨기고 보이게 컨트롤 하기 (feat. jQuery)

웹 개발을 하면서 자주 사용하는 요소를 보이게 하거나 숨기게하는 방법에 대해서 알아보자.

 

---

1. style.display 속성

// modBtn ID 값을 가진 요소 숨기기
document.getElementById('modBtn').style.display = 'none';

// modBtn ID 값을 가진 요소 보이기
document.getElementById('modBtn').style.display = 'block';

// modBtn ID 값을 가진 요소를 원래 display 값으로 복원
document.getElementById('modBtn').style.display = '';

장점

• 간단하고 직관적
• 완전히 레이아웃에서 제거됨

단점

• 원래 display 값을 기억해야 함
• 갑작스러운 변화로 자연스럽지 않음

 

---

2. style.visibility 속성 사용

 

// 요소 숨기기 (공간은 유지)
document.getElementById('modBtn').style.visibility = 'hidden';

// 요소 보이기
document.getElementById('modBtn').style.visibility = 'visible';

display vs visibility 차이

• display: none: 완전히 제거 (공간도 차지하지 않음)
• visibility: hidden: 투명하게 만듦 (공간은 그대로 유지)

 

---

3. jQuery의 show(), hide() 함수

 

jQuery에서 제공되는 간단한 함수로 show(), hide() 함수가 있다.

// jQuery 방식
$('#modBtn').hide();     // 요소 숨기기
$('#modBtn').show();     // 요소 보이기

$('#modBtn').hide(500);         // 500ms 동안 fade out
$('#modBtn').show('slow');      // 천천히 fade in

jQuery의 장점

• 매우 간단한 문법
• 크로스 브라우저 호환성
• 다양한 애니메이션 효과 내장

jQuery의 단점

• 추가 라이브러리 필요