당신만의 모바일 초대장, 초청장 -인바이트미- > 고객센터 > 테크게시판 https://inviteme.kr/tech 테스트 버전 0.2 (2004-04-26) ko 메뉴 클릭시(action) 액션 인식으로 음악 자동 재생 하기 https://inviteme.kr/tech 메뉴 클릭시(action) 액션 인식으로 음악 자동 재생 하기


조건


1. 자동 재생 중이면 계속 자동 재생
2. 재생중이 아닐 경우 메뉴 클릭 시 음악 재생

3. 사용자가 음악 OFF 시에는 메뉴 클릭 해도 음악 재생 안 함
 

<?php include_once('header.php'); ?>

<body>

<button onclick="PlayStop()" type="button" id="musicb">Music On/Off</button>

<audio id="audioID" autoplay loop>

<source src="music.mp3?ver=<?php echo $today; ?>" type="audio/mp3">

</audio>

<script>

var myaudio = document.getElementById("audioID");

var userStopped = false;


function PlayStop() {

if (!myaudio.paused) {

myaudio.pause();

userStopped = true;

} else {

myaudio.play();

userStopped = false;

}

}

function playOnLinkClick() {

if (myaudio.paused && !userStopped) {

myaudio.play();

}

}

</script>


<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide imagemap">

<img src="images/main.png?ver=<?php echo $today; ?>">

<a class="link01" href="menu01.php" target="_BLANK" onclick="playOnLinkClick()"></a>

<a class="link02" href="menu02.php" target="_BLANK" onclick="playOnLinkClick()"></a>

<a class="link03" href="menu03.php" target="_BLANK" onclick="playOnLinkClick()"></a>

<a class="link04" href="myseat.php" target="_BLANK" onclick="playOnLinkClick()"></a>

</div>

</div>

</div>

</body>

</html>


]]> 인바이트미 Thu, 13 Nov 2025 20:43:13 +0900 해시태그 복사 https://inviteme.kr/tech <div class="link01"></div>


<script>

  document.querySelector('.link01').addEventListener('click', function() {

    const hashtags = `#삼성오디세이 #odysseystation #samsungodyssey

#오디세이OLED #게이밍모니터 #삼성모니터 #삼성전자 #samsung #주말나들이 #팝업스토어

@samsungkorea`;


    // 복사 기능

    if (navigator.clipboard) {

      navigator.clipboard.writeText(hashtags).then(() => {

        alert('해시태그가 복사되었습니다!');

      }).catch(err => {

        alert('복사에 실패했습니다. 다시 시도해주세요.');

      });

    } else {

      // 구형 브라우저 대응

      const textarea = document.createElement('textarea');

      textarea.value = hashtags;

      document.body.appendChild(textarea);

      textarea.select();

      try {

        document.execCommand('copy');

        alert('해시태그가 복사되었습니다!');

      } catch (err) {

        alert('복사에 실패했습니다. 다시 시도해주세요.');

      }

      document.body.removeChild(textarea);

    }

  });

</script>


]]> 인바이트미 Tue, 11 Nov 2025 18:54:46 +0900 swiper slide 시 음악 재생 제어 https://inviteme.kr/tech swiper slide 시 음악 재생 제어
 

<button onclick="PlayStop()" type="button" id="musicb">Music On/Off</button>

<audio id="audioID" autoplay loop>

    <source src="music.mp3" type="audio/mp3">

</audio>



<script>

    var myaudio = document.getElementById("audioID");

    var userStopped = false; // 사용자가 수동으로 멈췄는지 여부


    function PlayStop() {

        if (myaudio.paused) {

            myaudio.play();

            userStopped = false; // 수동 재생 시 false로 설정

        } else {

            myaudio.pause();

            userStopped = true; // 수동 정지 시 true로 설정

        }

    }


    // Swiper 슬라이드 초기화 및 이벤트

    var swiper = new Swiper('.swiper-container', {

        mode: 'horizontal',

        autoHeight: true,

        navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

        },

        on: {

            slideChange: function () {

                window.scrollTo(0, 0);


                // 사용자가 멈추지 않았고 음악이 정지 상태라면 재생

                if (!userStopped && myaudio.paused) {

                    myaudio.play();

                }

            }

        }

    });

</script>

]]> 인바이트미 Wed, 09 Jul 2025 01:13:54 +0900 input, select, option 요소에 브라우저 기본 스타일 초가화 https://inviteme.kr/tech input, select, option {

padding: 0;

margin: 0;

border: none;

background: none;

font: inherit;

color: inherit;

box-sizing: border-box;

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

}


