연습장:Yuc: 두 판 사이의 차이

  • 최근 수정 시각: 2024년 12월 10일 (화) 08:57
  • 창작 문서는 문서 별 라이선스를 확인하세요. 실용 문서는 다른 조건이 없는 한 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라 사용할 수 있습니다. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 역사
편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
^여기에문서가적혀있다고가정해보고^
<html lang="ko">
<html lang="ko">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>공지 팝업<얘왤케이마빡이넓냐</title>
     <title>공지 팝업</title>
     <style>
     <style>
         /* 팝업 배경 */
         /* 팝업 배경 */
15번째 줄: 13번째 줄:
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
             background: rgba(0, 0, 0, 0.5);
             background: rgba(0, 0, 0, 0.7);
             z-index: 1000;
             z-index: 1000;
         }
         }
26번째 줄: 24번째 줄:
             transform: translateX(-50%);
             transform: translateX(-50%);
             width: 90%;
             width: 90%;
             max-width: 400px;
             max-width: 450px;
             background: white;
             background: #ffffff;
             border-radius: 10px;
             border-radius: 20px;
             box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
             box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
             padding: 20px;
             padding: 30px;
             text-align: center;
             text-align: center;
             animation: slideDown 0.4s ease-out forwards;
             animation: slideDown 0.5s ease-out forwards;
        }
 
        /* 헤더 스타일 */
        .popup-content h2 {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
 
        /* 본문 스타일 */
        .popup-content p {
            font-size: 16px;
            color: #555;
            line-height: 1.5;
            margin-bottom: 20px;
        }
 
        .popup-content small {
            font-size: 14px;
            color: #888;
         }
         }


         /* 닫기 버튼 */
         /* 닫기 버튼 */
         .close-btn {
         .close-btn {
            display: inline-block;
             margin-top: 20px;
             margin-top: 20px;
             background: #007BFF;
             background: linear-gradient(45deg, #4CAF50, #81C784);
             color: white;
             color: white;
             border: none;
             border: none;
             padding: 10px 20px;
             padding: 12px 25px;
             cursor: pointer;
             cursor: pointer;
             border-radius: 5px;
             border-radius: 25px;
             font-size: 16px;
             font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
         }
         }
         .close-btn:hover {
         .close-btn:hover {
             background: #007BFF;
             background: linear-gradient(45deg, #388E3C, #66BB6A);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         }


56번째 줄: 80번째 줄:
             }
             }
             to {
             to {
                 top: 20%;
                 top: 25%;
             }
             }
         }
         }
62번째 줄: 86번째 줄:
         @keyframes slideUp {
         @keyframes slideUp {
             from {
             from {
                 top: 20%;
                 top: 25%;
             }
             }
             to {
             to {
75번째 줄: 99번째 줄:
         <div class="popup-content" id="popup-content">
         <div class="popup-content" id="popup-content">
             <h2>📢 Caelia Studio</h2>
             <h2>📢 Caelia Studio</h2>
             <p>여기에내용을입력하시기
             <p>여기에 내용을 입력하세요.
<br><small>(2024. nn. nn.)</small></p>
<br><small>(2024. nn. nn.)</small></p>
             <button class="close-btn" onclick="closePopup()">닫기</button>
             <button class="close-btn" onclick="closePopup()">닫기</button>
91번째 줄: 115번째 줄:
         function closePopup() {
         function closePopup() {
             const popupContent = document.getElementById("popup-content");
             const popupContent = document.getElementById("popup-content");
             popupContent.style.animation = "slideUp 0.4s ease-out forwards"; // 닫기 애니메이션
             popupContent.style.animation = "slideUp 0.5s ease-out forwards"; // 닫기 애니메이션
             popupContent.addEventListener("animationend", function () {
             popupContent.addEventListener("animationend", function () {
                 const popup = document.getElementById("popup");
                 const popup = document.getElementById("popup");

2024년 12월 10일 (화) 08:57 판

공지 팝업