sidebar 만들기

 

핵심적 코드

화면크기에 따라 코드다르게 하려면 미디어쿼리(Media Query)

화면크기에 따라 css가 달라지게하는 코드가 있다. 

정확히는 조건에 따라 스타일을 달라지게 만들 수 있다.

 

max-width: 500px 전체 화면크기가 500px 이하일때

sidebar_container의 width를 100%로 해버렸다.

(scss)

@media all and (max-width: 500px) {
  #sidebar_container {
    width: 100%;
    transition-duration: 0.5s;
  }
}

 

미디어쿼리

 

사이드바 옆으로 넣고 빼기

의외로 간단하게 만들었다.

.end 라는 class를 만들고

x버튼을 클릭하면 end를 넣어서 좌측으로 빠지게 만들고

list 버튼을 클릭하면 end를 빼버려서 다시 돌아오게 만들었다.

(SCSS)
.end {
  transform: translate(-300px);
}

(JS)
const exit = document.querySelector(".exit"); // x 버튼
const list = document.querySelector(".list"); // 우측상단 list 버튼
const container = document.querySelector("#sidebar_container"); // 사이드바 전체 

exit.addEventListener("click", function () {
  container.classList.add("end");
});
list.addEventListener("click", function () {
  container.classList.remove("end");
});

 

배운부분

 

애니메이션과 미디어쿼리를 오랜만에 해서 많이 까먹어서 내가 쓴 블로그를 다시 봤다.

animation 속성들

 

투명색

버튼이 자꾸 옅은 회색으로 칠해져있길래

뒤에 색에 동화되도록 투명색을 찾아보았다.

color에 transparent를 넣으면 투명으로 된다고한다.

button {
  cursor: pointer;
  background-color: transparent;
}

 

&:hover{}

hover가 있는걸 알고는 있었는데 scss에서는 어떻게 사용해야하는지 몰랐다.

&:hover{}를 사용하면 된다는 것을 알았다.

#sidebar_menu {
  width: 100%;
  margin-top: 20px;
  height: 80%;
  .menu {
    cursor: pointer;
    padding: 10px 10px;
    &:hover {
      background-color: rgb(205, 205, 255);
    }
  }
}