5. Flex Panels ๐Ÿ’ช

yoxxinยท2022๋…„ 1์›” 19์ผ
0

javascript30

๋ชฉ๋ก ๋ณด๊ธฐ
4/9

์ดˆ๊ธฐํ™”๋ฉด

๊ฐ ํŒจ๋„ ํด๋ฆญ์‹œ

๊ฐ ํŒจ๋„์„ ํด๋ฆญ์‹œ์— ํ™”๋ฉด์ด ๋„“์–ด์ง€๊ณ , ์ˆจ๊ฒจ์ ธ์žˆ๋˜ ๊ธ€์”จ๋“ค๋„ ์œ„์—์„œ ๋‚ด๋ ค์˜ค๊ณ , ๋ฐ‘์—์„œ ์˜ฌ๋ผ์˜จ๋‹ค.

๊ธ€์”จ ํฌ๊ธฐ๋„ ์ข€ ๋” ์ปค์ง„๋‹ค.

1. ๋ชฉํ‘œ

CSS: flex๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์—ฐ์Šต : https://flexboxfroggy.com/#ko

JS: element class๋ฅผ ์คฌ๋‹ค ๋บ๋‹ค ํ•ด์„œ css๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.

addEventListener(), classList.toggle() ์ด์šฉ

2.์ •๋ฆฌ

1. flex

.panel: ๊ฐ๊ฐ์˜ panel์— ๋Œ€ํ•œ style

.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; /* ๊ฐ panel๋“ค์ด ์ฐจ์ง€ํ•  ๋น„์œจ์„ ์ผ์ •ํ•˜๊ฒŒ. 1*/
        display: flex;
        flex-direction: column; /* flex ์ ์šฉ๋ฐฉํ–ฅ: ์„ธ๋กœ*/
        justify-content: center; /* flex ์ž์‹ ์ค‘์•™์ •๋ ฌ*/
      }
  • display:flex :ํ•ด๋‹น element๋ฅผ flexํ™” ํ•œ๋‹ค.
  • flex-direction: flex item๋“ค์˜ ์ •๋ ฌ ๋ฐฉํ–ฅ์„ ๊ฒฐ์ •ํ•œ๋‹ค.
    • row, column

  • justify-content: flex์˜ ์ค‘์‹ฌ์ถ•์˜ ์ •๋ ฌ๊ธฐ์ค€์„ ์ •ํ•œ๋‹ค.
    • flex-direction์ด row๋ฉด ๊ฐ€๋กœ๋ฐฉํ–ฅ, column๋ฉด ์„ธ๋กœ๋ฐฉํ–ฅ
    • ์œ„ ๊ทธ๋ฆผ์€ flex-direction: row ๊ธฐ์ค€
    • center, flex-start, flex-end, stretch ...
  • align-items: flex์˜ ๊ต์ฐจ์ถ•์˜ ์ •๋ ฌ๊ธฐ์ค€์„ ์ •ํ•œ๋‹ค.
    • flex-direction์ด row๋ฉด ์„ธ๋กœ๋ฐฉํ–ฅ, column๋ฉด ๊ฐ€๋กœ๋ฐฉํ–ฅ
    • ์œ„ ๊ทธ๋ฆผ์€ flex-direction: row ๊ธฐ์ค€
    • center, flex-start, flex-end, stretch ...
  • flex : 1: ๊ฐ flex item์ด ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์˜ ๋น„์œจ(1)์„ ์„ค์ •

2. Element.classList.toggle(โ€™ํ•ด๋‹น๊ฐ’โ€™)

mdn ๋ฌธ์„œ

ํ•ด๋‹น element class์— ํ•ด๋‹น๊ฐ’์ด ์—†์œผ๋ฉด ์ถ”๊ฐ€ํ•˜๊ณ , ์žˆ์œผ๋ฉด ์‚ญ์ œํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ.
CSS ์™€ ์—ฐ๊ณ„ํ•ด์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋“ฏ ํ•˜๋‹ค.

Javascript

    // panel ํŽผ์น˜๊ธฐ
          // Element.classList.toggle('string')
          // <element class="string"> ํด๋ž˜์Šค ๊ฐ’ ์ถ”๊ฐ€
          function toggleOpen() {
            this.classList.toggle('open');
          }
    
          // ๊ธ€์ž ๋ณด์ด๊ธฐ
          // class: open-active์ถ”๊ฐ€
          function toggleActive(e) {
            // transition๋ฅผ ์ ์šฉํ•œ ์š”์†Œ๊ฐ€ 2๊ฐœ(font-size, flex-grow)์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋‚˜๋งŒ event๋ฅผ ์ ์šฉํ•ด์•ผํ•œ๋‹ค
            // this.classList.toggle('open-active');
            if (e.propertyName == 'font-size') {
              this.classList.toggle('open-active');
            }
          }
    
          const panels = document.querySelectorAll('.panel');
    
          // panel ํด๋ฆญ ์‹œ ํŽผ์น˜๊ธฐ
          panels.forEach((panel) => panel.addEventListener('click', toggleOpen));
    
          // ๋ณ€ํ™”๊ฐ€ ๋๋‚˜๋ฉด(transitionend), ์œ„ ์•„๋ž˜ ๊ธ€์”จ๋„ ๋ณด์—ฌ์ฃผ๊ธฐ.
          panels.forEach((panel) =>
            panel.addEventListener('transitionend', toggleActive)

css

    /* ์œ„ ์•„๋ž˜ ๋ฌธ์ž์—ด ์˜ฌ๋ ค์ง„ ์ƒํƒœ์—์„œ ํŒจ๋„์ด ์—ด๋ฆฌ๋ฉด ๋‚ด๋ฆฌ๊ธฐ*/
          .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);
          }

classList.toggle()์€ css์™€ ์—ฐ๊ณ„ํ•˜๋Š”๋ฐ,

  1. addEventListener๋กœ ํด๋ฆญ ์‹œ toggle์„ ํ˜ธ์ถœํ•ด์„œ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜ ์—†์• ์ฃผ๋Š” ๋™์ž‘์„ ์ถ”๊ฐ€ํ•œ๋‹ค.
  2. ์œ„ css ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด, open-active๊ฐ€ toggleํ•  ํด๋ž˜์Šค๊ฐ’์œผ๋กœ ์“ฐ์ด๊ณ  ์žˆ๋‹ค.
  3. open-active๊ฐ€ ์—†์œผ๋ฉด ๊ธ€์ž๋ฅผ ์ˆจ๊ธฐ๊ณ , ์žˆ์œผ๋ฉด ๊ธ€์ž๋ฅผ ๋ณด์ด๊ฒŒ ํ•œ๋‹ค.

3. ๊ฒฐ๋ก 

flex ์•„์ฃผ ๋งค๋ ฅ์ ์ด๋‹ค.
์ด ํ”„๋กœ์ ํŠธ์—์„œ ์“ด ์Šคํ‚ฌ์€ ํฌํŠธํด๋ฆฌ์˜ค ๋งŒ๋“ค๋•Œ๋„ ์œ ์šฉํ•  ๋“ฏ!

0๊ฐœ์˜ ๋Œ“๊ธ€