WEB 웹/JAVASCRIPT

Flex Panels (javascript30 - 5)

KIMSG 2017. 11. 20. 15:03




1
2
3
4
5
.panels {
   min-height:100vh;
   overflow: hidden;
   display: flex;
}

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');
    }
 }

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 속성의 이름입니다.


1

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

transitionend : 변화가 끝날때

저작자표시 비영리 동일조건 (새창열림)