Flex Panels (javascript30 - 5)

Flex-box 활용하기. (https://github.com/KIMSG/javascript30/blob/master/day5/index.html)

1 2 3 4 5

.panels {    min-height:100vh;    overflow: hidden;    display: flex; }

cs

Flexbox레이아웃을 구성할 땐 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다.

지원현황 : 

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE10+(hybrid)	FF2~21(old), FF22이상(modern)	SF3.1 이상(old), iOS3.2 이상(old)	CH21 이상(modern), CH20 이하(old), An2.1 이상(old)	O12 이상(modern)

Blackberry 브라우저 10 이상은 modern 문법을 지원한다.

출처: http://webdir.tistory.com/349 [WEBDIR]

flex-direction: flexible item의 방향을 지정한다.

    
row : 기본값으로, 행으로 수평방향으로 왼쪽에서 오른쪽으로 정렬한다.
row-reverse : 행으로 수평방향으로 오른쪽에서 왼쪽으로 정렬한다.
column : 열로 수직방향으로 위에서 아래로 정렬한다.
column-reverse : 열로 수직방향으로 아래에서 위로 정렬한다.
initial : 디폴트 값으로 이 속성을 설정한다.
inherit : 부모 요소로부터 값을 상속 받는다.

• 
  

Flex-wrap : wrap할 것인지를 지정한다.

Flex-flow : (flex-direction) (Flex-wrap)

justify-content: 주축에서 flex아이템을 배치하는 방법을 정의한다.

flex-start || flex-end || center || space-between || space-around

flex-start : 아이템을 주축의 시작 부분으로 그룹화한다.

flex-end : 아이템을 주축의 끝 부분으로 그룹화한다.

center : 아이템들을 가운데로 그룹화한다.

space-between : 각 항목에 동일한 간격을 준다.

space-around : 주위에 동일한 간격을 유지한다.

transform: translateY(0) : Y축으로 지정된 숫자만큼 이동.

1 2 3 4 5

function toggleActive(e) {     if (e.propertyName.includes('flex')) {        this.classList.toggle('open-active');     }  } Colored by Color Scripter

cs

classList : class의 목록에 접근하는 방식을 간편하게 표현한 것이다.

메서드 : add, remove, item, toggle, contains

add( String [, String] )

특정 클래스 값을 추가한다. 만약 요소의 속성에 추가하려는 클래스가 존재한다면 무시된다.

remove( String [, String] )

특정 클래스 값을 제거한다.

item( Number )

클래스 값을 콜렉션의 인덱스를 이용하여 반환한다.

toggle( String [, force] )

한개의 인수만 있을 때 : 클래스 값을 변환한다. 즉 클래스가 존재한다면 지우고 false를 반환하며, 존재하지 않다면 그것을 추가하고 true를 반환한다. 두번째 인수가 있을 때 : 두번째 인수가 true로 평가되면 특정 클래스 값을 추가하고 false로 평가되면 지운다.

contains( String )

특정 클래스 값이 요소의 클래스 속성에 존재하는지 확인한다.

propertyName : 전환과 관련된 CSS 속성의 이름입니다.

MDN의 사용법 https://developer.mozilla.org/ko/docs/Web/API/Element/classList

1

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

cs

transitionend : 변화가 끝날때