05 - Flex Panel Gallery (Javascript 30)

Flex Box에 대해서 공부하는 파트입니다.

 

기본 코드를 열고 아래의 코드를 추가해줍니다. (...은 기존에 추가되어 있던 코드를 의미합니다.)

.panels {
  ...
  display: flex;
}

.panel {
  ...
  flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

위의 css 코드를 추가하면 panels는 flex box로 변경이 되어 밑으로 나열되어 있던 panel 들이 옆으로 나열되게 됩니다.

그리고 panel들은 전부 같은 공간을 할당받기 위해 flex를 1로 설정하였으며 panel 안에 있는 텍스트를 중앙으로 배치하기 위해 값들을 추가하였습니다.

 

이번에는 아래의 코드를 추가해보겠습니다.

.panel > * {
  ...
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel.open {
  ...
  flex: 5;
}

위와 같이 css 코드를 추가해주면 중앙에만 배치되어 있던 텍스트들이 위 가운데 중간으로 각각 배치됩니다.

그리고 open 클래스가 panel에 추가된경우 flex를 5로 설정하였습니다.

 

자 css는 여기까지하고 우선은  js를 해보겠습니다.

 

이번 파트의 결과물은 클릭을하면 동적으로 클릭한 경우에 panel이 커졌다 작아졌다를 각기 반복하며 상,하 텍스트도 보였다 안보였다 합니다.

 

우선 모든 panel들에 이벤트를 주어야하므로 모든 panel element들을 가져오겠습니다.

아래의 코드로 가져올 수 있습니다.

let panels = document.querySelectorAll('.panel');

 

각각의 패널에 이벤트를 주겠습니다.

이번 이벤트는 클릭시 발동하기 때문에 click 이벤트를 먼저 작성하겠습니다.

function toogleOpen() {
  this.classList.toggle('open');  // toggle 메소드를 이용해 추가 또는 삭제를 자동화.
}

panels.forEach((panel) => panel.addEventListener('click', toogleOpen));

이제 위와 같이 코드를 입력하고 브라우저로 열어서 확인해보면 각각의 패널을 클릭하면 그 패널이 커졌다 작아졌다 하는 모습을 볼 수 있습니다!

 

그런데 아직 finished 파일과 다른 점이 보입니다.

finished 패널에서는 각 패널의 중앙 텍스트를 제외하고는 평소의 상태에선 상, 하의 텍스트가 보이지 않습니다.

단지 커져서 open 클래스가 활성화가 된 상태에서만 나타납니다.

그것도 open 클래스의 트랜지션이 종료된 상태에서만 텍스트가 상하에서 나타나는군요.

 

방법은 간단합니다.

지금까지 했던것들중 transitionend 이벤트가 있었습니다.

트랜지션이 완료되면 실행되는 이벤트죠.

이 이벤트를 이용해 작성해보면 됩니다.

 

우선 기존에 작성한 코드에 아래의 내용을 추가합니다.

panels.forEach((panel) => panel.addEventListener('transitionend', toggleActive));

 

그런데 아직 toggleActive 함수를 작성하지 않았습니다.

이 함수로인해서 open class가 추가되었을때 발생하는 트랜지션이 종료가 되었을때 텍스트를 움직여 주면 됩니다.

toogleActvie 함수는 아래와 같이 작성해주면 됩니다.

function toggleActive(e) {
  if (e.propertyName.includes('flex')) {
	this.classList.toggle('open-active');
  }
}

여기서 propertyName을 비교해주는 이유가 있습니다.

지금 저희는 위에서 open이라는 클래스가 추가되면 변경되는 것이 두가지가 있습니다.

 

먼저 panel의 flex값이 변경이됩니다.

panel 내부의 텍스트의 font-size가 변경이됩니다.

 

그렇기 때문에 flex의 값이 변경된 경우에만 open-active 클래스를 toggle 시키기위해 위와 같이 작성하였습니다.

 

하지만 아직 텍스트가 보였다 안보였다 하는 기능이 없습니다.

그 부분은 추가적으로 css로 작업이 필요합니다.

 

이제 그 부분을 작성해 보겠습니다.

먼저 사라졌다 나타났다 하는 텍스트가 어떤것인지 한번 생각을 해볼까요?

바로 panel 내부의 첫번째와 마지막 p 태그입니다.

 

우선 평상시에는 텍스트가 보이지 않아야 하므로 아래와 css 코드에 추가해보겠습니다.

.panel > *:first-child { transform: translateY(-100%); } /* 위로 올라갑니다. */
.panel > *:last-child { transform: translateY(100%); }  /* 밑으로 내려갑니다. */

 

이제 open 클래스가 활성화되고나서 활성화가 되는 open-active 클래스가 추가되면 텍스트가 원래의 위치로 돌아오도록 해보겠습니다.

.panel.open-active > * { transform: translateY(0); }

 

이제 다시 브라우저로 열어 확인해보면 finished와 동일한 결과를 보여줍니다.