투케이2K

186. (TWOK/UTIL) [Web/JavaScript] Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 표시 파일 본문

투케이2K 유틸파일

186. (TWOK/UTIL) [Web/JavaScript] Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 표시 파일

투케이2K 2026. 4. 10. 19:09
728x90
반응형

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 표시 파일

​

 

[화면 첨부]

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : Web / JavaScript (자바스크립트) / Toastify / 토스트 메시지


- 사전) 👉 토스트 (Toast) 메시지 간략 설명 : 

  >> 토스트 메시지 (Toast Message) 는 웹/앱 화면에서 **잠깐 나타났다 사라지는 알림 (UI Notification) 을 말합니다.

  >> 토스트 메시지 (Toast Message) 특징 정리 : 

    - 화면 상에서 작고 단순한 알림 패널 형태
    - 잠시 노출 후 자동으로 사라짐
    - 페이지 흐름을 방해하지 않음 (Modal처럼 막지 않음)
    - 보통 화면 하단 또는 상단에서 나타남
    - 성공, 실패, 경고, 정보 같은 빠른 피드백 용도로 사용됨
    - 사용자 행동과 직접적인 상호작용이 거의 없음 (보여주기만 함)


- 사전) 👉 Toastify.js 라이브러리 간략 설명 :  

  >> Toastify.js 는 Vanilla JavaScript 로 만들어진 가볍고 (2.4kB) 의존성 없는 웹 브라우저 토스트 알림 라이브러리입니다.

  >> Toastify.js 장점 설명 : 

    - 가볍다(2~3 kB 수준)
    - 의존성 없음
    - 적용과 사용이 매우 쉬움
    - CSS/JS로 자유로운 커스터마이즈 가능
    - 모바일 대응 및 자동 센터 정렬
    - DOM Node 직접 삽입 가능

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
          width: 100%;
          height: 100%;
          margin : 0 auto;
          padding : 0;
          border : none;
          background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->    
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // ------------------------------------------------------
          // ✅ [Toastify.js 기본 설명 정리]
          // ------------------------------------------------------
          // 1. Toastify.js 는 Vanilla JavaScript 로 만들어진 가볍고 (2.4kB) 의존성 없는 웹 브라우저 토스트 알림 라이브러리입니다.
          // ------------------------------------------------------
          // 2. Toastify.js 장점 설명 : 
          // 
          // >> 가볍다(2~3 kB 수준)
          // >> 의존성 없음
          // >> 적용과 사용이 매우 쉬움
          // >> CSS/JS로 자유로운 커스터마이즈 가능
          // >> 모바일 대응 및 자동 센터 정렬
          // >> DOM Node 직접 삽입 가능
          // ------------------------------------------------------
          // 3. [toastify-js CDN 설정 참고 사이트]
          // 
          // https://www.npmjs.com/package/toastify-js
          // ------------------------------------------------------



          toastMessageShow('top', 3000, 'blue', 'hello'); // 배치 (top 상단, bottom 하단)
          //toastMessageShow('top', 3000, 'red', 'hello'); // 배치 (top 상단, bottom 하단)
          //toastMessageShow('top', 3000, 'black', 'hello'); // 배치 (top 상단, bottom 하단)
          //toastMessageShow('top', 3000, 'green', 'hello'); // 배치 (top 상단, bottom 하단)
          //toastMessageShow('top', 3000, 'yellow', 'hello'); // 배치 (top 상단, bottom 하단)          
          

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };






      // -----------------------------------------------------------------
      // ✅ [토스트 메시지 표시 함수 정의 : Toast Message]
      // -----------------------------------------------------------------
      // 👉 Function Call : toastMessageShow('top', 3000, 'green', 'hello');
      // -----------------------------------------------------------------
      function toastMessageShow (gravity, duration, color, message){
        console.log('toastBlackShow : start : ', message);

        try {

          if (gravity == null && gravity == undefined && gravity == ''){
            console.error('toastBlackShow : gravity is null');
            return;
          }

          if (duration == null && duration == undefined){
            console.error('toastBlackShow : duration is null');
            return;
          }

          if (color == null && color == undefined && gravity == ''){
            console.error('toastBlackShow : color is null');
            return;
          }

          var gravityChange = gravity; 
          var durationChange = duration; 
          var colorChange = color; 

          if ( (gravityChange == 'top' || gravityChange == 'bottom') == false ){
            gravityChange = 'top'; // 기본 상단
          }

          if ( durationChange < 3000){
            durationChange = 3000; // 기본 3초 유지
          }

          if ( (colorChange == 'black' || colorChange == 'green' || colorChange == 'blue' || colorChange == 'red' || colorChange == 'yellow') == false ){
            colorChange = 'black'; // 기본 검정색
          }

          if (colorChange == 'black'){
            colorChange = 'linear-gradient(to right, #000000, #444444)';
          }
          if (colorChange == 'green'){
            colorChange = 'linear-gradient(to right, #669900, #66cc00)';
          }
          if (colorChange == 'blue'){
            colorChange = 'linear-gradient(to right, #0033ff, #0099ff)';
          }
          if (colorChange == 'red'){
            colorChange = 'linear-gradient(to right, #cc0033, #cc3366)';
          }
          if (colorChange == 'yellow'){
            colorChange = 'linear-gradient(to right, #ff9900, #ff9966)';
          }


          // [Show Toast Message]
          Toastify({
            text: String(message), // 표시 텍스트
            duration: durationChange, // 표시 시간
            gravity: gravityChange, // 표시 될 위치 (Y 축) >> top or bottom
            position: "center", // 표시 될 위치 (X 축) >> center or right or left
            style: {
              width: "80%", 
              maxWidth: "80%", // ✅ 가로 화면 너비
              color: "#fff", // 텍스트 색상
              fontWeight: "bold", // 폰트 굵기 지정
              background: colorChange, // 배경 그라데이션 설정
              borderRadius: "20px", // 모서리 둥글기 설정
              textAlign: "center", // 텍스트 정렬
              padding: "16px 24px" // 패딩 설정
            }
          }).showToast();

        }
        catch(err){
          console.error('toastMessageShow : ❌ exception : ', err);
        }

      };
      

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ [자바스크립트 Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 Toast Message 기본 스타일 지정 및 표시 수행]

https://kkh0977.tistory.com/8730

https://blog.naver.com/kkh0977/224234733089


▶️ [toastify-js CDN 설정 참고 사이트]

https://www.npmjs.com/package/toastify-js


▶️ [toastr js 라이브러리 사용해 토스트 알림 메시지 표시 실시]

https://kkh0977.tistory.com/981

https://blog.naver.com/kkh0977/222429771901?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'투케이2K 유틸파일' 카테고리의 다른 글

185. (TWOK/UTIL) [Web/JavaScript] AWS 관리자 대시 보드 만들기 기본 Web Template 템플릿 포맷 HTML 파일  (0) 2026.04.09
184. (TWOK/UTIL) [Android/Java] [기능 보완] Tcp Ip Socket 소켓 통신 클라이언트 모듈 - 데이터 송수신 중 서버 소켓 종료 대응  (0) 2026.03.30
183. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 img.src 및 fetch api 사용해 브라우저 실제 네트워크 사용 가능 상태 확인  (0) 2026.03.27
182. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 window.open 팝업창 새창 열기 수행 시 브라우저 팝업 차단 권한 체크 코드  (0) 2026.03.04
181. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS IAM 계정 유효성 검증 및 최근에 사용 된 서비스 정보 확인  (0) 2026.02.01
'투케이2K 유틸파일' Related Articles more
Comments