일부 모바일 브라우저나 iOS Safari에서는 select에 appearance: none을 적용하면 드롭다운이 작동하지 않게 될 수 있음 → 이럴 땐 select는 따로 관리하거나 디자인 커스텀을 다른 방식으로 접근하는 게 좋음.
]]> 인바이트미 Wed, 21 May 2025 11:25:24 +0900 swiper-slide 에서 이미지 lazy 적용 https://inviteme.kr/tech Swiper-slide에서 페이지는 여러개인데 각 페이지의 이미지 용량이 클 경우

아래와 같은 방식으로 lazy 적용을 해 주면 된다.


<div class="swiper-slide"> 

    <img class="swiper-lazy" data-src="images/01.png"> 

    <div class="swiper-lazy-preloader"></div> 

</div> 

<!-- 나머지 슬라이드도 동일하게 설정 -->


<script>

    var swiper = new Swiper('.swiper-container', {

        direction: 'horizontal',

        autoHeight: true,

        navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

        },

        lazy: {

            loadPrevNext: true, // 다음과 이전 슬라이드도 미리 로드할 수 있습니다.

        },

        preloadImages: false, // 미리 이미지를 모두 로드하지 않도록 설정

        watchSlidesVisibility: true // 슬라이드가 보일 때 이미지를 로드하도록 설정

    });

</script>

]]> 인바이트미 Wed, 25 Sep 2024 07:35:31 +0900 카카오맵 지도퍼가기 상호 명칭 바꾸는 방법 https://inviteme.kr/tech <!-- * 카카오맵 - 지도퍼가기 -->

<!-- 1. 지도 노드 -->

<div id="daumRoughmapContainer1711496278199" class="root_daum_roughmap root_daum_roughmap_landing" style="width:100%; margin:5% 0"></div>

<!--

2. 설치 스크립트

 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.

-->

<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<!-- 3. 실행 스크립트 -->

<script charset="UTF-8">

new daum.roughmap.Lander({

"timestamp" : "1711496278199",

"key" : "2ip6y",

"mapHeight" : "300"

}).render();

</script>


위와 같이 소스를 이용했다면 0.5초 후에 해당 클래스에 이름을 덮게 하면 된다.



<script>

setTimeout(function() {

// 클래스 이름으로 요소를 선택하고 내용 변경

const element = document.querySelector('.roughmap_lebel_text');

if (element) {

element.textContent = '수서역 5-1번 출구';

} else {

console.log('원하는 요소를 찾을 수 없습니다.');

}

}, 500); // 0.5초 후에 실행

  </script>

]]> 인바이트미 Wed, 27 Mar 2024 11:42:35 +0900 iOS 아이폰 아이패드에서 html 뒷 배경 영상이 재생 안 될 때 https://inviteme.kr/tech iOS 아이폰 아이패드에서 html 뒷 배경 영상이 재생 안 될 때


<video muted="" preload="metadata" webkit-playsinline="true" playsinline="true">


</video>



webkit-playsinline="true": iOS 기반의 웹 브라우저(예: Safari)에서 비디오를 인라인으로 재생하도록 지시합니다. 이 속성은 WebKit 엔진을 사용하는 브라우저에 대한 것입니다.

playsinline="true": 다른 브라우저(예: Chrome, Firefox)에서 비디오를 인라인으로 재생하도록 지시합니다.
]]> 인바이트미 Thu, 28 Dec 2023 14:20:59 +0900 그누보드5, 팝업을 사용자가 드래그 해서 이동할 수 있게 하는 방법. https://inviteme.kr/tech <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $(".hd_pops").draggable();

    });

</script>


이 소스를 bbs/newwin.in.php <!-- 팝업레이어 시작 { --> 바로 아래에 붙이기만 하면 된다.


0bf4bb35cbdf29b0a30025bec9411801_1699722416_4595.png
 

]]> 인바이트미 Sun, 12 Nov 2023 02:06:59 +0900 일정시간 간격으로 특정 DIV 새로고침 https://inviteme.kr/tech <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 


<div id="newrefresh"> 내용 </div>

<div id="newrefresh2"> 내용 </div> 


<script>

setInterval(function() {

$("#newrefresh").load(window.location.href + " #newrefresh");

}, 5000);

setInterval(function() {

$("#newrefresh2").load(window.location.href + " #newrefresh2");

}, 5000);

</script>



사용용도 : 실시간으로 바뀐 일정표 같은 것을 보여줄 때 소스에서 바꾸면 일반 사용자는 새로고침을 안 해도 볼 수 있게 하는것에 쓰였음....(급박할 때만 사용하시길)

편범사용 : node.js 지원하지 않는 호스팅에서 php로 채팅 구현시 한 적 있음. 

]]> 인바이트미 Sun, 12 Nov 2023 01:47:04 +0900 그누보드 admin 비밀번호 분실시 간단히 재설정 하는 소스 ( sha256 : 12000 방식) https://inviteme.kr/tech 1)  www/adminpswd.php 라고 파일 이름을 만들어 놓습니다.  (메인디렉토리, 파일이름은 자유)

 

