모달창만드는법
-
HTML 모달창 만들기 공식학습/HTML 2022. 2. 21. 22:03
모달창은 열려있는 브라우저 위로 새로운 레이어를 까는 것을 뜻합니다. 그래서 팝업창과 다르게 opacity가 들어간 어두운 배경이 기본적으로 깔립니다. 1️⃣ 모달창의 내용 위치는 어디에도 좋습니다. body 안에만 들어가 있으면 됩니다. 2️⃣ 기본 내용은 이러합니다. 어두운 배경이 될 div 안에 내용이 들어갈 div가 들어가고 p태그로 내용을 넣어주었습니다. 텍스트 내용은 ul, li로 하셔도 무방합니다. 닫기 버튼도 input이 아닌 다른걸로 넣어주셔도 됩니다. 3️⃣ css 서식 배경이 될 modal에 position:fixed로 위치를 고정시켜줍니다. 사이즈도 100%는 필수입니다. 배경컬러는 뒤에 기존 브라우저가 살짝 보이게 opacity값을 넣어주세요. z-index는 현 브라우저보다 위에..