출처: Online Tutorials https://youtu.be/Zrxf0RdcDtA
아무생각 없이 유튜브 보다가 재미난걸 발견했다.
엄청 대단한건 아니지만.. 그냥 뭔가 웃겼다.. 이런건 따라해 줘야지.
소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing DVD Logo Animation Effects</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: #000;
}
marquee {
height: 100vh;
}
</style>
</head>
<body>
<marquee behavior="alternate" scrollamount="30">
<marquee behavior="alternate" scrollamount="30" direction="down">
<img src="./img/dvd_logo.png" alt="DVD">
</marquee>
</marquee>
</body>
</html>
구현결과
그렇게 어렵지 않게 옛날 윈도우95 시절의 화면보호기 같은 감성을 구현했다.
html은 단 몇줄의 코드였지만, 이번에 따라하면서 처음 알게된 태그가 있다.
바로 <marquee> 라는 태그인데, 찾아보니 태그 하나로 텍스트를 상하좌우로 움직이게 해주는 태그이다.
이 태그를 잘 사용하면 간단한 방법으로도 페이지에 효과를 줄 수 있을 것으로 생각된다.
'ETC > 무작정따라하기' 카테고리의 다른 글
| [HTML, CSS, JS] Responsive Navigation Menu 따라하기 (0) | 2022.10.05 |
|---|---|
| [HTML, CSS, JS] Password validation check, show toggle 따라하기 (1) | 2022.09.29 |
| [HTML, CSS, JS] 애플 홈페이지 따라하기 (0) | 2022.06.03 |
| [HTML, CSS, JS] mousemove 이벤트 따라하기 (0) | 2022.05.17 |
| [HTML, CSS] Animation & Hover Effect 따라하기 (0) | 2022.05.16 |