[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>