프로그래밍 공부하기

프로젝트에서 모달창을 구현해야하는 일이 생겼다. 라이브러리를 이용해도 좋지만 직접 구현하는 것이 더 학습에 도움이 될 것 같아서 모달만들기 글 를 참고하여 직접 구현을 해보았고 만족스러운 결과가 나왔다. 1. 구조 모달창의 구조는 DImmer, OuterContainer, InnerContainer, Icon으로 구성된다. 각 요소의 역할은 다음과 같다. Dimmer 화면을 0.3투명도의 검은 화면 Div로 채운다. 다른 컴포넌트들보다 위에 위치 한다.(z-index) OuterContainer InnerContainer를 감싸고 있다. position을 fixed로 주어 스크롤을 내려도 위치를 유지시킨다. Dimmer보다도 더 위에 위치한다. InnerContainer Dimmer위에 떠있는 하얀 Di..