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

[@도토리-f2o]

코딩 정말 혼자서 막막했는데 입문자인 저에게는 정말 친절한 설명입니다ㅠㅜ 매번 잘배워서 갑니다!

[@codingnam]

매번 봐주셔서 감사합니다

[@성이름-s1l1x]

코남님 진짜 html+css 강좌계의 최고인거 같아요!! 이해하기 너무 쉽고 모션그래픽도 잘만드시네요 이 귀한 채널이 생겨서 정말 좋습니다 강좌 잘볼게요!

[@김학생-m3m]

여태 봤던 css 강좌중 최고였습니다.

[@geuniee]

코남님 ㅠㅠ정말유용한 강좌 매번 감사합니다ㅜㅜ 한동안 업뎃 없으셔서 기다렷어요ㅠㅠ

[@이동욱-s3l]

진짜 쩔어요 ㅠㅠ 💕

[@eunyoung779]

와... 어쩜 이렇게 설명을 잘하시나요. 구성도 너무 좋고 완전 알기쉽게 설명해주셔서 머리에 쏙쏙 들어오네요. 감사합니다~

[@codingnam]

이해가 잘 되셨다니 뿌듯하네요 ~ 앞으로도 많은 관심부탁드리며 더좋은 강좌를 준비해보겠습니다 !! 키햐 ~

[@이정희-p7q]

내가 왜 이 채널을 이제야 알았을까ㅠㅠ 정말 감사합니다!!

[@codingnam]

왜 이제야 오셨어요 ㅠ 좋은 컨텐츠 맹글어 볼게요 ~~

[@사랑의보컬이수]

감사합니다 너무 디자인이 너무 예쁜것 같아요

[@준떵이-i2l]

진짜 ㅠㅠ 코남 사랑해요 ㅠㅠ 큰도움 여러번 받네요

[@codingnam]

저도 도움 주시죠 먾은 좋아요와 댓글로요 ㅋㅋㅋ 감사합니다

[@colskateboarding7734]

일일히 효과음 넣기 힘들텐데 대단하시네요 정성이 느껴지는 영상 잘봤습니다 :) 항상 좋은 콘텐츠 만들어주셔서 감사합니다.

[@greatmeerkat]

설명을 정말 잘하시네요. 그리고 영상 편집이 끝장나네요. 집중이 잘되고 재밌어요.

[@ql33qhsh74]

코남님! 코딩을 공부하고 있는 웹디자이너 입니다! 학원에서 배울땐 너무 어렵고 이해도 잘 안갔는데 코남님 강의 듣고 배운것들이 아주 많아요! 너무 감사합니다! 강의 자주자주 올려주세욤! 요새 웹 트렌드에 맞는 코딩강의 올려주심 감사하겠습니다! 항상 감사해요❤️

[@SuccessShelf0103]

아 코드 한줄 한줄 설명해주시는 거 정말 너무 좋아요 !! 명품강의 감사해요 !!

[@leem-x5o]

와 진짜 대박이네요... 바로 구독했어요. 설명도 친절하고, 보여지는 이미지도 깔끔해서 이해가 정말 잘됐어요. 마지막에 한번 더 정리해주시는 부분에서는 감동 받았네요. 정말 고맙습니다!

[@codingnam]

오오오 .. 감사합니다 : )

[@goyangyi]

강의 레전드네

[@dingin6511]

강의가 이해가 쏙쏙됩니다!

[@crystalu398]

우왕 감사합니당 열심히 따라했어용!!

[@thewoodsssssss]

댓글들이 다 칭찬일색인 이유가 있네요 감사합니다~

[@seungyounlee3497]

제가 딱 필요하던 거예요ㅠㅜㅜㅜㅜ 정말 감사드려요

[@유-o4u]

와 설명.. 무엇 진짜 친절하다 .. 한줄한줄 정성

[@codingnam]

와 댓글 무엇? 너무 감사! 다시 컨텐츠 만들어야하는데 시간이 .. ㅠ

[@유-o4u]

@@codingnam 덕분입니다 감사해용 영상 따라하면서 편하게 구현했습니다 ㅜㅜ

[@prayformy]

타노슼ㅋㅋㅋㅋㅋ 매번 이해쉽게 설명과 모션그래픽으로 너무 잘보고있습니다 감사합니다 :-)

[@hyeon92]

좋은 강의 감사합니다ㅎㅎ

[@whitegalaxy7084]