2)  adminpswd.php 안에 코드 입력

 

<?php
    include_once('./_common.php');

    $mb_id = "admin"; // 변경하려는 사용자 ID
    $new_password = "your_password"; // 새 비밀번호

    // 그누보드에서 비밀번호는 get_encrypt_string 함수를 이용하여 암호화됩니다.
    // 이 함수는 내부적으로 SHA256을 이용합니다.
    $new_password_hashed = get_encrypt_string($new_password);

    $sql = "UPDATE {$g5['member_table']}
            SET mb_password = '".$new_password_hashed."'
            WHERE mb_id = '".$mb_id."' ";

    sql_query($sql);
?>

 

3) your_password에 바꾸고자 하는 암호를 넣습니다.

 

4) 도메인이 sample.com  이면 sample.com/adminpswd.php 실행.

 

5) 이제 바꾼 암호로 로그인이 됩니다.

]]> 인바이트미 Tue, 25 Jul 2023 10:54:37 +0900 특정 시간 이후로 페이지 사용 가능하게끔 간단한 레이어팝업 공지 올리는 Javascript https://inviteme.kr/tech 특정 시간 이후로 페이지 사용 가능하게끔 간단한 레이어팝업 공지 올리는 Javascript 


만약 HTML 내용이


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Time Limited Element</title>

</head>

<body>

  <div id="myDiv" style="position:relative;z-index:10000;background-color:rgba(0,0,0,.87);align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%">

    <div style="color:#fff;font-size:16px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">

      이벤트 페이지<br>준비중<br><br>

      (4월9일 오전 9시 오픈)

    </div>

  </div>

</body>

</html>


이렇게라면, javascript는


<script>

document.addEventListener('DOMContentLoaded', function() {

  const myDiv = document.getElementById('myDiv');


  // 현재 날짜와 시간을 가져옵니다.

  const now = new Date();

  

  // 2023년 4월 9일 오전 9시의 날짜와 시간을 설정합니다.

  // 월은 0부터 시작하기 때문에 4월은 3으로 표기합니다.

  const deadline = new Date(2023, 3, 9, 9, 0, 0);


  // 현재 시간이 마감 시간 이후라면 myDiv 요소를 숨깁니다.

  if (now >= deadline) {

    myDiv.style.display = 'none';

  }

});

</script>

]]> 인바이트미 Sun, 09 Apr 2023 21:44:30 +0900 갑자기 VMware에서 잘 쓰던 윈도우 10 블루스크린 뜨는 경우 https://inviteme.kr/tech 갑자기 VMware에서 잘 쓰던 윈도우 10 블루스크린 뜨는 경우, 복구를 하든 무엇을 하든 특별한 방법이 없다.


unsupported proccessor 라는 에러가 대부분일 것인데, 이런 경우 그냥 Vmware 17 pro로 설치하고 실행하면 된다.

]]> 인바이트미 Thu, 30 Mar 2023 11:23:46 +0900 다음 카카오 지도 API, 지도 이미지 혹은 맵타일 로딩 되다 말 때 https://inviteme.kr/tech 다음 카카오 지도 API, 지도 이미지 혹은 맵타일 로딩이 되다 말거나 공백으로 나오는 때가 있다.


<script charset="UTF-8">

   new daum.roughmap.Lander({

      "timestamp" : "1662428647397",

      "key" : "2bmjo",

      "mapHeight" : "260"

   }).render();

</script>


위 제공 스크립트에 시간차를 두어 실행하게 하면 된다.


예시)

<script charset="UTF-8">

setTimeout(function() {

new daum.roughmap.Lander({

"timestamp" : "1662428647397",

"key" : "2bmjo",

"mapHeight" : "260"

}).render();

window.dispatchEvent(new Event('resize'));

},3000);

</script>

]]> 인바이트미 Thu, 08 Sep 2022 04:40:26 +0900 HTML 웹 상에서 이미지 크기 줄이거나 늘릴 때 흐려지거나 깨지는 현상 해결 방법. https://inviteme.kr/tech css에 간단하게 하단 붉은색 스타일을 넣어주면 됩니다.


 img{

image-rendering: -webkit-optimize-contrast; 

transform: translateZ(0);

backface-visibility: hidden;

    }

]]> 인바이트미 Mon, 16 May 2022 19:33:34 +0900 그누보드에서 클립보드 이미지 복사 붙여넣기 가능하게 하는 방법 https://inviteme.kr/tech /lib/common.lib.php 파일을 열고


609번줄 정도에 보시면 

$config->set('Attr.AllowedFrameTargets', array('_blank'));


라고 있는데 그 아래에 하단 문법을 넣으면 된다. 


$config->set('URI.AllowedSchemes', array('http' => true, 'https' => true, 'data' => true)); 



]]> 인바이트미 Tue, 12 Apr 2022 00:02:54 +0900