[JS] Day5 - Flex Panel Gallery

jiseong·2021년 8월 22일

T I Learned

목록 보기

39/291

Day5 - Flex Panel Gallery

🎯 기능 요구사항

사용자가 이미지 클릭 시 CSS transition와 flex를 활용하여 해당 이미지에 효과를 준다.

🚀 배운 점

siblings 찾기

const siblings = (curElement) => [...curElement.parentNode.children].filter(element => element !== curElement);

const classToggle = (element, className) => element.classList.toggle(className);

const stretchArea = (e) => {
    siblings(e.currentTarget).map(sibling => sibling.classList.remove("active", "open"));

    classToggle(e.currentTarget, "open");
    classToggle(e.currentTarget, "active");
}

[...panels].map(panel => panel.addEventListener("click", stretchArea));

기존에는 하나를 클릭하고 또 다른 하나를 클릭하여도 기존의 클릭하던 요소들은 유지가 되었다.
하지만, 같은 그룹 내에 하나만 동작되게 하고 싶어 siblings 요소들을 찾아 클래스를 제거해주는 방식으로 구현하였다.

box-sizing: border-box

div {
  box-sizing:border-box;

  border : 5px black solid;
  width : 100px;
  height : 100px;
}

default값은 컨텐츠 영역만을 나타내는 content-box이지만 border-box로 설정함으로써 지정한 width 및 height 크기가 모든 box-model의 합계로 지정된다.
이로써, content 기준이 아니라 border기준이 되기 때문에 개발자가 생각한 크기의 의도와 같아 조금 더 편리할 수 있다는 장점이 있다.

transition transform

    flex: 5;
    font-size: 40px;

    transition:
      font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
      flex-grow 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
      
    transform: translateY(-100%);
    transition: 1s cubic-bezier(.59,.17,.52,1);
    
    transform: translateY(0);