언어/JavaScript
[javascript30] 05-flex panel gallery
홍시_코딩기록
2023. 6. 22. 21:55
<div class="panels">
<div class="panel panel1">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</div>
<div class="panel panel2">
<p>Give</p>
<p>Take</p>
<p>Receive</p>
</div>
<div class="panel panel3">
<p>Experience</p>
<p>It</p>
<p>Today</p>
</div>
<div class="panel panel4">
<p>Give</p>
<p>All</p>
<p>You can</p>
</div>
<div class="panel panel5">
<p>Life</p>
<p>In</p>
<p>Motion</p>
</div>
</div>
//css
css는 기존에 있던 거에 flex로 배열을 맞춰주었다.
.panel p:nth-child(1) {transform: translateY(-100%);}
.panel p:nth-child(3) {transform: translateY(100%);}
.panel.open { flex: 5; font-size: 40px;}
.panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);}글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를 주었더니 클릭이벤트시 선택한 레이아웃의 크기가 알아서 조절됨
const panel = document.querySelectorAll('.panel');
function panelClickHandler() {
this.classList.toggle('open');
}
panel.forEach(panel => {
panel.addEventListener('click', panelClickHandler);
});
처음엔 화살표 함수로 써서 안됐었다.
화살표 함수를 써서 this를 쓰려니 window가 선택되어 찾아보니 this를 쓰려면 function을 써야한다고 해서 바꿨다.