"# JavaScript 30" 강의 - 05. Flex Panel Gallery

학습일자

2020.10.4

 

학습내용

- flex 속성

 : item의 너비(증가, 감소, 기본)의 변화 속성을 한번에 설정

 : 증가 = flex-grow, 감소 = flex-shrink, 기본(공간 배분 전 기본 너비) - flex-basis 

- transition

 :  어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하기 위한 속성

- Element.classList.toggle("클래스명")

 : 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환

developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList

 

 

알게된 점

- CSS의 flex 속성은 가로 혹은 세로의 1차원 정렬을 위한 강력한 도구임 (반면, grid는 가로 및 세로를 한번에 정리시키는 2차원 정렬을 위한 좋은 도구)

- transition이 종료되면, transitionend 이벤트 객체가 생성되고, 그 이벤트 객체는 propertyName(완료된 transition의 CSS 속성 값)의 속성값을 가짐

- flex 속성은 크게 flex item을 감싸는 container와 item 각각에 부여할 수 있는 속성 그룹으로 나눌 수 있음

출처: https://heropy.blog/2018/11/24/css-flexible-box/

heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드