웹 페이지를 개발하다보면 특정 요소를 숨기거나 보이게 해야 하는 경우가 있습니다. 자바스크립트를 사용하여 이를 수행할 수 있으며, 가장 일반적인 방법은 요소의 스타일 속성을 변경하여 해당 요소를 숨기거나 보이게 하는 것입니다.

1. 요소 숨기기

특정 요소를 숨기기 위해서는 해당 요소의 display 속성을 ‘none’ 으로 설정합니다.

document.getElementById('elementId').style.display = 'none';

이 코드는 id가 ‘elementId’인 요소를 숨깁니다.

2. 요소 보이기

숨겨진 요소를 다시 보이게 하려면, 해당 요소의 display 속성을 ‘block’ 이나 ‘inline’ 등으로 설정합니다.

document.getElementById('elementId').style.display = 'block';

이 코드는 id가 ‘elementId’인 요소를 보이게 합니다.

요약

자바스크립트를 사용하여 웹 페이지의 특정 요소를 보이기 혹은 숨기기 위해서는 style 속성의 display 속성을 조절하는 방법을 사용합니다.

이러한 방법을 통해 필요한 상황에 맞게 웹 페이지를 동적으로 제어할 수 있습니다.

본 문서는 다음을 참고하여 작성되었습니다:

• MDN Web Docs