728x90
20220823(화)
- 목차
- VIEW
- WinMerge
- Opacity
- Translate
< VIEW >
- 빨간 상자 : VIEW (스크롤 바, 상단 프레임 미포함된 정보만을 보여주는 이 부분)
- 스크롤 바, 상단 프레임 부분 : FRAME
- VIEW + FRAME = WINDOW
- VIEW의 높이 : window.innerHeight
< WinMerge - 코드비교 프로그램>
- WinMerge 다운로드 링크
https://winmerge.org/downloads/?lang=en
1) 실행 화면 ➡ 파일 열기 후 비교할 파일과 기존 파일 2개를 각각 선택한다.
2) 노란색으로 표시된 부분이 다른 부분이다. 상단 화살표를 눌러 덮어쓸 수도 있다.
< Opacity : 투명도 >
- 요소의 투명도를 설정
- 연습문제
- 각각의 버튼을 누르면 자연스럽게 fade-out / in이 되도록 코드를 짜보자.
<h1>Hello World</h1>
<button>Fade-out</button>
<button>Fade-in</button>
<script>
// event handler 만들기
const h1Elem = document.querySelector('h1');
const btnFade = document.querySelectorAll('button');
let opacityValue = 0;
let itvID;
let isRunning = false;
btnFade[0].addEventListener('click', ()=> {
if (isRunning === true)
{
console.log("return!!!!");
return;
}
opacityValue = 1;
// setinterval 도는 동안 isrunning이 true 가 된다.
itvID = setInterval(()=>{
isRunning = true;
h1Elem.style.opacity = opacityValue;
opacityValue = opacityValue - 0.05;
if (opacityValue <= 0)
{
clearInterval(itvID);
h1Elem.style.opacity = 0;
isRunning = false;
}
}, 50);
});
btnFade[1].addEventListener('click', ()=> {
if (isRunning === true)
{
console.log("return!!!!");
return;
}
opacityValue = 0;
itvID = setInterval(()=>{
isRunning = true;
h1Elem.style.opacity = opacityValue;
opacityValue = opacityValue + 0.05;
if (opacityValue >= 1)
{
clearInterval(itvID);
h1Elem.style.opacity = 1;
isRunning = false;
}
}, 50);
});
</script>
< Translate : 위치 이동 >
- transform : 요소를 이동, 회전, 크기 조정 및 기울일 수 있다.
- translate (현재 위치에서 요소를 이동한다.)
transform : translate(50px, 100px); ➡ 요소를 현재 위치에서 오른쪽으로 50px, 아래로 100px 이동 - 연습문제
- 각각의 버튼을 누르면 글자가 자연스럽게 위/아래로 40%만큼 움직이는 코딩을 해보자.
<style>
h1{
position: relative;
top: 80px;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<br><br><br><br>
<button>Y-up 40%</button>
<button>Y-down 40%</button>
<script>
const h1Element = document.querySelector('h1');
const btnTranslate = document.querySelectorAll('button');
let yValue = 0;
let intervalID;
btnTranslate[0].addEventListener('click', ()=>{
yValue = 0;
intervalID = setInterval(()=>{
h1Element.style.transform = `translateY(${yValue}%)`;
yValue = yValue - 2;
if (yValue <= -40)
{
clearInterval(intervalID);
h1Element.style.transform = `translateY(0%)`;
console.log("clear-interval");
}
}, 30);
});
btnTranslate[1].addEventListener('click', ()=>{
console.log("down");
yValue = 0;
intervalID = setInterval(()=>{
h1Element.style.transform = `translateY(${yValue}%)`;
yValue = yValue + 2;
if (yValue >= 40)
{
clearInterval(intervalID);
h1Element.style.transform = `translateY(0%)`;
console.log("clear-interval");
}
}, 30);
});
</script>
< Opacity + Translate 동시 구현 >
- 연습문제
- Animate 버튼을 누르면 글자가 1) 흐려지면서 진하게 생기고 2) 아래에서 위로 올라오는 코딩을 짜보자. - 두개 이상의 스타일 값을 동시에 적용할 때
- 한개의 값을 기준으로 다른 값을 맞춰서 적용
(opacity 적용, opacity를 기준으로 translateY을 적용)
<body>
<br>
<br>
<h1>Hello World</h1>
<br>
<br>
<br>
<button>Animate</button>
</body>
<script>
const h1Elem = document.querySelector('h1');
const btnAni = document.querySelector('button');
let intervalID;
let opacityValue = 0;
let yValue = 0;
let isRunning = false;
const clickProc = function()
{
if (isRunning === true)
return;
isRunning = true;
opacityValue = 0;
intervalID = setInterval(()=>{
// 1. opacity (0 --> 1)
h1Elem.style.opacity = opacityValue;
// 값계산
yValue = opacityValue * -30
opacityValue = opacityValue + 0.05;
// 2. translateY (0 --> -30 )
h1Elem.style.transform = `translateY(${yValue}%)`;
if (opacityValue >= 1)
{
h1Elem.style.opacity = 1;
h1Elem.style.transform = 'translateY(-30%)';
clearInterval(intervalID);
isRunning = false;
}
}, 50);
}
btnAni.addEventListener('click', clickProc);
</script>
728x90