안녕하세요 html 입문자 (초보중에 초보)인데 코남님 영상 덕분에 많이 배워갑니다. 매번 좋은영상 감사드립니다. 그런데 저 모달윈도우에 유튜브 영상을 넣고 싶은데 그냥 링크를 걸면 되는건지 궁금합니다, 또 링크를 어떻게 걸어야 되는지 알려주실수 있나요? 항상 좋은영상 감사드립니다.

[@codingnam]

유튜브 공유하기버튼을 누르면 퍼기가 버튼이 나오는데 그걸 누르면 으로 코드를 공유할 수 있게 나옵니다. 그 코드를 div > div 에 label 요소 다음에 넣고 의 크기를 팝업의 크기와 맞게 조절해 주시면 될 것 같아요 ~ 답변이 늦어서 죄송합니다

[@아마게이머]

최고;

[@flintgray1918]

옥의 티로, fixed는 픽시드 보다는 픽스드에 가깝습니다

[@황현준-d4r]

오아우 정말 진심으로 잘찾았습니다 !! 혹시 view = 이미지 이렇게 까지 만들었는데 여러장이 잘안되더라고요ㅠㅠ 가능한가요??

[@신재원-g8l]

안녕하세요 코남님! 최근들어 코남님 영상 자주보게되는데 너무나 좋은 컨텐츠들 알려주셔서 감사해요! 따라 만들어보고 적용해보면 느끼는 바가 정말 많아요. 천재이신것 같다는 생각과 또한 구독자들이 후에 이를 적용할때를 대비한 배려심이 너무나도 많이 느껴집니다! 궁금한 부분이 있어 도움받고자 댓글다는데 답변 부탁드립니다^^ 1. 오직 html과 css만으로 모달윈도우를 만들었을때 팝업창 안에 스크롤을 만드는 방법이 있을까요?? 있다면 도움 부탁드려요 ㅜ ( div> div 에 height값을 auto로 줘도 문제가 되고 혹 div>div 안에 또다른 div를 만들어야하는지... 어렵습니다 ㅜ) 2. 혹여 이렇게 팝업창안에 스크롤을 넣는다고해도 왠지 마우스 휠을 아래로 굴리면 모달윈도우 창과 아래에 깔려있는 본문의 스크롤이 같이 내려가거나 혹은 모달윈도우 부분에 스크롤이 움직이는것이 아닌 본문스크롤이 움직이는 벽을 만날것같은데..... 자바스크립트 없이 이를 구현하는 방법이 있을까요?? 항상 잘보고있습니다! 감사해요 ! 도움부탁드립니다! (_ _)

[@codingnam]

팝업 안에 스크롤이 생성될 div 나 요소에 overflow-Y:scroll; 이라는 속성값을 사용해보세요 ~ 높이 값을 주어야 할 수도 있어요! 예를 들어 height:100px 이라고 하면 안쪽 컨텐츠가 100px 이상으로 벗어날 때 스크롤이 작동되는 것 처럼요

[@뀨뀨뀨뀩-k5i]

좋네용

[@ソンチャンド]

안녕하세욤~! 'ㅁ' 유익한 영상 만들어 주셔서 감사합니다. 질문이 있어서 이렇게 댓글을 남겨 보는데요 만약에 모달창의 내용이 많아서 overflow-y:scroll 를 줬을때 팝업 박스의 제일 상단 제목 부부만 display:fixed로 고정을 시키고 싶은데...이럴땐 어떻게 하면될까요? 이렇게 저렇게 바꿔보는데 맘처럼 쉽지가 않네욤 ㅠㅠ

[@codingnam]

제목부분만 상단에 고정시키고 싶다면, 일단 부모요소에 position:relative;를 주고 제목요소에 position:sticky;값을 줘보세요 ~ 더 자세한 설명을 원하시면 position:sticky 속성 이라고 검색하면 다양한 예제와 함께 정보를 얻으실 수 있을거예요

[@ソンチャンド]

@@codingnam 아하 그렇군요! sticky 한번 찾아볼께요! 감사합니다^^ 혹시 추가적인 질문인데요 마우스 스크롤을 하게되면 뒤에 배경도 스크롤이 함께 되던데 안되게 막을수 있는 방법이 있을까요?!

[@codingnam]

@@ソンチャンド 제이쿼리로 제어하는 방법으로는 모달창버튼을 클릭하면 body에 fixed 클래스를 추가하는 스크립트를 짜고 CSS 에서 body.fixed {overflow:hidden;} 이렇게 오버플로우 히든처리하면 됩니다. CSS로 한다면 팝업으로 사용하는 input이 체크되면 body에 overflow 히든처리하면 될것 같은데 body 위로 input을 써보지 않아서 잘 모르겠네요 ~

