배너는 기업입장에서는 좋은데 사용자(고객)한테는 시야를 가려서 여간 불편합니다.
양쪽 모두 충족하기 위해서는 자동으로 배너가 사라지는게 좋겠죠.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>3초 뒤 배너 자동 닫힘</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="dev_banner" class="banner is-active">
<img src="https://image.freepik.com/free-vector/attractive-golden-background-with-bokeh-light-effect_1017-28744.jpg" alt=""/>
</div>
</body>
</html>
css
.banner {
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
width: 100%;
height: 0;
background: yellow;
transition: all 0.5s;
}
.banner > img {width:100%;}
.is-active {
height: 100px;
}
javascript
function dev_bannerClose() {
var $tgtbanner = $('#dev_banner');
// alert('test');
$tgtbanner.removeClass('is-active');
}
var interval = setInterval(dev_bannerClose, 3000);
setTimeout(function(){
clearInterval(interval);
}, 5000);728x90
'프로그램 강좌' 카테고리의 다른 글
| [javascript]split 사용방법(나눌때) (0) | 2021.03.22 |
|---|---|
| [javascript]정규표현식 Regexr.com (0) | 2021.03.16 |
| [react.js]CRA v4에서 절대경로 설정하기 (0) | 2021.03.03 |
| [javascript]배열 걸러낼때 filter (0) | 2021.03.02 |
| [javascript]Math.floor, ceil, round(내림, 올림, 반올림) (0) | 2021.03.01 |
