05 - Flex Panels image gallery

5번째 강의시간에는 CSS의 Flex를 통해서 이미지 갤러리를 만들어보는 시간이다.

CSS에 Flex는 한국에서는 거의 사용하기 힘든 속성이다. 왜냐면... 익스플로러 상위버전에 사용 가능하기 때문에

사용하기 쉽지 않다.

그래도 알아두어야 나중에나 응용을 할 수 있기때문에 안쓴다고 해서 넘어가지 말자.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90

MDN에서 css flex를 찾아본 결과이다. 자세히 나와있으니 모르시는 분들은 한번씩 읽어보면 좋을꺼 같다.

자바스크립트의 토글을 이용해서 클라스를 추가하고 제거하고를 이용해서 효과를 주고 있는데

지금은 간단하게 만들고 넘어가는 강의지만 실제로 사용하기 위해선 조금 더 손을 봐야하는 부분이 있다.

다른 블럭을 클릭했을때 기존에 추가했던 토글들을 제거해야하는 등 여러가지 조건을 조금 더 추가해야한다고 생각이 든다.

css 코드

.panel > *:first-child { transform: translateY(-100%); }
.panel.open-active > *:first-child { transform: translateY(0); }
.panel > *:last-child { transform: translateY(100%); }
.panel.open-active > *:last-child { transform: translateY(0); }

const panels = document.querySelectorAll('.panel');
 
    function toggleOpen() {
      console.log('Hello');
      this.classList.toggle('open');
      //그것에 open 클라스를 토글한다.
    }
 
    function toggleActive(e) {
      console.log(e.propertyName);
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }
      //토글한 panel에 각 효과 줄것에 대해서 open-active라는 토글한다.
    }
 
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));