웹 페이지 상에서 JavaScript를 사용하여 DOM 요소를 숨기거나 보이게 하는 방법에 대해 알아보겠습니다.

DOM 요소 숨기기

DOM 요소를 숨기는 가장 일반적인 방법은 해당 요소의 style 속성을 이용하여 display 속성 값을 none으로 설정하는 것입니다. 아래는 예시 코드입니다.

document.getElementById("myElement").style.display = "none";

위의 코드는 id가 “myElement”인 요소를 숨기는 방법을 보여줍니다.

DOM 요소 보이기

이전에 숨겼던 DOM 요소를 다시 보이게 하려면 display 속성 값을 다시 block 이나 inline 등으로 설정하면 됩니다. 예를 들면:

document.getElementById("myElement").style.display = "block";

요약

JavaScript를 사용하여 DOM 요소를 숨기거나 보이게 하는 것은 웹 페이지의 상호작용성을 높이는 데 유용합니다. 이러한 기능을 활용하여 사용자 경험을 향상시키는데 도움이 됩니다.

위에서 설명한 방법 외에도 jQuery, React 및 다른 프레임워크 및 라이브러리에서도 DOM 요소를 숨기거나 보이게 하는 다양한 방법을 제공하니 필요에 따라 해당 기술을 적용할 수 있습니다.

참고문헌:

• MDN Web Docs