1. 모달창이란?
모달창이란 사용자가 뭔가를 눌렀을 때 다른 창으로 이동하는 것이 아닌, 팝업이 뜨는 것처럼 보이는 이런 창을 말한다.
어두운 배경 위에 흰 창이 뜨는 UI 형식인 것이다.
모달창은 없던 창을 띄워주는 것이 아니기 때문에
미리 창을 만들어두고,
띄워줬다가 투명화(?) 시키고 그런 식으로 작동된다고 생각하면 된다.
2. 모달창 기본 형태
2.1 HTML
<div class="black-bg">
<div class="white-bg">
<h4>Basic Modal</h4>
<p>Modal Body</p>
</div>
</div>
2.2 CSS
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;
}
첫 사진과 같은 가장 기본적인 모달창의 형식이다.
필요에 따라 해당 코드들을 약간씩 수정해서 사용해도 간편할 것 같다.
3. 동적 UI 생성하기
3.1 모달창의 현 상태 ( 화면에서 보이는지 / 안 보이는지 )
모달창은 보이고 안보이고 두 개의 상태 밖에 없기 때문에 그 상태를 데이터로 저장해두는 것이다.
data(){
return {
detail : true,
}
}
상세 페이지를 모달창으로 활용할 것이기 때문에 상태 이름을 detail로 설정했다.
0, false = 안보임
1, true = 보임
가끔 헷갈린다 ^^7
3.2 상태에 따라 UI를 작동시키기
<div class="black-bg" v-if="detail == true"> <!-- 조건식이 참일 경우에 작동 -->
<div class="white-bg">
<h4>Basic Modal</h4>
<p>Modal Body</p>
</div>
</div>
위 HTML 태그를 보면 v-if문법을 볼 수 있다.
( if-else 문법은 자바와 유사하다. "안에 조건문" 들어가고 그런 식이다. )
detail 상태가 false와 같으면 띄워주고 상태가 다르면 없애주는 그런 것이다.
모달창 내부에 닫기 버튼을 만들고 상태를 바꿔주는 것도 좋을 듯 하다.
이렇게 버튼을 생성하고 눌렀을 때 상태가 false로 바뀌게 하면 간편하게 창을 닫을 수 있겠다.
728x90
'Vue' 카테고리의 다른 글
[Vue] Components 컴포넌트 (0) | 2023.03.01 |
---|---|
[Vue] 모듈화 / Import & Export (0) | 2023.03.01 |
[Vue] error : Component name should always be multi-word 오류 해결 방법 (0) | 2023.03.01 |
[Vue] Vue의 이벤트 핸들러 (0) | 2023.02.28 |
[Vue] Vue의 반복문 v-for (0) | 2023.02.28 |