일부 사용자 입력 폼에서는 특정 조건에 따라 텍스트를 표시하거나 숨겨야 하는 경우가 있습니다. 이를 위해서 JavaScript와 HTML를 사용하여 간단하게 구현할 수 있습니다.

HTML과 CSS

먼저, HTML에서 입력 폼과 텍스트 요소를 정의합니다. 예를 들어, 다음과 같이 <input> 요소와 <div>를 사용할 수 있습니다.

<input type="checkbox" id="toggleText"> Show/Hide Text
<div id="textToToggle">This text can be shown or hidden</div>

그런 다음, CSS를 사용하여 숨길 텍스트에 스타일을 적용합니다.

#textToToggle {
  display: none;
}

JavaScript

이제 JavaScript를 사용하여 특정 이벤트 발생 시 텍스트를 표시하거나 숨길 수 있습니다.

document.getElementById('toggleText').addEventListener('change', function() {
    var text = document.getElementById('textToToggle');
    text.style.display = this.checked ? 'block' : 'none';
});

위의 코드에서는 toggleText라는 체크박스의 변경 이벤트에 대한 리스너를 등록하고, 체크 상태에 따라 textToToggle 요소를 숨기거나 표시합니다.

이제 이 코드를 사용하여 입력 폼에서 특정 요소의 텍스트를 표시하거나 숨길 수 있습니다.

참고 자료

• MDN Web Docs
• CSS 매뉴얼