간단한 웹배너 만드는 방법

간단한 웹 배너 만드는 방법

<p style="position:fixed;top:0;left:0;right:0;z-index:65000;margin:0;font-size:14px;line-height:21px;padding:20px 70px;color:#fff;background-color:rgba(0,0,0,0.7);text-align:center;font-family: Noto Sans DemiLight,AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;-webkit-font-smoothing: antialiased">
쉽고 간단하게 웹 배너로 활용할 수 있는 요소입니다. 닫기 버튼이 지원됩니다.
<button type="button" style="position:absolute;top:14px;right:20px;padding:10px;background:transparent;border:0;" onclick="this.parentNode.style.display='none'"><span style="display:block;font-size:0;line-height:0;text-indent: -9999px;background-image: url('https://t1.daumcdn.net/tistory_admin/static/top/pc/img_top.png');background-size: 200px 200px;width:12px;height:12px;background-position:-140px -60px">닫기</span></button></p>

HTML으로 적용하고, 별도의 노드 클릭 이벤트로 닫을 수 있습니다. 클래스를 지정해서 스타일을 적용한다면 더 멋진 웹 배너로 활용할 수 있을 것입니다.