팀 프로젝트 1일차
화면을 전환하는 자바스크립트 코드를 짜 보자.
const content1 = document.querySelector("#bodywrap");
const content2 = document.querySelector("#card-container");
const modal1 = document.querySelector("#member_modalLayer");
const modal2 = document.querySelector("#modal__join__container");우선 파트별로 변수를 설정해준다.
const btn1 = document.querySelector(".li-1");
const btn2 = document.querySelector(".li-2");window.onload = function () {
content2.classList.add("switch");
// modal1.classList.add("switch");
// modal2.classList.add("switch");
};switch 를 add 하거나 remove 하여 모달창을 켜고 끄는 로직을 짜보았다. 결과는 실패! 탭이 중첩되어 보이거나 이동하지 않는 상황. 챗GPT의 힘을 빌려 다시 짜보기로 했다.
결과는??
// document.addEventListener("DOMcontentLoaded", () => {
// const navLinks = document.querySelectorAll("#nav-menu");
// const sections = document.querySelectorAll(".section");
// navLinks.forEach((link) => {
// link.addEventListener("click", (event) => {
// event.preventDefault(); // 기본 동작 방지 (스크롤 이동 방지)
// // 모든 섹션 숨기기
// sections.forEach((section) => {
// section.style.display = "none";
// });
// // 클릭된 버튼의 대상 섹션 보이기
// const targetId = link.dataset.target;
// const targetSection = document.getElementById(targetId);
// if (targetSection) {
// targetSection.style.display = "block";
// }
// });
// });
// });장렬히 실패! GPT 실망이야.
n트.
// 팀소개
btn1.addEventListener("click", () => {
if (
content2.classList.contains("switch") &&
title.classList.contains("switch")
) {
} else {
title.classList.add("switch");
content2.classList.add("switch");
content1.classList.remove("switch");
}
});
// 멤버 소개
btn2.addEventListener("click", () => {
if (
content1.classList.contains("switch") &&
title.classList.contains("switch")
) {
} else {
title.classList.add("switch");
content1.classList.add("switch");
content2.classList.remove("switch");
}
});화면 전환용 버튼 btn1, btn2 생성, html 코드에 class="switch" 를 추가해 addEventListner 로 click 이벤트 발생 시 각 창이 표시되도록 if 문을 활용한 코드를 짜 보았다.
중간에 이걸 토글로 해야하나, add와 remove의 위치가 잘못되었나, function 함수를 써야 하나 팀원과 온갖 경우의 수를 실험해 보다가 집단 지성의 힘으로 완료했다.
뭘 좀 알고 코드를 짰어야 하는데, 공부할 시간은 없고 프로젝트는 당장 완성이라 우왕좌왕해서 내가 뭘 어떻게 짰는지 기억도 잘 안 난다^^ 미친 듯이 복습해야지 룰릴랠룰
p.s. 놀랍게도 프로젝트를 완성한 후 아무래도 코드가 실행되지 않았던 점이 이상해서, 프로젝트의 해당 부분 (탭 스위치 부분) 만 다시 처음 짠 코드로 변경해 보니 실행이 되었다. css 나 html 에서 문제가 있었을 지도 모르는 상황. 다음부터는 꼭 코드를 짤 때 js 때문에 실행되지 않는 게 아니라 뭔가 구조적인 문제가 있을지도 모른다는 생각을 하고 검토해 보아야겠다!
:D