[JavaScript30] 5. Flexbox + JavaScript Image Gallery

📃 요구사항

panel들을 담고있는 div는 화면을 꽉 채우고, 처음에는 각각의 panel들이 화면을 차지하는 비율이 동일하다.
각 panel들을 클릭하면 클릭된 요소가 차지하는 비율, 폰트 등이 변화하고 위아래 텍스트가 나타난다.
클릭된 panel을 다시 한 번 클릭하면 적용되었던 효과들이 초기화 된다.
위의 동작들을 계속해서 반복한다.

✨ 결과화면

용량이 커서 최대 색상 비트 수를 낮춰서 저장했더니 어딘가 낡은 움짤이 됐다..ㄷㄷ

💻 소스코드

📌 주어진 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flex Panels 💪</title>
    <link
      href="https://fonts.googleapis.com/css?family=Amatic+SC"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <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>
  </body>
</html>

🙄 내가 작성한 코드

CSS

html { box-sizing: border-box; background: #ffc600; font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } 

body { margin: 0; } 

*,
*:before,
*:after { box-sizing: inherit; } 

.panels { width: 100vw; display: flex; flex-direction: row; min-height: 100vh; overflow: hidden; } 

.panel { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; background: #6b0f9c; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; 
 /* Safari transitionend event.propertyName === flex */
 /* Chrome + FF transitionend event.propertyName === flex-grow */
 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; } 

.panel1 { background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } 
.panel2 { background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } 
.panel3 { background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } 
.panel4 { background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } 
.panel5 { background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } 

/* Flex Children */
.panel > * { margin: 0; width: 100%; transition: transform 0.5s; } 

.panel p { text-transform: uppercase; font-family: "Amatic SC", cursive; text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } 

.panel p:nth-child(odd) { visibility: hidden; opacity: 0; } 

.panel p:nth-child(2) { font-size: 4em; } 

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

.panel.open p:nth-child(odd) { visibility: visible; opacity: 1; }

JS

// 모든 panel들 가져와서 click 이벤트 추가
const panels = document.querySelectorAll(".panel");
panels.forEach((panel) => panel.addEventListener("click", clickMotion));
panels.forEach((panel) => panel.addEventListener("mouseleave", endMotion));

function clickMotion() {
  // open class를 추가해서 효과 적용
  this.classList.add("open");
}

function endMotion() {
  // visible처리 되어있는 홀수번째 p들을 모두 선택
  const p = this.querySelectorAll("p:nth-child(odd)");

  this.classList.remove("open");
  p.forEach((item) => {
    item.style.animation = `bottom-to-top 0.7s`;
  });
}

해당 요소가 click되면 clickMotion()을 통해 open 클래스를 추가하고, 해당 요소에서 마우스가 포커스 아웃되면 endMotion()을 통해 open 클래스를 제거해 주었다. 그리고 endMotion()에서는 forEach를 통해 선언한 animation을 할당해서 위아래의 텍스트가 슬라이딩되어 나타나고 없어지는 효과를 주려고 했는데 잘 되지는 않았다🙁..

🤗 개선된 강의 코드

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; 
  /* Safari transitionend event.propertyName === flex */
  /* Chrome + FF transitionend event.propertyName === flex-grow */
 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; justify-content: center; align-items: center; display: flex; flex-direction: column; } 
 
 /* Flex items */
.panel > * { margin: 0; width: 100%; transition: transform 0.5s; 
  flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } 

.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; font-size: 40px; }

나는 위아래 텍스트를 슬라이딩해서 나타나게 하는 효과를 어렵게 생각했었는데, 생각보다 간단했다. 단순하게 open-active 클래스를 활용하고, translateY(0)과 translateY(100%), translateY(-100%)만 사용하면 쉽게 표현할 수 있다.

JS

const panels = document.querySelectorAll(".panel");

function toggleOpen() {
  this.classList.toggle("open");
}

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

panels.forEach((panel) => panel.addEventListener("click", toggleOpen));
panels.forEach((panel) =>
  panel.addEventListener("transitionend", toggleActive)
);

📖 TIL

flex

flex는 CSS 속성 중 하나로, 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.

flex-grow: flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.
flex-shrink: 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소된다.
flex-basis: flex-item 요소의 초기 크기를 지정한다.

flex 속성은 1~3개의 값을 사용해서 지정할 수 있다.

1️⃣ 값이 한 개일 때

<number>를 지정하면 flex-grow
<length>또는 <percentage>를 지정하면 flex-basis
none, auto, initial중 하나를 지정할 수 있다.

2️⃣ 값이 두 개일 때

첫 번째 값은 <number>여야 하며 이는 곧 flex-grow가 된다.
두 번째 값은 다음 중 하나여야 한다.
- <number>를 지정하면 flex-shrink
- <length>, <percentage>, 또는 auto를 지정하면 flex-basis

3️⃣ 값이 세 개일 때

1. flex-grow에 사용할 <number>
2. flex-shrink에 사용할 <number>
3. flex-basis에 사용할 <length>, <percentage>, 또는 auto

강의 코드에서는 flex 속성을 다음과 같이 사용하였다.

/* flex-grow */
.panel { flex: 1; }

/* flex-grow | flex-shrink | flex-basis */
.panel > * { flex: 1 0 auto; }

각 CSS 요소들은 flex item이 될 수 있음과 동시에, flex container 또한 될 수 있다. (내가 이때까지 flex를 사용하면서도 가장 궁금했었고, 해결하고 싶었던 부분이다!)

toggle()

toggle()은, on/off switch의 개념이다. 그래서 어떤 기능 A를 부여한다고 했을 때, A가 켜졌다 꺼졌다를 반복하게 된다. 이것은 add(), remove() 메서드를 통해서도 구현할 수 있다. 즉, toggle()은 add()와 remove() 메서드가 합쳐진 개념이라고 생각하면 된다. 보통은 click이벤트에 classList를 이용하여 toggle로 css style을 준 클래스명을 on/off 처리한다.

강의 코드에서는 toggle()을 다음과 같이 활용하였다.

function toggleOpen() {
  this.classList.toggle("open");
}

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

toggle을 통해서 각각 open과 open-active 클래스를 add하고 remove하는 활동을 반복하게 만들었다. 그래서 이렇게 하면, open되고 active되고 deactive되고 close되는 등의 함수들을 다 따로 만들 필요 없이, 간결하게 코드를 작성할 수 있다.

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=9eif30i26jg&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=5

https://developer.mozilla.org/ko/docs/Web/CSS/flex

https://goddino.tistory.com/129

https://velog.io/@hxyxneee/JS-practice-%ED%86%A0%EA%B8%80-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

'language > javascript' 카테고리의 다른 글

[JavaScript30] 7. Array Cardio Practice (2) \| .some(), .every(), .find() and [...SPREADS] (0)	2022.02.05
[JavaScript30] 6. AJAX Type Ahead with fetch() \| fetch(), Spread Operator, RegExp (0)	2021.12.20
[JavaScript30] 4. Array Cardio Practice (1) (0)	2021.12.09
[JavaScript30] 3. CSS Variables \| CSS 변수, setProperty() (0)	2021.12.06
[JavaScript30] 2. Clock \| setInterval(), transform, transition (0)	2021.12.04