1. 스크롤링
<! DOCTYPE html>
<html>
<head>
<title>Parel SandBox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<h1>스무스한 스크롤링</h1>
<a href="#one>1번</a>
<a href="#two>2번</a>
<a href="#three>3번</a>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
</body>
</html>
2. 가운데 정렬
margin : 0 auto; 가 일반적이지만 넓이값을 모른다면 flex로 가능하다.
body {
background: blue;
display: flex;
justify-content: center; // 가운데 정렬 가능
}
.txt {
display: inline-block;
background: pink;
}
flex를 사용할 수 없는 환경이라면
body {
background: blue;
position: relative;
}
.txt {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: inline-block;
background: pink;
}
translate 속성이 자동으로 컨텐츠의 넓이를 인식해서 그 값의 50%만 땡겨준다.
3. 애니메이션 효과
display 효과는 애니메이션으로 제어할 수 없다.
@keyframes fadeout {
100% {
display: none; // 효과 적용 안된다.
opacity: 0; //이것도 버튼은 투명하게 사라졌지만 커서는 그대로 남아있음
pointer-events: none; // 이거를 주면 사라진다
}
}
위에 코드 단점은 밑에 있는 요소는 사라진 (버튼) 요소의 위치를 차지해야하지만 밑에 있다.
.btn {
width: 100px;
height: 100px;
background: pink;
cursor: pointer;
animation: fadeout 3s forwards;
}
완벽하게 사라지게 하는 방법은 자바스크립트를 이용해야한다.
const btn = document.querySelector(".btn");
btn.addEventListener("animationend", (e) => {
e.target.style.display = "none";
});
버튼의 애니메이션이 끝나면 해당 디스플레이를 지운다.
