-
프론트 연결하는데 큰 어려움은 없었습니다 팀원분들이 기초를 다 다져노셔서
저는 만들어진 기능과 백 응답값을 넣기만 하니 완성 !!
오늘은 딱히 정리할만한게 없네요 얼른 백엔드를 하고 싶습니다.
모달창 만드는거를 정리하고 마치겠습니다.
<html lang="en"> <head> <meta charSet="UTF-8"> <title>Modal</title> <style> { ... } </style> </head> <body> <div id="container"> <h2>Lorem Ipsum</h2> <button id="btn-modal">모달 창 열기 버튼</button> <div id="lorem-ipsum"></div> </div> <div id="modal" className="modal-overlay"> <div className="modal-window"> <div className="title"> <h2>모달</h2> </div> <div className="close-area">X</div> <div className="content"> <p>가나다</p> <p>가나다라</p> <p>가나다라마</p> <p>가나다라마바</p> </div> </div> </div> <script> const loremIpsum = document.getElementById("lorem-ipsum") fetch("https://baconipsum.com/api/?type=all-meat¶s=200&format=html") .then(response => response.text()) .then(result => loremIpsum.innerHTML = result) </script> </body> </html>display 기본설정을 none 으로 하고 아래 설정처럼 바꿔서 보여주는 식이였고
const modal = document.getElementById("modal") const btnModal = document.getElementById("btn-modal") btnModal.addEventListener("click", e => { modal.style.display = "flex" })같은 방법으로 요번엔 flex 된 display 를 X를 누르면 none 으로 설정 하면 끝
const closeBtn = modal.querySelector(".close-area") closeBtn.addEventListener("click", e => { modal.style.display = "none" })