#2.vue기초 모달창 만들기

1. App.vue

   <!--동적인 ui만드는법 1.ui의 현재 상태를 데이터로 저장. 2.데이터에 따라 ui가 어떻게보일지 작 -->
       <div class="black-bg" v-if="modalStat == true">
        <div class="white-bg">
           <h4>Plese select board Type</h4>
           <select></select>
        <div @click="modalStat =false">X</div>
        </div> 
       </div>

style

<style>
body {
  margin:0
}
div {
  box-sizing:border-box;
}
.black-bg{
  width:100%; height:100%;
  background:rgba(0,0,0,0.5);
  position: fixed; padding:20px;
}
.white-bg{
  width:50%; background: white;
  border-radius: 8px;
  padding:20px;
}
</style>

Modal버튼 클릭하면 모달창이 나타나고 x를 누르면 닫친다.