designer DK의 블로그

웹 서비스를 설계하다보면 자주 사용하게 되는게 바로 모달(modal) 창 기능이다. 유저가 라우팅에 의한 페이지 이동을 해서 처리하기에는 애매한...간단한 정보를 보거나 간단한 액션 처리를 하는데 유용하다. 모달창을 켜고 끄는 것은 새로운 기술을 사용하다기보다는그냥 기존 ui 위에 새로운 ui를 덧대서 보여주는 기능이라고 보면 된다. 덧대서 보여주는 것을 영어로 오버레이(overlay)라고 표현하기 때문에모달 오버레이라고 부르기도 한다.export async function getContactModal() { const existingModal = document.getElementById('contact-modal'); if (existingModal) { existingModal.remove(); }..

듣고 있는 강의가 쇼핑몰 구축 쪽으로 들어갔는데 프론트엔드쪽에서 모달 창을 띄우는 부분이 나왔다. 강의는 리액트 기반으로 진행되었는데 나는 기본 자바스크립트로 구축하고 있기 때문에 기본 자바스크립트로 모달창을 구현해보았다. 구현은 챗 지피티 도움을 많이 받았다.  div id="item-modal" class="modal" style="display: none;"> div class="modal-content"> span class="close-btn">×span> h2>상품 추가h2> label>상품번호label> input type="text" id="item-sku"> br> label>상품명label> input type="text" id="item-name"> br> label>설명..