현재 위치
  1. 게시판
  2. 배너플러스 V1

배너플러스 V1

배너플러스

배너플러스 V1

배너플러스 V1

게시판 상세
제목 기본 권장구조 2 (배너 모듈 텍스트 깜빡임 현상 방지)
작성자 (ip:)
  • 평점 0점  
  • 작성일 2023-08-12
  • 추천 추천하기
  • 조회수 154





해당앱의 기본마크업을 보시면 js-hide 라는 속성이 있습니다


1
2
3
4
<div js-banner-module="" js-hide>
    <div js-banner><a href="{$js-href}" target="{$js-target}">{$js-banner}</a></div>
    <div js-banner><a href="{$js-href}" target="{$js-target}">{$js-banner}</a></div>
</div>



js-hide 라는 속성은 배너앱의 로드 후 자동으로 사라지는 속성입니다.

이 속성을 활용하여 배너앱의 모듈텍스트가 깜빡이는 현상을 없애거나 줄일 수 있습니다.








방법


<head> 안에 아래의 CSS를 넣어주시면 됩니다



1
2
3
  <style>
    [js-banner-module][js-hide]{opacity:0;}
  </style>


* 꼭 head안에 넣으실 필요는 없지만 가급적 도큐먼트의 상단에 넣어주는것이 좋습니다









적용 후



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
 
  <style>
    [js-banner-module][js-hide]{opacity:0;}
  </style>
 
</head>
<body>
 
 <header>헤더내용</header>
 
 
    
 <div id="container">
  <div id="contents">
 
 
   <div js-banner-module="" js-hide>
    <div js-banner><a href="{$js-href}" target="{$js-target}">{$js-banner}</a></div>
    <div js-banner><a href="{$js-href}" target="{$js-target}">{$js-banner}</a></div>
   </div>
 
                 
  </div><!-- contents -->
 </div><!-- container -->
 
 
 
 
 
 <footer>푸터내용</footer>
 
 
 
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/web/upload/appfiles/16eoClzwfkWuGVocGefqFp/1ca0407c9a24c3f~~~~~~~~~~~.js"></script>
</body>
</html>

첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

회원에게만 댓글 작성 권한이 있습니다.

WORLD SHIPPING

PLEASE SELECT THE DESTINATION COUNTRY AND LANGUAGE :

GO
close