[javascript30] 05-flex panel gallery

이미 클릭하면 이미지크기가 커지고 아래 위 글씨가 나타남

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

//css

 

css는 기존에 있던 거에 flex로 배열을 맞춰주었다.

    .panel p:nth-child(1) {transform: translateY(-100%);}

    .panel p:nth-child(3) {transform: translateY(100%);}

    .panel.open { flex: 5; font-size: 40px;}

    .panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);}

글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를 주었더니 클릭이벤트시 선택한 레이아웃의 크기가 알아서 조절됨

const panel = document.querySelectorAll('.panel');

function panelClickHandler() {
  this.classList.toggle('open');
}

panel.forEach(panel => {
  panel.addEventListener('click', panelClickHandler);
});

처음엔 화살표 함수로 써서 안됐었다. 

화살표 함수를 써서 this를 쓰려니 window가 선택되어 찾아보니 this를 쓰려면 function을 써야한다고 해서 바꿨다.