Javascript30. 05 - Flex Panel Gallery
2020-01-07
Javascript30
정리: Javascript30을 공부한 내용 기록
05 - Flex Panel Gallery
목표
요구사항
- 이미지를 클릭하면 글씨가 등장하고 이미지가 커진다.
- 다시 이미지를 클릭하면 원본으로 돌아간다.
필요기술
- CSS
- 자바스크립트
배운 것
CSS
transform
transform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
.panel > *:first-child {
transform: translateY(-100%);
}
.panel.open-active > *:first-child {
transform: translateY(0);
}
.panel > *:last-child {
transform: translateY(100%);
}
.panel.open-active > *:last-child {
transform: translateY(0);
}Javascript
속성 접근자
속성 접근자는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해준다.
const toggleActive = (value) => (panel) => {
value.propertyName.includes('flex') && panel.classList.toggle('open-active');
};👋
