📌 학습한 내용
전체 코드 : 💾
Snackbar
: show 버튼 클릭 시, 아래쪽에 alert 창(부분적인 팝업)을 띄워준 뒤 일정 시간 후에 사라짐.
animation 사용
animation-fill-mode: forwards;: 애니메이션 동작이 종료된 후, 마지막 to 상태를 유지
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards; /* 입력된 순서대로 동작 */
}
@Keyframes fadeIn {
from { bottom: 0; opacity: 0; }
to { bottom: 30px; /* 원래 있던 위치 */
opacity: 1;
}
}
@Keyframes fadeOut {
from { bottom: 30px; opacity: 1; }
to { bottom: 0; opacity: 0; }
}show 클래스 추가/삭제 구현
-
setTimeout(function() {}, timer): timer가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정 -
show 버튼을 누르면 팝업창을 띄우고, 사라지게 하는 이벤트를 js에서 작성 후, html에
onclick의 속성값으로 넣어줌 -
onclick: html 마우스 클릭 이벤트 속성, 속성값으로 전달 받은 함수는 '호출 기호()'를 붙인 상태(호출된 상태)로 입력해 줘야 함 (모든 html태그에 사용 가능)
<button type="button" onclick="snackBarFunc()">Show</button>function snackBarFunc() {
var snackbar = document.querySelector('#snackbar');
snackbar.classList.add('show');
setTimeout(function() {
snackbar.classList.remove('show');
}, 3500) // 전체 애메이션이 발동하는 시간
}Accordion
: 클릭 시 펼쳐지는 기능 (QnA 페이지에서 주로 사용)
초기 화면 설정
max-height의 속성값으로 0을 입력해 초기 화면에서 보이지 않도록 함
.panel {
overflow: hidden;
width: 67.45%;
margin: 0 auto;
padding: 0 18px;
color: #000000;
max-height: 0;
transition: max-height 0.2s linear;
}max-height 속성을 추가/제거
-
toggle()메서드로 active 클래스가 존재하지 않을 시 삽입, 존재할 시 제거 -
.nextElementSibling: 선택한 태그 바로 다음에 있는 형제 태그를 반환 (다음다음을 원하면nextElementSibling을 이어서 써주면 된다) -
.scrollHeight: 스크롤바를 움직이지 않는 해당 요소의 높이값 반환
var btns = document.querySelectorAll('.accordion');
// accordian 클래스 명을 가진 모든 html 태그를 유사 배열 형식으로 반환
btns.forEach(function(btn) {
btn.addEventListener('click', function() {
// console.log(this); -> btn객체 자체
this.classList.toggle('active');
var panel = this.nextElementSibling;
console.log(panel.scrollHeight);
// maxHeight 존재 여부로 분기 처리
if(panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
// maxHeight = 0 일 경우
panel.style.maxHeight = panel.scrollHeight + "px";
}
})
})Slide
: 하나의 이미지 영역에 서로다른 이미지가 교체가 되면서 fade out- fade in으로 나타내는 기능
animation 사용
transition-timing-function: 전환(transition) 효과의 시간당 속도를 설정transition-timing-function: ease-in-out;: 전환(transition) 효과가 천천히 시작되어, 천천히 끝난다.
(참고 사이트 : http://tcpschool.com/css/css3_transform_transition)
#slider .item {
overflow: hidden;
position: absolute;
width: 100%;
height: 500px;
top: 0;
left: 0;
opacity: 0;
transition: all 0.5s ease-in-out;
transform: scale(0.9);
z-index: 0;
}
#slider .item.show {
opacity: 1;
z-index: 10;
transform: scale(1);
}show 클래스 추가/삭제
-
css에서 적용하는 방식 그대로
querySelector()에서 가상 선택자 적용 가능 -
setInterval(function() {}, time): 두 번째 인수로 받은 시간이 될 때마다, 첫 번째 인수로 전달한 함수 호출
1. 첫 번째 슬라이드
var firstSlide = document.querySelector('.item:first-child');2. 슬라이드 이벤트
function slide() {
// show 클래스가 들어가 있는 슬라이드(현재 보여지는 슬라이드)
var currentSlide = document.querySelector('show');
// 현재 show의 유무에 따라 분기 처리
if(currentSlide) {
currentSlide.classList.remove('show');
var nextSlide = currentSlide.nextElementSibling;
// 다음 슬라이드의 유무에 따라 분기 처리
if(nextSlide) {
nextSlide.classList.add('show');
} else {
// 다음 슬라이드가 없을 시, 처음 슬라이드로 돌아감
firstSlide.classList.add('show');
}
} else {
// 현재 show를 가진 슬라이드가 없을 시, 첫 번째 슬라이드로 이동
firstSlide.classList.add('show');
}
}3. 자동화 트리거
setInterval(function() {}, time): 두 번째 인자로 넣은 시간마다 함수를 실행
ㅊㅇ
slide(); // 앞서 만든 slide 함수 최초 호출
setInterval(slide, 2000);📌 학습내용 중 어려웠던 점
setTimeout()과setInterval()의 차이가 모호
📌 해결방법
- 여러 블로그를 통해 정리해 보았다. 둘 다 주기적인 실행을 위한 메서드이다.
-
setInterval()
일정한 시간을 간격으로 코드를 반복 실행 -
setTimeout()
일정한 시간 후에 작업을 딱 한 번만 실행해준다. 일정한 시간을 기다린 후 작업이 실행되고, 또 다시 일정한 시간을 기다린 후 작업이 실행되는 형식 -
둘 다 set 대신 clear을 더하면 중지할 수 있음 (실행하고 있는 것을 중지하는 것이 아닌 해당 함수의 실행자체가 되지 않는 것)
(참고 사이트 : https://blog.naver.com/kiera_j/222295866883)
📌 학습소감
실습을 하는 동안 css와 html로 간단한 작업도 포함되어 있었는데, animation 속성을 잠시 잊고 있어서 이렇게도 활용이 될 수 있구나 새삼 배웠다. 요 며칠간 계속 js에만 신경썼더니 앞쪽 부분에 대해 살짝씩 잊어가는 부분이 있어서, 복습을 돌려야겠다. 😂
