• 원페이지였으니, 이제 상품은 가로로 정렬하고, 가로 스크롤로 볼 수 있도록 만들어보고 싶어졌다.

.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

이제 밑에 추천아이템과 같이 상품을 보여주는 다른 컨테이너를 만들어주자.

그리고, 메뉴바에 넣어두었던 필터링 버튼을 각 타이틀 밑으로 내려 각각 상품을 필터링할 수 있도록 하자.
메뉴바는 기존 지그재그앱과 같이 만들자.

(필터 아이콘을 함께 넣어주어야겠다)

팝업창 닫기버튼 누르면 사라지게 만들기

js

//   팝업 창 클릭해 닫기
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 클래스를 토글링
  // =마우스 클릭시 클래스가 액티브가 있다면 빼주고,없다면 액티브 추가
});

css

.popup_icon.active {
  visibility: hidden;
}
.popup_text.active {
  color: transparent;
}
.popup_close.active {
  color: transparent;
}
.popup_box.active {
  background-color: transparent;
}

닫기 버튼을 클릭하면

팝업창이 사라진다.

배운점 정리

• classList.toggle

classList.toggle("active")
active 클래스를 전부 토글링, 가져온다.

• css .active

.popup_icon.active {
  visibility: hidden;
  //active=>hidden
  //hidden은 영역을 보이지 않게 숨겨줄 뿐, 해당 영역 자체를 없애지는 않는다.
  //영역을 삭제하는 것은 visibility:none;

• 스크롤바 css 적용 방법

::-webkit-scrollbar {