2024-08-02 :: 010 HTML의 구조 분석 연습 ⑤

 

 

   모달창이란 것을 새로 배우게 됐다. 평소 웹페이지에서 흔히 광고 팝업이라고 묶어 부르는 종류 중 하나인데, 모달은 팝업과는 다르다는 것도 처음 알게 되었다. 팝업은 새로운 페이지가 화면에 나타남으로써 창을 무시해도 웹 문서를 조작하는 데 문제가 없지만, 모달은 사용자 화면 전체에 새로운 레이어를 씌워버리면서 닫기 버튼을 누를 때까지 웹문서를 조작할 수 없다는게 가장 큰 차이점이었다. 그렇다면 화면 전체를 덮어버리면서 사용자가 반응했을때만 튀어나오게 할 수 있는 방법은 무엇일까...

 

 

 

   일명 책갈피 기능을 쓰면 가능했다. a태그는 웹문서간의 경로도 될 수 있지만 웹문서 내의 아이디 값을 통해 이동하는 것이 가능한데 이걸 책갈피 기능이라고 부르는 듯 했다. 일단 사용자가 누를 수 있는 a태그를 먼저 나열한 뒤, 모달창이 될 div가 가진 아이디 값을 경로로 지정해준다. 모달창으로 만들 div는 추가적인 CSS를 통해 화면 전체를 어둡게 만들어주는 효과와 더불어 사용자에게 전달하고자 하는 공간에 배경과 내용을 넣은 뒤 모달창을 벗어나기 위한 a태그를 추가적으로 달아주면 준비는 끝난다.

 

 

   먼저 전체 화면을 어둡게 덮은 화면을 설계하기 위해 너비와 높이를 뷰포인트에 맞춰주고 완전히 덮으면서도 뒤에 배치된 구조는 보일 수 있도록 투명도 값을 조절해준다. 그런 다음 모달의 내용이 될 text_box에 position을 absolute로 지정하고 위치가 화면의 정중앙에 올 수 있도록 transform값을 준다. 그런다음 이 모든 것이 사용자가 해당 아이디 주소로 넘어왔을 때 보일 수 있도록 none/block값을 지정하면 GIF의 예시처럼 모달창이 완성된다 :)

 

   책갈피 기능과 더불어 : target 속성을 처음 썼는데 웹문서 간의 절대경로 값만 입력해와서 책갈피 기능으로도 다양한 효과를 줄 수 있는게 신기하고 유익한 시간이었다.