투케이2K

519. (javaScript) 자바스크립트 Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 Toast Message 기본 스타일 지정 및 표시 수행 본문

JavaScript

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

투케이2K 2026. 3. 30. 19:18
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / Toastify.js / Toast Message


- 사전) 👉 토스트 (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;
        }



        
        .toast-full {
          width: 100% !important;
          max-width: 100% !important;   /* ✅ 핵심: 기본 max-width 제거 */
          left: 0 !important;
          transform: none !important;
          border-radius: 0 !important;
        }


    </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 = 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
          // ------------------------------------------------------

          
          // ------------------------------------------------------
          // 👉 [기본] : Toastify 호출 방법
          // ------------------------------------------------------
          /*
          Toastify({
            text: "Hello Toast!", // 표시 텍스트
            duration: 3000, // 표시 시간
            gravity: "bottom", // 표시 될 위치 (Y 축) >> top or bottom
            position: "center", // 표시 될 위치 (X 축) >> center or right or left
            backgroundColor: "#ff0000", // 배경 색상
          }).showToast();
          // */
          // ------------------------------------------------------ 


          // ------------------------------------------------------
          // 👉 [스타일] : 모서리 둥글게 적용 방법
          // ------------------------------------------------------          
          /*
          Toastify({
            text: "Hello Toast!", // 표시 텍스트
            duration: 3000, // 표시 시간
            gravity: "bottom", // 표시 될 위치 (Y 축) >> top or bottom
            position: "center", // 표시 될 위치 (X 축) >> center or right or left            
            style: {
              borderRadius: "12px" // 모서리 둥글기 설정
            }
          }).showToast();
          // */
          // ------------------------------------------------------ 


          // ------------------------------------------------------
          // 👉 [스타일] : 배경 그라데이션 및 텍스트 스타일 설정 방법
          // ------------------------------------------------------ 
          /*
          Toastify({
            text: "Hello Toast!", // 표시 텍스트
            duration: 3000, // 표시 시간
            gravity: "bottom", // 표시 될 위치 (Y 축) >> top or bottom
            position: "center", // 표시 될 위치 (X 축) >> center or right or left
            style: {
              color: "#000", // 텍스트 색상
              fontWeight: "bold", // 폰트 굵기 지정
              background: "linear-gradient(to right, #00b09b, #96c93d)", // 배경 그라데이션 설정
              borderRadius: "20px", // 모서리 둥글기 설정
              padding: "16px 24px" // 패딩 설정
            }
          }).showToast();
          // */
          // ------------------------------------------------------ 


          // ------------------------------------------------------
          // 👉 [스타일] : Width 전체 화면 설정 : 커스텀 스타일 클래스 지정
          // ------------------------------------------------------          
          /*
          Toastify({
            text: "Hello Toast!", // 표시 텍스트
            className: "toast-full" // css 스타일이 적용 될 클래스 명칭
          }).showToast();
          // */
          // ------------------------------------------------------ 


          // ------------------------------------------------------
          // 👉 [스타일] : Width 전체 화면 설정 : 내부 스타일 지정
          // ------------------------------------------------------          
          //*
          Toastify({
            text: "Hello Toast!", // 표시 텍스트
            duration: 3000, // 표시 시간
            gravity: "top", // 표시 될 위치 (Y 축) >> top or bottom
            position: "center", // 표시 될 위치 (X 축) >> center or right or left
            style: {
              width: "80%", 
              maxWidth: "80%", // ✅ 가로 화면 너비
              color: "#fff", // 텍스트 색상
              fontWeight: "bold", // 폰트 굵기 지정
              background: "linear-gradient(to right, #0033ff, #0099ff)", // 배경 그라데이션 설정
              borderRadius: "20px", // 모서리 둥글기 설정
              textAlign: "center", // 텍스트 정렬
              padding: "16px 24px" // 패딩 설정
            }
          }).showToast();
          // */
          // ------------------------------------------------------ 


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

        }

      };

    </script>


</head>


<body>

</body>

</html>

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





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

[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
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

521. (javaScript) [간단 소스] 자바스크립트 window.opener.postMessage Cross-window 팝업창 데이터 통신 방식 설명 정리  (0) 2026.04.01
520. (javaScript) [간단 소스] 자바스크립트 동적 스크립트 작성 및 window.open 시 window.opener.postMessage 부모에서 자식 데이터 전송  (0) 2026.04.01
518. (javaScript) 자바스크립트 globalThis.appState 공통 접근 전역 공유 상태 value 값 , function 함수 정의 및 동적 스크립트 코드 호출  (0) 2026.03.27
517. (javaScript) 자바스크립트 Deep Proxy (재귀 Proxy) 사용해 JSON 객체 데이터 전체 변경 상태 이벤트 감지 - 깊은 객체 변경 감지  (0) 2026.03.26
516. (javaScript) 자바스크립트 new Proxy 사용해 객체 변경 상태 이벤트 감지 , json 특정 key 데이터 변경 및 key 삭제 이벤트 감지  (0) 2026.03.25
'JavaScript' Related Articles more
Comments