5. Flex Panel Gallery

5일차의 공부 내용을 정리해보도록 하겠다.

먼저 코드부터 살펴보도록 하자.

코드 분석

<!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>
  <style>
    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 {
      min-height:100vh;
      overflow: hidden;
    }

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

    .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: translate(0); }

    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/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(2) {
      font-size: 4em;
    }

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

  </style>


  <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>

  <script>

  </script>




</body>
</html>

목표

display: flex; 에 대해 알아보고 자바스크립트 효과를 연습

분석 개요

위의 내용을 7단계로 나누어 보았다.

가로로 배열이 되는 항목들을 세로화 시키기
세로화 시킨 항목들이 페이지에 알맞게 분배되도록 하기
모든 글자들이 3x3으로 나누어지도록 분배하기
이후 가로,세로 가운데 정렬
맨 윗줄과 맨 아랫줄 각자 방향으로 밀어넣기
해당 칸을 클릭할 때 확대가 되어 나타나게 하기
칸이 확대 될 때 밀어넣었던 윗줄과 아랫줄 불러오기

분석

1.

아무런 효과를 적용시키지 않고 단순하게 나눈 div는 가로로 배열이 될 수 밖에없다.
따라서, 먼저 CSS의 flex container 를 정의하여 한다.

flex container를 정의 하는 방법은
display: flex; 이다.

이를 선언하고 나면 모든 직접적인 하위 항목에 대해서 flex context 를 사용할 수 있다.

그렇다면, flex context를 사용할 수 있다는 것이 어떤 것을 의미하는 것일까?

flex context를 사용할 수 있게 되면, flexbox 내에 있는 콘텐츠들을 어떤 방향에든 위치 시킬 수 있고, 동적으로 변경가능한 순서를 지정할 수 있으며, 가능한 공간 내에서 크기와 위치를 자동 조정 할 수도 있다.

2~4.

flex: 1; : flexbox에 있는 모든 panel들의 크기를 동일하게 분배
justify-content: center; : 주축을 기준으로 가운데 정렬을 함 (가로 가운데 정렬)
align-items: center; : 주축에 수직으로 가운데 정렬을 함 (세로 가운데 정렬)
flex-direction: column; : flexbox 내에 있는 content를 칼럼 형식으로 배열(세로로 배열한다.)

5.

.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: translate(0); }

이렇게 정리하게 되면, 평소에는 맨 윗줄과 맨 아랫줄이 사라져있다가
open-active 시에 제자리로 돌아오게 된다.

6, 7

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

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

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

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

panels 변수에 panel이라는 클래스를 가진 것들을 모두 넣고

forEach를 적용하여 변수에 속하는 모든 것들에 내용을 적용한다고 선언한다.

내용을 분석해보면 흔히 화살표 함수라고 부르는 Arrow Function 을 사용했는데

이는 함수 선언의 간단한 형식(?) 이다.

이것으로 addEventListener 를 적용하면 클릭시에 toggleOpen을 함수를 실행하게 되고

아래의 transitionend 는 그 변화를 마쳤을 때 toggleActive를 실행하게 한 내용이다.

앞으로 자주 손보면서 정리하겠다. 머리가 아프다.

'개발 > JavaScript 30' 카테고리의 다른 글

11. Custom Video Player (0)	2017.04.18
10. Hold Shift and Checkboxes (0)	2017.04.14
9. Dev Tools Domination (0)	2017.04.13
8. Fun with HTML5 Canvas (0)	2017.04.12
7. Array Cardio Day 2 (2)	2017.04.11

Wannabe Thveloper

5. Flex Panel Gallery

코드 분석

목표

분석 개요

분석

1.

2~4.

5.

6, 7

'개발 > JavaScript 30' 카테고리의 다른 글

티스토리툴바

5. Flex Panel Gallery

코드 분석

목표

분석 개요

분석

1.

2~4.

5.

6, 7

'개발 > JavaScript 30' 카테고리의 다른 글

'개발/JavaScript 30' Related Articles

티스토리툴바