유저자료실

  • 유저자료실 포인트 정책
      글쓰기
      10P
      댓글
      5P
  • 전체 1건 / 1 페이지
      이미지가 없습니다.
  • PWA 팝업 스킨 제작 가이드
  • 4일 전　 PWA 팝업 스킨
  • 본 가이드는 추후 업데이트 될 0.0.5 버전에서 적용할 수 있습니다.기본 구조스킨은 두 개의 파일로 구성됩니다:popup.html - 팝업 구조popup.css - 디자인 스타일폴더 생성popup/내스킨이름/├── popup.html└── popup.cssHTML 파일 작성popup.html에 다음과 내용을 작성하세요:<div class="pwa-install-popup">    <div class="pwa-popup-content">        <button class="pwa-close-btn">{{closeIcon}}</button>                <h2 class="pwa-popup-title">{{title}}</h2>        <p class="pwa-popup-description">{{description}}</p>                <button class="pwa-install-btn">{{installButtonText}}</button>        <button class="pwa-later-btn">{{laterButtonText}}</button>    </div></div>필수 클래스반드시 포함해야 하는 클래스들:pwa-install-popup - 메인 컨테이너pwa-close-btn - 닫기 버튼pwa-install-btn - 설치 버튼pwa-later-btn - 나중에 버튼기본 CSS 작성popup.css에 최소한 이런 스타일이 필요합니다:css.pwa-install-popup {    position: fixed;    display: none;    z-index: 99999;}.pwa-install-popup.show {    display: block !important;}.pwa-close-btn,.pwa-install-btn,.pwa-later-btn {    cursor: pointer;    border: none;}모바일 대응css@media (max-width: 480px) {    .pwa-popup-content {        width: 100%;        padding: 20px;    }}스킨 적용하기JavaScript에서 스킨을 적용하려면:javascriptawait changePWAPopupSkin('내스킨이름');주의사항클래스 이름을 정확히 지켜주세요z-index는 99999 이상으로 설정모바일에서도 잘 보이도록 테스트다크모드를 고려하면 더 좋습니다간단한 예제하단 고정 스타일:css.pwa-install-popup {    position: fixed;    bottom: 0;    left: 0;    width: 100%;    background: white;    padding: 20px;    border-top: 1px solid #ddd;    display: none;    z-index: 99999;}.pwa-install-popup.show {    display: flex !important;    align-items: center;    justify-content: space-between;}.pwa-install-btn {    background: #007AFF;    color: white;    padding: 10px 20px;    border-radius: 5px;}.pwa-later-btn {    background: transparent;    color: #666;    padding: 10px 20px;}.pwa-close-btn {    background: none;    font-size: 20px;    color: #999;}
    • 최고관리자
    • 13

검색

게시물 검색