[@ソンチャンド]

@@codingnam 답변 감사합니다! 먼저 css로 작업을 했는데 body에 css추가가 안되더라구요 ㅠ 결국 jquery를 사용해서 body에 fixed처리를 했습니다! 감사합니다~^^

[@codingnam]

@@ソンチャンド 그러게요 body 위로 input을 올릴수 없네요 ~ 이건 어쩔 수 없이 클래스 추가 제거하는 방식으로 제이쿼리로 작업해야하는 듯 해결되서 다행이네요 ~

[@김안녕-l3n]

영상보고 많이 배웁니다. 그런데 팝업창 안에 글씨는 쓸수없는건가요??

[@codingnam]

컨텐츠 영역안에 넣으면 되죠!

[@김안녕-l3n]

3:17 혹시 이 중에 넣는 거 맞나요?

[@codingnam]

Div두번째 안에 닫기버튼으로 만든 라벨요소가 있죠? 라벨 바로 아래로 한번 텍스트를 넣어 확인해보세요 컨텐츠 내용에 따라 div 크기를 변경해서 사용하시면 될 것 같아요

[@김안녕-l3n]

@@codingnam 오마이갓..감사합니다ㅠㅠㅠ

[@codingnam]

@@김안녕-l3n ㅠㅠㅠ 성공? 우아 ~ 굿굿잡

[@hoya_luky7]

팝업에 보이는 컨텐츠 주소는 어디에 어어야 할까요? 그리고 팝업을 지운면 클릭한 컨텐츠로 넘어가는 방법도 알수 있을까욥?

[@codingnam]

div 안에 있는 div에 라벨 요소 다음에 컨텐츠를 넣으면 됩니다. 크기는 CSS 로 input[id*='popup'] + label + div > div 여기에 크기를 변경하시면 되고요, 팝업을 지우면 컨텐츠로 넘어가는? 방법이 있다면 컨텐츠 넣을 때 a태그를 사용해서 링크로 넣으면 팝업을 닫지 않아도 페이지 이동이 되면서 처음 상태가 되니 팝업을 해제하지 않아도 될 것 같아요

[@myaccord7]

사이즈가 각각 다른 팝업을 여러게 띄우고자 할때... popup1, popup2, popup3 ... 이렇게 각각 만들어야 하나요? CSS소스는 하나로 해서.. 각각 띄울수 있는 최적화된 방법은 어떤게 있을까요?

[@codingnam]

HTML과 CSS만으로 만들려면 popup1 ... 2... 3 이렇게 각각 만들어줘야 하고 보통은 스크립트로 만들어 반복적으로 사용되는 소스를 짧은 코드로 사용되도록 만듭니다. 여기서는 팝업효과를 CSS에서 어떻게 구현할 수 있는지에 대해서만 알려드리는 컨텐츠입니다.

[@myaccord7]

@@codingnam 네 감사합니다.

[@ysevanlee7489]

간단한 alert 페이지를 구현하기에는 좋지만 내부에 div같은 다양한 구성요소를 끼워넣기에는 약간 불편한 것 같습니다. input의 하위 div에 지정한 양식이 끼워넣을 div와 계속 충돌하면서 생기는 문제인것 같아요 ㅠㅠ

[@codingnam]

사용하시려는 용도에 따라서 사용하시면 될것 같습니다. div가 충돌이면 클래스로 선택자를 구분해서 사용하시면 될것 같아 보이는데 안될까요?

[@xpxdfw4989]

팝업창에 사진을 넣을려면 백그라운드에 어떻게 써야하나요? ㅜ 취미로 한번 따라하고 있어서 잘 모르겠어요!

[@codingnam]

div > div 에 이미지를 넣으시면 될거예요 ~

[@goyangyi]

궁금한게 있는데 이게 html+css 로 구현하는게 편한가요 JS를 쓰는게 더 편한가요?

[@codingnam]

스크립트로 구현하면 코드의 단순화와 쉽게 컨트롤이 가능해요 ~ JS를 사용한다면 본 컨텐츠를 사용할 필요가 없어요 ~

[@codingnam]

본 컨텐츠는 속성값들의 쓰임과 활용방법에 대한 이해를 돕기 위해라고 생각해주시면 좋을것 같아요