[Javascript30] 5. Flex Panel Gallery

[Javascript30] 5. Flex Panel Gallery

Javascript30은 바닐라 자바스크립트(Vanila Javascript)로 30일 동안 매일 한 개의 프로젝트를 만들며 기본기를 익히는 챌린지입니다. 이 챌린지를 수행하면서 새로 알게 된 내용을 정리합니다. 참고로 HTML, CSS 소스 코드는 생략될 수 있으니 필요하다면 여기에서 확인하시길 바랍니다.

목표

소스 코드

CSS

.panels { min-height: 100vh; overflow: hidden; display: flex; } .panel { background: #6b0f9c; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; display: flex; flex-direction: column; justify-content: center; } .panel > * { margin: 0; width: 100%; transition: transform 0.5s; flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panel p:nth-child(2) { font-size: 4em; } .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: 4; font-size: 40px; }

Javascript

const panels = document.querySelectorAll('.panel'); function toggleOpen() { this.classList.toggle('open'); } function toggleOpenActive(e) { console.log(e); /* * 여기서 위의 console.log에 flex-grow, font-size, transform, transform으로 총 4개의 * 이벤트가 걸리는데 아래와 같이 if로 flex만 분기해주지 않으면 총 4번 toggle되어서 결과적으로는 * open-active 클래스가 추가되지 않는다. */ if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } } panels.forEach((panel) => panel.addEventListener('click', toggleOpen)); panels.forEach((panel) => panel.addEventListener('transitionend', toggleOpenActive), );

주요 문법 및 포인트

CSS Flex

Flex 속성의 자세한 내용은 여기를 참조하자.

flex: [flex-grow] [flex-shrink] [flex-basis] /* flex의 shorthand */ flex-grow: 0 /* flex item의 증가 너비 비율을 설정 */ flex-shrink: 1 /* flex item의 감소 너비 비율을 설정 */ flex-basis: auto /* flex item의 기본 너비를 설정 */ justify-content: flex-start /* 주 축의 정렬 방법을 설정*/ align-content: center /* 교차 축의 items의 정렬 방법을 설정(2줄이상) */ align-items: flex-end /* 교차 축의 items의 정렬 방법을 설정(1줄) */

String.prototype.includes(문자열)

includes() 함수를 사용해서 특정 문자열의 포함 여부를 확인 할 수 있다.

const str = 'abcdflexefghijklmnopqrstuvxyz"; console.log(str.includes("flex")); // true

from http://leo-xee.tistory.com/10 by ccl(A) rewrite - 2021-12-02 03:02:16