스크립트없이 인풋과 라벨로 모달윈도우(팝업효과) 만들기! 코딩하기 /* web코딩강좌 */[HTML+CSS{코남}]

안녕하세요 HTML과 CSS로 비쥬얼 아트 코딩을 지향하며 코딩하는 남자 코남입니다.

저번강좌에서 한개의 인풋요소와 두개의 라벨요소를 활용해서 레이어팝업형태를 만들어 보았는데요 이번에는 한개의 라벨을 추가해서 총 3개의 라벨로 모달형태를 만들어 보았습니다.

---
[모달이란?] 웹 페이지에서 이벤트 배너를 윈도우창의 팝업형태로 보여지는 것이 아니고 웹페이지를 구성하고 있는 요소를 활용해서 팝업 효과를 나타내는것입니다.
---

이번 모달 효과를 만들기 위해서는
인풋을 활용해서 체크가 되면 모달이 보이고 체크가 해제 되면 모달이 가려지는 효과를 사용하기 위해 인풋타입이 체크박스인 인풋요소와 세개의 라벨요소가 동일한 아이디값으로 연결되는 효과가 필요합니다.

그리고 스타일을 줄 때 지정요소의 다음요소를 선택 할 수 있는 인접요소 선택자인 + 를 활용해야합니다.

또, 가장중요한 position 속성이 필요합니다. 요소가 포지션속성을 갖게 되면 위로 띄어진 상태가 되는데 이때 부모요소 기준으로 움직이는지 브라우저 기준으로 위치를 정해줄것인지에 대해 충분한 이해가 필요합니다.

팝업효과에 대한 강좌는 다음 주소를 통해 더 알아볼 수 있습니다.
   • 한개의 인풋요소와 두개의 라벨요소로 만드는 모달 팝업 코딩하기 /*...  

그리고 강좌의 마지막에서 애니메이션 효과를 주었는데 웹 애니메이션속성에 대해 더 알고 싶으시다면 아래 주소에 강좌가 업로드 되어있으니 참조 하시길 바랍니다.
   • 웹디자인&퍼블리싱 움직이는 웹모션코딩 애니메이션효과 트랜지션 /* ...  

웹에서 비쥬얼적으로 사용되는 효과를 준비하고 또 어떻게 하면 내용이 잘 전달될 수 있을까 고민도 해서 영상제작까지 너무 많은 시간이 소요되는것 같습니다. 그래도 도움이 될 강좌를 계속 만들어갈 예정이오니 많은 관심 부탁드립니다.
-
background music : https://www.bensound.com
-
본 강좌가 도움이 되셨다면
좋아요와 구독하기 부탁드립니다.
문의사항은 이메일로 보내주셔도 됩니다.
-
B/블로그 : https://blog.naver.com/co-nam/2215471...
E/이메일 : [email protected]