팝업창만들기

페이지 정보

profile_image
작성자아재게그 조회 2회 작성일 2021-01-23 00:03:42 댓글 0

본문

레이어 팝업 열고/닫기 만들기 - Only CSS3, CSS3 Target

안녕하세요. 리베하얀입니다.
자바스크립트(Jquery)없이 CSS3만으로 레이어 팝업열기 기능을 만들어 보았습니다.


참고..
position:fixed로 하면 팝업은 원활하게 사용 가능합니다.
다만 fixed가 없어야되는 show,hide형식의 콘텐츠는 사용이 불가합니다.
이부분을 따로 2탄을 찍어서;; 올리도록 하겠습니다. 감사합니다.


- 사이트안내 -
개인사이트 : http://rebehayan.com
개인블로그 : http://blog.naver.com/rebehayan
장애인차별금지법 대응을 위한 웹접근성과 품질인증 저자 : http://www.acornpub.co.kr/book/beyond-web-accessibility


- Music -
Good For You by THBD https://soundcloud.com/thbdsultan
Creative Commons — Attribution 3.0 Unported— CC BY 3.0
http://creativecommons.org/licenses/b...
Music promoted by Audio Library


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

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

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

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

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

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

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

팝업효과에 대한 강좌는 다음 주소를 통해 더 알아볼 수 있습니다.
https://www.youtube.com/watch?v=Ean6POSn8nA

그리고 강좌의 마지막에서 애니메이션 효과를 주었는데 웹 애니메이션속성에 대해 더 알고 싶으시다면 아래 주소에 강좌가 업로드 되어있으니 참조 하시길 바랍니다.
https://www.youtube.com/watch?v=arG8I4emqW8

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

#01포토샵강좌 - 배송지연 팝업창 만들어보기(PSD제공)

안녕하세요! 노리터디자인입니다.
오늘은 첫시간인데요..^^
팝업창으로도 그냥 페이지로도 활용하기 좋은 배송지연 팝업창을
함께 만들어보는 시간을 가져보겠습니다~
(psd파일은 블로그에서 다운가능하세요^^)
노리터디자인 블로그 : https://blog.naver.com/redhair_anne

1인 쇼핑몰 운영하시는 사장님, 포토샵을 공부하시는분들
배너나 인트로등 디자인이 필요하신 모든분들 노리터디자인과
앞으로 많은 디자인 만들고 공유해보겠습니다!

혼자서 디자인이 힘드시면 노리터가 도와드릴께요~
작업에 필요한 자료(들어갈내용, 사진등등)redhair_anne@naver.com으로 보내주시면 같이 수업도 해보고 만들어진파일을 공유도 해보는 시간을 갖도록 하겠습니다.
많은 관심 부탁드립니다^^

좋아요와 구독은 노리터에 많은 힘이 됩니다! 오늘도 즐거운 하루 되세요^^

... 

#팝업창만들기

댓글목록

등록된 댓글이 없습니다.

전체 3,741건 1 페이지
게시물 검색
Copyright © www.lilyforest.co.kr. All rights reserved.  Contact : help@oxmail.xyz