05 - Flex Panel Gallery

개요

 

flex 를 활용하여 panel 들이 click 에 멋지게 반응하게 해보자.

- flex 에 대하여 참고 링크: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

index-START.html

 

	참고 링크: https://goo.gl/QcRIEX   1) :before, :after - 특정한 것의 앞과 뒤에 이것을 적용한다는 것. - 그런데 * 모든 것이라니 무슨 의미인지 헷갈린다.   2) inherit: 부모의 값을 상속받는다.
	Selector 참고링크: https://goo.gl/aYHKVb   .panel > * .panel 의 직계 자식인 "모든" element 를 선택   .panel p .panel 의 자식인 p element 를 선택   nth-child 참고 링크: https://www.codingfactory.net/10781   .panel p:nth-child(2) .panel 의 자식중에서 p 태그 중에서  2번째 p 태그에 대해서 적용   .panel.open .panel 의 .open 의 경우에 적용

 

FINISHED.html

 

	참고링크: https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/   display: flex; -  수평 레이아웃   flex: 1; - 균등 분배   justify-content: center; - 가운데로 모아줌   flex-direction:column; - 수직 레이아웃
	.panel > *:first-child .panel > *last-child - 첫번째 자식은 위로 사라져 있게 해두고 (-100%) - 마지막 자식은 아래로 사라져 있게 해둔다. (100%)   .panel > *:first-child .panel > *last-child - 둘 다 원위치로 돌아오게 한다. = 화면으로 등장하는 효과 (0%)
	only screen 은 - 프린터나 화면 낭독기 같은 거 말고, - 컴퓨터 스크린, 테블릿, 스마트폰 같은 기기에서만 이라는 이야기   max-width: 600px 은 - 600px 이하인 스크린일때는 아래의 스타일을 따르라는 것. - 원래 p 태그의 경우는 2em 이었는데 1em 으로 변경한 것 (화면 작으면, 작은 사이즈 폰트로 바꿔라)

 

Script 를 보자

 

1) .panel  클래스를 쓰는 모든 녀석을 가져와 panels 라는 NodeList 에 넣어라   2) panels 아래의 모든 녀석들에게 addEventListener 를 달아줘라 - 여기서 아래의 모든 녀석이란 결국 panel 클래스 인 div 들이다. - 'click' 이벤트시에는 toggleOpen() 실행 - 'transitionend' 이벤트시에는 toggleActive 실행   3-1) toggleOpen() - 'click' 시에 실행된다 - open 이라는 클래스를 toggle 해준다.  - 즉, 한번 click 하면 open 클래스 반영, 또 한번 클릭하면 제거   3-2) toggleActive() - 'click' 을 하면 이전 클래스에서 open 클래스로 transition 이 일어나고 - transitionend 되면 open-active 클래스가 반영된다.

 

동작 프로세스를 따라가 보자

 

대기 상태

 

div 가장 바깥쪽은 class 'panels' 이다.

- overflow: hidden; 박스넘어 사라져 있다가 나타나는 효과를 위해 설정한 듯 하다.

- display: flex; 를 기억하자. default 는 raw 이므로 5개의 panel 은 옆으로 정렬될 것이다.

 

그다음 내부 5개의 div 의 class 는 'panel' 이다. 'panel1' 부터 'panel5' 는 이미지를 넣어주게 된다.

- transition 효과는 font-size, flex, backgroud 에 대하여 걸려있으며

- font-size 는 20px 이다.

- flex: 1; 이고 flex-direction: column; 이므로  내부의 세 글자는 (= p 태그 3개) 세로로 균등하게 자리 잡아야 한다.

 

.panel > * 를 통해 .panel 의 바로 아래 자식인 p 태그에 대해 속성을 부여한다.

- flex: 1 0 auto; 는 flex-grow, flex-shrink, flex-basis 설정

 

.panel > *:first-child { transform: translateY(-100%);}

.panel > *:last-child { transform: translateY(100%);}

- .panel 의 첫번째와 마지막 자식의 세로 방향 위치를 변경시켜준다.

- 즉, 화면에서 사라지게 해둔다.

 

.panel p

- 전부 대문자로 만들어주고

- 폰트를 뭘로 쓸지 선택해주고, 그림자 효과도 넣어준다.

- font-size: 2em; 으로 해두었으니 상위 요소인 .panel 의 font-size 인 20px 의 두배 = 40px 로 해두겠다는 것

 

.panel p:nth-child(2)

- 2번째 p 태그의 경우는 font-size 를 4em = 80 px 로 해두겠다는 것

 

@media only screen and (max-width: 600px)

- 스크린 기기이고 폭이 600 px 이하인 경우는 font-size 를 1em 으로 통일

- 우선순위는 잘 모르겠지만 이게 좀더 우선순위가 높겠다 싶다.

 

 

'click' 이벤트

 

toggleOpen() 이 5개의 panel 에게 먹힌다.

결국은 class 'open' 을 먹이라는 것이다.

 

flex: 5;  이것은 flex grow 를 5로 먹이겠다는 것. 1이면 형제들과 균등, 2면 형제들의 두 배,  5면 5배가 되겠다. - 즉, 1이었다면 모두 20% 씩 공간을 차지했다면 - 2 라면 2/6 만큼을 클릭한 panel 이 차지하고 다른 패널은 1/6 만큼씩 차지 - 5 이므로 5/9 만큼을 클릭한 panel 이 차지하고 다른 패널은 1/9 만큼씩 차지 → flex 의 영향으로 background 도 transition 이 이루어진다. (그려야 할 부분이 늘어나서인듯 font-size: 40px; 폰트 기본 사이즈가 커짐

 

'transitionend' 이벤트

 

위의 transition 이 끝나면 'transitionend' 이벤트가 발생하고

toggleActive(e) 함수가 5개의 panel 에 먹힌다.

 

이때 여러 transitionend 중에서 하나만 챙겨도 되므로 if 문을 통해 'flex' 만 체크하여 동작을 수행한다.

이번에는 class 'open-active' 를 먹이며, 결국 위와 아래에 감춰뒀던 글자가 애니메이션과 함께 들어오라는 것이다.

 

.panel.open-active > *:first-child { transform: translateY(0);} .panel.open-active > *:last-child { transform: translateY(0);}

 

'click' 이벤트

 

또 한 번 'click' 하면 class 'open' 먹인게 사라질 것이고 (= toggle)

 

'transitionend' 이벤트

 

'transitionend' 를 통해 'open-active' 먹인것도 사라질 것이다. (= toggle)