Vue#4 - 모달창 만들기

1. 동적인 UI만드는 법

1-1. HTML, CSS로 디자인 해두기

모달창의 기본구조

<div class="black-bg">
  <div class="white-bg">
    <h4>상세페이지임</h4>
    <p>상세페이지 내용임</p>
  </div>
</div>

 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: 100%; background: white;
    border-radius: 8px;
    padding: 20px;
  }

1-2. UI의 현재 상태를 데이터로 저장해두기

모달창열렸니 : false

1-3. 데이터에 따라 UI가 어떻게 보일지 작성

<h4 @click="모달창열렸니 = true">
<button @click="모달창열렸니 = false">닫기</button>