[JS30] JavaScript30 Day 5

서론

오늘은 flex에 관해서 공부하는 날이다.

flex를 엄청 깊게 다루지는 않고 찍먹정도이니 나중에 내가 혼자서 더 깊게 공부해봐야겠다. 참고하기 좋은 사이트: 1분 코딩 flex편

구현

링크

Flex Panel Gallery

Task

1. flex의 활용
   • flex-grow & flex
2. 임의로 추가한 것들
   • blur
   • filter transition
   • flex-grow
   • cursor

1. flex의 활용

flex에는 여러 속성이 있다. justify-content, flex-direction등은 이미 아는 것이니 내가 모르는 flex-grow와 flex에 대해서 정리하려 한다.

flex-grow

• flex-grow는 flex-item 요소들이 flex-container(flex를 적용한 요소) 내부에서 할당 가능한 공간의 정도를 선언한다.
• 보통 flex-grow을 사용할 땐, flex-shrink, flex-basis 속성을 함께 사용한다.
• flex-basis의 값보다 얼마큼 커질지 결정하는 속성
  • 아이템들이 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나눈만큼 커짐

flex-basis

• 이 속성은 flex 아이템의 초기 크기를 결정한다.
  • flex-direction이 row라면 너비, column이면 높이의 크기를 조정한다
  • flex-basis: 100px, 이렇게 설정하면 100px이 안되는 요소는 100px로 늘어나고, 넘는 요소는 그대로 그 크기를 유지한다

flex-shrink

• 만약 flex-item의 요소가 flex-container 요소보다 클 때 사용하는 속성
  • 숫자의 크기에 따라서 flex-item의 요소의 크기가 축소된다

flex

• flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.
• flex: flex-grow flex-shrink flex-basis 이런 형태로 사용된다

2. 임의로 추가한 것들

• blur
  • 사진을 클릭하기 전에는 사진이 흐릿하게 보이게 하고 싶었다.
  • 그래서 .panel에 filter: blur(10px); 속성을 추가했다.
• filter transition
  • 사진을 클릭하면 사진이 선명해져야 하는데 사진이 천천히 선명해지길 원했다.
  • 우선 사진이 클릭된 상태, .panel.open이 된 상태에 filter: blur(0px);를 추가해서 사진을 선명하게 만들었다.
  • 그리고 .panel transition속성에 filter 0.7s을 추가했다.
• flex-grow
  • 영상에 보면 .panel.open에 flex-grow 속성이 있는데 아마도 브라우저마다 flex-grow의 e.propertyName을 다르게 표현해서 없앤 것 같다.
  • 그래서 화면 크기가 충분하면, 즉 글자를 키워도 할당된 크기가 충분하면 요소가 커지지 않는다.
  • 나는 클릭하면 다 커지게 만들고 싶어서 flex-grow 속성을 추가했다.
• cursor
  • 또한 사진에 마우스를 올리면 커서 모양이 변경되게 cursor: pointer; 속성을 주었다.

TLD

flex는 이미 알고 있었지만 flex:1이나 flex-grow같은 것들은 오늘 처음 활용했다. flex의 활용을 제대로 못하고 있었구나를 깨닫는 날이였다.

그리고 CSS 선택자는 오늘 처음 봤다! 원래 #이나 .같은 선택자는 이미 알고 있었으나 >와 *도 있는지 처음 알았다. CSS 선택자 이거 보고서 더 공부해야겠다.

또한 하나의 transition 여러 효과를 적용할 수 있다는 것도 처음 알았다. 이렇게 하니 코드가 한결 깔끔해보여서 좋다.

최종 코드

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

function toggleOpen(e) {
  const current = e.currentTarget;
  panels.forEach(panel => {
    if (panel.classList[1] !== current.classList[1] && panel.classList[2] === "open") {
      panel.classList.toggle("open");
    }
  });
  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));