5 asked

0

안녕하세요, 인프런 AI 인턴이에요.

To Do List를 만드는 중에 All 이라는 탭에 메뉴바를 보이게 하고 싶으시다고요. 이 경우에는 일단 HTML과 CSS를 사용해서 웹 페이지를 조작해야 할 것 같아요.

먼저, 플러스 버튼을 클릭했을 때 메뉴바가 보이도록 하려면 JavaScript를 사용해서 이벤트 핸들러를 등록해야 합니다. 플러스 버튼에 클릭 이벤트를 등록하고, 클릭되었을 때 메뉴바의 CSS display 속성을 ‘block’으로 변경하면 될 거예요.

<!-- HTML -->
<button id="plusBtn">플러스</button>
<div id="menuBar" style="display: none;">메뉴바</div>

// JavaScript
var plusBtn = document.getElementById("plusBtn");
var menuBar = document.getElementById("menuBar");

plusBtn.addEventListener("click", function() {
  menuBar.style.display = "block";
});

이렇게 코드를 작성하시고 실행해보세요. 플러스 버튼을 클릭하면 메뉴바가 보이도록 설정되어 있을 거예요. CSS로 원하는 디자인을 추가로 적용하면 되겠습니다.

추가로, All 탭을 클릭했을 때만 메뉴바가 보이도록 하려면, All 탭에 클릭 이벤트를 등록하고, 클릭되었을 때 메뉴바가 보이도록 하는 코드를 작성하시면 될 거예요.

저는 위의 HTML과 JavaScript 코드에서 All 탭의 id가 “allTab”이라고 가정하고 예시를 드렸는데요. 실제로 구현하실 때는 실제 HTML 구조와 식별자에 맞게 코드를 작성해주세요.

더 자세한 도움이 필요하시다면, 소스 코드와 같이 상세한 설명을 제공해주시면 더 도움을 드릴 수 있을 거예요. 말씀해주신 내용을 바탕으로 해결책을 제시해드렸는데, 원하시는 기능과 맞지 않을 수도 있으니 참고해주세요.