.items {
background-color: transparent;
height: 230px;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
/* flex-wrap: wrap; */
overflow-x: scroll;
스크롤바가 너무 보기 싫으니, css로 수정해 높이와 너비를 줄이고 투명하게 만든다.
::-webkit-scrollbar {
width: 3px;
height: 3 px;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
//참고 : https://eunyoe.tistory.com/entry/CSS-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94scroll-bar-CSS-%EC%BB%A4%EC%8A%A4%ED%85%80-%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%98%EA%B8%B0
이제 밑에 추천아이템과 같이 상품을 보여주는 다른 컨테이너를 만들어주자.
그리고, 메뉴바에 넣어두었던 필터링 버튼을 각 타이틀 밑으로 내려 각각 상품을 필터링할 수 있도록 하자.
메뉴바는 기존 지그재그앱과 같이 만들자.
(필터 아이콘을 함께 넣어주어야겠다)
// 팝업 창 클릭해 닫기
const popup_close = document.querySelector(".popup_close");
const popup_box = document.querySelector(".popup_box");
const popup_icon = document.querySelector(".popup_icon");
const popup_text = document.querySelector(".popup_text");
// 팝업 창 닫기 버튼을 누르면 이벤트 발생
popup_close.addEventListener("click", () => {
popup_box.classList.toggle("active");
console.log("delete box");
popup_icon.classList.toggle("active");
console.log("delete icon");
popup_text.classList.toggle("active");
console.log("delete text");
popup_close.classList.toggle("active");
console.log("delete close icon");
console.log("창닫기 클릭");
// popup_close의 classList중 active 클래스를 토글링
// =마우스 클릭시 클래스가 액티브가 있다면 빼주고,없다면 액티브 추가
});
.popup_icon.active {
visibility: hidden;
}
.popup_text.active {
color: transparent;
}
.popup_close.active {
color: transparent;
}
.popup_box.active {
background-color: transparent;
}
닫기 버튼을 클릭하면
팝업창이 사라진다.
classList.toggle("active")
active 클래스를 전부 토글링, 가져온다.
.popup_icon.active {
visibility: hidden;
//active=>hidden
//hidden은 영역을 보이지 않게 숨겨줄 뿐, 해당 영역 자체를 없애지는 않는다.
//영역을 삭제하는 것은 visibility:none;
::-webkit-scrollbar {