Today is..

- 오늘 한 것

 

- 모달 관련 html 작성

- 모달관련 css 작성

---

#  html 

<a class="modal-notice" hred="#none">Open Fade_In Modal with jQuery</a>

    <div class="modal">
        <div class="modal-content"> 
            <a class="btn-close" href="#none">X</a> //닫는 버튼 
            <h2>Image</h2>
            <img src="group.png"> /* 임시적으로 그룹.png 파일 입력*/

            <p>
                /*  Name
                /* Title
            </p>
            <a class="btn-guide" href="#none"></a>
        </div>
    </div>
    <script>
        
        $('.modal-notice').click(function(){
            $('.modal').addClass('active')
        })
        $('.modal-notice').click(function(){
            $('.modal').fadeIn()
        }) // ()안의 내용은 속도 1000= 1초 
        $('.btn-close').click(function(){
            $('.modal').fadeOut()
        }) //btn close를 누르면 창이 
        $('.btn-close').click(function(){
            $('.modal').removeClass('active')
        })
    </script>


        <script type="module" src="./script.js"></script>

 

#css

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

* {
    box-sizing: border-box;
}

body{
    font-family: 'Raleway',sans-serif; 
    font-size: 18px;
    margin: 50px;
    line-height: 1.5em;

}

a{
    text-decoration: none;
}
/* body -> fontfamily = 대충 글씨체 하나 얹어놈

/* jQuery Fade In Out Modal*/

.modal{ 
    position :center;
    background-color: rgba(0,0,0,0.4);
    top : 0;
    left: 0;
    height: 5000px;
    display: inline-block;
    width: 100%;
    display: none;
}
.modal-active{
    display: block;
}/*액티브로 애니메이션 효과줌*/

.modal-content{
    background-color: #ffff; 
    width: 350px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0,0.15 );
    text-align:  center;
    padding: 30px;
    animation: slidefade 0.35s linear;
} /*컬러임의작성 */

.btn-close{
    position: absolute;
    top: 15px;
    right: 15px;
}

@keyframes slidefade{
    0%{
        opacity:0;
        margin-top: -50px;
    }
    100%{
        opacity: 1;
        margin-top: 0%;
    }
}

---

- 고전했던 부분

 

-> 실제로 모달이라는 걸 처음 만들어봐서 감이 안 왔다.......

---

 

- 고쳐야 할 점

 

->  이제 점점 공부해야 할게 많은 거 같고 공부를 미리 해놔야겠다