코드를 입력하세요
```UI 애니메이션 만드는 법
fade 애니메이션은 이렇게 만들어요~
slide 애니메이션은 이렇게 만들어요~
이렇게 가르치면 100강도 모자라서 평생 강의듣다가 인생끝나니까
UI 애니메이션 만드는 법을 알려드리도록 하겠습니다.
실은 자바스크립트말고 css 잘하면 됩니다.
[ one-way 일방향 애니메이션 만드는 법 ]
1. 시작스타일 만들고 (class로)
2. 최종스타일 만들고 (class로)
3. 원할 때 최종스타일로 변하라고 JS 코드짭니다
4. 시작스타일에 transition 추가
A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다.
그럼 모달창 fade-in 애니메이션을 만들어봅시다.
1. 시작스타일 2. 최종스타일을 class로 만들어봅시다.
애니메이션 동작 전 스타일과 동작 후 스타일을 class로 각각 만들어두라는 소리입니다.
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
}
.show-modal {
visibility : visible;
opacity : 1;
}
기존에 있던 display 어쩌구는 다 버리고 이렇게 코드짰습니다.
- display : none을 주면 애니메이션이 잘 동작하지 않기 때문에
그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했습니다.
- opacity는 투명도 조절할 수 있는 속성입니다.
0이면 투명 1이면 불투명 0.5면 반투명임
3. 원할 때 최종스타일로 변하라고 자바스크립트 코드짬
이건 아까 했습니다.
로그인버튼 누르면 알아서 show-modal 부착되고 그럼 최종스타일로 변하는군요
4. 시작스타일에 transition 추가
.black-bg {
(생략)
visibility : hidden;
opacity : 0;
transition : all 1s;
}
.show-modal {
visibility : visible;
opacity : 1;
}
transition은 스타일이 변할 때 천천히 변경하라는 뜻입니다.
지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해줍니다.
애니메이션 구현 끝
Q. 그럼 모달창이 위에서 밑으로 내려오는 애니메이션은 어떻게 만들까요?
Q. 서브메뉴가 접혔다 펴지는 애니메이션은 어떻게 만들까요?
심심하면 집에서 해봅시다. 저거 4-step 따라하면 됩니다.
이건 자바스크립트보다는 css 실력에 달린 것이라 css 잘 모르면 못하는게 당연합니다.
예를 들면 서브메뉴 이렇게 접히는건
서브메뉴의 height를 0px 에서 400px 로 조절하면 되는데
overflow : hidden 이런것도 있으면 될듯 합니다.
# input 이벤트와 change 이벤트
<input> 태그에서 발생하는 이벤트들이 있습니다.
input이벤트와 change 이벤트인데 <input> 안에 뭔가 입력할 때 발생합니다.
진짜인지 확인하려면 <input> 하나 찾아서 이벤트리스너 장착해봅시다.
document.getElementById('email').addEventListener('input', function(){
console.log('안녕')
});
▲ <input>에 입력된 값이 변경될 때 input 이벤트가 발생합니다.
<input>에 뭐 입력해보십시오 그 때마다 콘솔창에 안녕이 출력되는군요.
document.getElementById('email').addEventListener('change', function(){
console.log('안녕')
});
▲ <input>에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생합니다.
<input>에 뭐 입력하고 커서를 다른데 찍어보십시오. 안녕이 출력됩니다.
그래서 <input> 값이 변경되었을 때 뭔가 코드를 실행하고 싶으면
input, change 이벤트리스너를 활용해보면 되겠습니다.
true/false 자료
실은 if 조건문 자리에는 == 등호 이런게 아니라 true, false를 넣어야 잘 작동합니다.
if (true){
console.log('진짜임')
}
진짜로 true 넣으면 if문이 실행 잘됩니다.
true는 참, false는 거짓을 뜻하는 자료형입니다.
멋진 개발자말로 boolean 타입이라고 부릅니다.
Q. 그럼 1 == 1 이런거 넣어도 if문 잘 작동하는 이유는 뭐임?
A. 1 == 1 쓰면 그 자리에 true 아니면 false 가 자동으로 남아서 그렇습니다.
콘솔창에 1 == 1 출력해보셈
Q. 타입이 뭐임
자료가 무슨 형식을 가지고 있는지 구분하기 위한 용어입니다.
123은 숫자타입 '123'은 문자타입 true는 boolean타입 이렇게 부르고
포켓몬으로 비유하면 불타입 비행타입 그런거랑 비슷합니다.
다른지 같은지 비교하고 싶으면
console.log(2 != 1)
다름을 비교하고 싶으면 != 쓰면 됩니다.
위 코드는 그래서 true가 콘솔창에 출력됩니다.
console.log(2 == '2') //true 나옴
console.log(2 === '2') //false 나옴
같다고 비교하려면 == 쓰면 된다고 했는데 실은 === 이것도 있음
== 이건 느슨한 비교
=== 이건 엄격한 비교입니다.
== 느슨한 비교는 자료의 타입변환을 지가 알아서 해보고 동일하면 true라고 판정해줍니다.
=== 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정해줍니다.
실은 if문 안에서 true, false 역할을 하는 자료들도 있음
0
''
null
undefined
NaN
이런 것들은 if문 소괄호 안에서 false랑 같은 역할을 합니다.
0제외 모든 숫자
'아무문자'
[]
{}
이런 것들은 if문 소괄호 안에서 true랑 같은 역할을 합니다.
첨보는 것들은 지금은 몰라도 됩니다.
코린이