[JavaScript30] Day 5

Flex Panel Gallery

 

flex css 설정하기

.panels {
  display: flex; /* 자식요소가 필요로하는 만큼의 공간 */      
}

.panel {
  display: flex;
  flex: 1; 
  justify-content: center;
  flex-direction: column; /* flex-direction : 주축 방향 설정 */  
}

/* Flex Children */
.panel > * {
  display: flex;
  flex: 1 0 auto; /* flex-grow flex-shrink flex-basis가 축약된 것 */
  justify-content: center; /* justify-content : 주축을 기준으로 아이템을 어떻게 수평정렬할지 설정 */
  align-items: center; /* align-items : 주축을 기준으로 아이템을 어떻게 수직정렬할지 설정 */  
}

.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); }

.panel.open {
  flex: 5;
}

 

javascript로 이벤트 주기

const panels = document.querySelectorAll('.panel'); // .panels모두 선택 

function toggleOpen() {
  // console.log('Hello');
  this.classList.toggle('open'); 
} // 'open'을 toggle

function toggleActive(e) {
  // console.log(e.propertyName);
  if(e.propertyName.includes('flex')) {
    this.classList.toggle('open-active');
  }
} // 프로퍼티이름이 flex를 포함하는 경우만'open-active'을 toggle

panels.forEach(panel => panel.addEventListener('click', toggleOpen)); // click이 발생하면 toggleOpen이 실행
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)) // transitionend가 발생하면 toggleActive 실행

 

 

 

 

---

DOMTokenList.toggle() : 선택된 요소를 추가하거나 제거하는 메서드

String.includes() : 주어진 문자열이 다른 문자열에 포함되었는지를 true / false로 반환하는 메서드

 

flex를 사용하기 전 참고하면 좋은 사이트 (https://d2.naver.com/helloworld/8540176)

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)