• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 모달 배경 만들기

모달이란?

모달은 웹 페이지에서 사용자에게 중요한 메시지나 작업을 보여줄 때 사용하는 특별한 창입니다. 모달이 나타나면 사용자는 모달을 닫거나 작업을 완료하기 전까지 다른 부분을 클릭하거나 사용할 수 없습니다. 이렇게 함으로써 사용자가 현재 작업에 집중할 수 있도록 도와줍니다.

흔히 팝업 창처럼 보이지만, 모달은 팝업과 달리 페이지 안에서 나타나며, 모달이 떠 있는 동안에는 배경을 클릭할 수 없도록 설계됩니다.

예시)

• 로그인 창: 많은 웹사이트에서 로그인 창이 모달로 뜨는 경우가 있습니다. 로그인 창이 나타나면, 사용자는 로그인을 완료하거나 창을 닫기 전까지 다른 곳을 클릭할 수 없습니다.
• 확인 메시지: 중요한 작업을 하기 전에 "정말 이 작업을 진행하시겠습니까?"라는 메시지가 모달로 나타날 수 있습니다. 사용자는 확인하거나 취소를 누르기 전까지 다른 작업을 할 수 없습니다.

모달 배경 만들기

그러면 모달 배경부터 먼저 만들어볼까요?

앞서 배웠던 쌓임맥락을 참고하면서 만들어 봅시다.

.CSS_모달배경 {
	display: none;
	
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100vw;
	height: 100vh;
	background-color: lightgray;
	opacity: 50%;
}

const JS_모달열기기능 = () => {
	document.getElementById("HTML_모달배경").style = "display: block;"
}

위 코드는 JS_모달열기기능 함수가 실행 되면, CSS_모달배경의 display 속성이 block 으로 변경되면서, 모달 배경이 위로 쌓이게 됩니다.(쌓임맥락에 따르면, absolute 로 인해 모달 배경이 위로 쌓이게 되겠죠?)

%? vw? vh?

위 예시로 주어진 CSS 코드를 살펴봅시다. 처음 보는 개념이 보이죠? vw는 무엇이고, vh는 무엇인지, %는 어느 정도를 뜻하는지 알아보도록 해요.

• vw / vh

  width: 100vw; 
  height: 100vh;
  

  : 모달의 너비와 높이를 화면 전체로 설정합니다.

  • vw: Viewport Width의 약자로, 브라우저의 너비를 기준으로 한 상대 단위입니다. 100vw는 브라우저 너비의 100%를 의미합니다.
  • vh: Viewport Height의 약자로, 브라우저의 높이를 기준으로 한 상대 단위입니다. 100vh는 브라우저 높이의 100%를 의미합니다.

• %

  % 단위는 부모 요소에 대한 상대적인 크기나 위치, 정도를 지정할 때 사용됩니다. 예를 들어, 투명도(opacity)가 50%인 요소는 50%정도 투명하게 만들 수 있습니다.

📝 실습 코드