$(A).css(B); 형태

1. css 파일

 

.modal-subscribe {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);

  display: none; 

  align-items: center;

  justify-content: center;

}

 

 

 

2. 자바스크립트 파일

    $(".modal-subscribe").css("display", "flex");

3. jsp파일

 

<div class="modal-subscribe">

    <div class="subscribe">

        <div class="subscribe-header">

            <span>구독정보</span>

            <button onclick="modalClose()">

                <i class="fas fa-times"></i>

            </button>

        </div>



        <div class="subscribe-list" id="subscribeModalList">




           

        </div>

    </div>



</div>

 

 

이런 상태라면

 

jsp 파일의

<div class = "modal-subscribe">  가 원래는 display none(css 파일) 상태였지만, flex 형태(js파일)가 됨.

즉 화면에 보이게 하라는 뜻

 

 

참고자료 출처 :

이지업 사이트 강의 "스프링부트 SNS 프로젝트 - 포토그램 만들기"