스르륵 나타나는 사이드메뉴 만들기(스크립트 없이 HTML코딩강좌) input:checked(checkbox) -[HTML+CSS{코남}]

[@AaBb78971]

오늘 또 왔어요! ! 유튜브 활동해주셔서 감사합니다♡

[@복숭아-d5r]

코남채널은 보배이자 은혜이다 ! 유튜브 코딩계의 박지성

[@codingnam]

와하우 !! 감사합니다 ~

[@chofrankie7408]

강좌속도가 빨라서 지루함 없이 후딱가요. 핵심만 딱딱 군더더기 없는 설명. 늘 감사합니다.

[@kaiwrites4182]

여태까지 봐왔던 코딩 강의 영상 중에서 가장 재미있었습니다.

[@codingnam]

재미있게 봐주셔서 감사합니다 ~

[@todaythanks-07q]

우와 ~~~ 정말 잘 가르쳐 주시네요 :) 감사해요

[@jealousy2726]

반응형페이지에 쓰이는 메뉴 찾다가 영상보게 되었는데 깔끔하게 잘 만들어주셔서 이해에도 도움이 많이 되었습니다 영상편집하기 힘드셨을텐데 감사합니다:D

[@codingnam]

흙흙 제작은 힘들지만 댓글을 보니 힘이 나네요 ~ 감사합니다 !!

[@주드플라워]

항상 강좌를 보면, 물론 모든 코드들이 제 머릿속에 다 들어오고, 직접 구현을 다시 하라고하면 힘들겠지만, 다른 강좌들과 몇몇 중복되거나 비슷한 맥락의 코드들이 있어서 그거 얻어가는거라도 엄청난거라고 생각됩니다. 곧 포트폴리오를 만들예정인데 잘 참고하겠습니다

[@codingnam]

멋진 포폴만드시길 바랍니다 !! 다 되면 공유해주세요 구경갈게요 ~

[@브랜드디자인]

강의 영상 완성도가 높네요

[@yu__9247]

코딩이 어렵게 느껴질수있는것을 이해하기쉽게 설명되어 있어서 너무 좋아요^^ 영상 퀄리티 굿굿!!!

[@토리튜브-n7k]

강의 너무 재밌어요~ 좋은강의 감사합니다^^

[@barroco05]

티스토리 블로그 운영하고 스킨 적용하면서 궁금했던 건데 속시원하게 알게 되었네요.

[@shahn8808]

필요했던 강의였는데 감사합니다ㅎ 이해하기 쉽게 풀어서 설명해주셔서 잘 적용했습니다!

[@webtoon_review]

영상정말좋아요!!감사합니다

[@switbread1396]

블로그에 있는 파일을 복붙하면 되는데 왜 제가 직접 작성하면 안되죠? 분명 다 맞게 썼는데.... + 오른쪽에서 사이드 바가 나오게 할때 아이콘은 움직이지만 검은색 사이드 바가 나오지를 않아요 ㅠㅠㅠㅠ 그리고 4:50초까지 div css 구문(?) 만 하면 하얀색 x 버튼이 안나와요 input[id="menuicon"]:checked + label { z-index:2; } input[id="menuicon"]:checked + label span { background:#fff; } 이 구문을 추가해야더군요 ㅠㅠㅠ 블로그 보고 알았어요

[@codingnam]

그래도 해결은 하셨네요? 오 ~ 저도 에전에 코딩하면서 안되던게 풀리면 그게 가장 기억에 많이 남더라고요 ! 그리고 그게 기초가 되어서 이런 컨텐츠도 만들게 된거고요 ~

[@switbread1396]

@@codingnam 네 맞아여 ㅠㅠㅠㅠ

[@윤짱-j3h]

와 영상너무좋아요~~ 너무 도움됩니다!!👍👍

[@라잌-f7p]

개좋아 !! 도움많이됐습니다

[@sky-lover]

와 이렇게 멋진채널 넘 감사합니다

[@codingnam]

우아 ~ 댓글 감사합니다 !! 앞으로 좋은 컨텐츠로 준비해보겠습니다 ~ 시간이 좀 오래 걸리긴 하지만 그래도 .. 지켜봐주세요 ㅋㅋ

[@김다솜-k1g]

4분54초에 나오는 효과음이 맘에 드네요!

[@byunghochung8586]

awesome!. 본 중에 최고입니다. 적용해보렵니다

[@codingnam]

도움이 되셨다니 뿌듯하네요 ~ 꼭 이렇게 코딩하기보단 방법을 이해하시고 다르게도 만들어 보시는걸 해보시기 바랄게요 그리고 더 좋은 방법이 있다면 공유도 해주시고요 감사합니다 ㅎ

[@tucpass]

자주 올려주세요~ 도움 많이 되네요

[@뚜뚜뚜-p1v]

헐좋다 선좋아요후감상

[@포도쨈네일]

와..너무 영상 좋아요 이해도 잘되고 간결하고 ㅠㅠ구독 누르고 두고두고 볼거에요 ㅠㅠ담엔 미디어쿼리도 다뤄주시면 안될까용..

[@codingnam]

안녕하세요 내용 전달이 잘 된다니 뿌듯해요 !! 미디어 쿼리는 필수죠 하지만 어떻게 전달해야 잘 전달할지 고민을 많이 해야하는 부분이라 조금씩 준비해서 컨텐츠로 제작해보겠습니다 !! 관심가져주셔서 감사해요 ~

[@HOJO_303]

정말 좋은 강좌들 감사합니다 :)

[@codingnam]

늦은시간까지 컨텐츠봐주시고 댓글도 감사합니드아 ~

[@HOJO_303]

@@codingnam 아닙니다 ㅠㅠㅠ 혼자 디자인하고 코딩공부하면서 너무 막혔는데 덕분에 보면서 많이 도움이 되었어요 정말 감사해요 :)

[@HOJO_303]

아 코남님 하나 혹시 질문해도 될까요 ? 다름이 아니라 저는 input box를 사용하지 않고 햄버거 메뉴를 만들었는데 가상요소 checked를 사용하려면 input type밖에 안되는데 혹시 그 방법말고 다른 방법이 있을가요 ? active랑 hover는 정말 checked랑 너무 달라서요 ㅠㅠ 원하는 디자인이 나오지 않네요 ㅠㅠ

[@codingnam]

@@HOJO_303 이 방법 말고는 jQuary를 사용해서 실제적으로 클래스를 추가제거 하는 방식으로 사용해야하는 부분입니다. 실제 실무에서도 많이 사용하고 있고요 ~ 하지만 스크립트 사용없이 html과 css 만으로 만들 수 있는 방법이기에 컨텐츠로 만들어 본거에요 ~~ 제이쿼리(자바스크립트 라이브러리)를 사용해서 햄버거 버튼을 만드는 방법에 대해서는 강좌를 준비할 생각은 없었는데 시간이 된다면 다뤄봐야할 것 같다는 생각이 드네요 ~ html로만 햄버거 버튼을 만들려고 하시면 다른방법은 제 능력에서는 안될것 같아요

[@HOJO_303]

@@codingnam 그렇군요 ㅠㅠㅠ 감사합니다!!

[@누나밥]

막막해서 멍때리고 있다가 코남님 컨텐츠 보고 정신차렸어요! 보는내내 너무 쉽고 간단하게 알려주셔서 감탄했어요 감사합니다 다른영상도 많이많이 올려주세요:) 근데 혹시 제이쿼리 쪽은 하실생각이 없으신지..?

[@codingnam]

어떻게 하면 쉽게 전달 할 수 있을까 고민하면서 제작하기에 작업시간이 좀 오래걸리네요 ㅋㅋㅋ 제이쿼리도 다루면 좋겠지만 HTML과 CSS 만으로 효과적인 비쥬얼 코딩을 할 수 있다! 이런 취지로 제작한 채널이라 .. 음, 하지만 의견 참고하여 이후에 준비 할 수 있는 컨텐츠에 제이쿼리도 다루도록 준비 해 보겠습니다 ! (언젠가는 ..) 감사합니다 ~

[@TV-it3ni]

selenium 을 배우고 있는데요 이 영상처럼 사이드바로 나타나는 메뉴의 xpath를 뽑아내려고 합니다. 그런데 이 사이드바가 속에 있는것 같은데 ID를 알아내질 못하고 있습니다 혹시 방법이 있을까요

[@95ady]

와 찾고있었는데 정말감사합니다

[@codingnam]

도움이되신것같아 기쁘군요 크크크

[@Umm-n3e]

우와아... css엄청 잘다루시네요! 잘보고 갑니다~! 짱이에여...

[@Umm-n3e]

혹시 실례가 안된다면, 반응형에 구동되는 slider강좌같은거 올려주실 수 있나요! 다른분들도 많긴한데, 이렇게 설명 쉽게 하고 간단하게 만드시는분은 없으셔서..

[@hyom__]

진짜 편집을 깔끔하게 잘 하셔서.. 간단하고도,실용적인 영상인거같아요 감사합니다 ㅎㅎ 근데 혹시 스크립트 없이 css만으로 했을때 장점이 어떤게 있을까요?

[@codingnam]

글쎄요, 다른분께서도 똑같은 질문을 해주셨는데 답변을 하고선 또 생각을 해보니 장점이랄께 뭐가 있을까 하게 되네요. 지금막 생각해보자면, ① 직접 소스들을 커스텀(반응형, 웹표준 등등)으로 만들 수 있다. ② 페이지가 열리면서 바로 적용된다. ③ 재미있다? 적용이 쉽다? ④ 크로스브라우징 ⑤ 그냥 사용하기 단순해서 난 편하다? 정도가 생각나네요 ~ ㅠㅠㅠ 하지만 단점도 많아서, 제이쿼리를 사용할 줄 안다면 제이쿼리로 적용하는게 더 효과적인 부분도 있어요

[@hyom__]

@@codingnam 아하.. 저는 js java 조금씩 다룰줄알지만 그래도 css를 좀더 확실하게 공부할수있는거같아서 좋은거같아요! 재밌기도 하고.. 코드펜?보면 css만으로도 되게 멋있는거 만들기도 하더라구요.. 어쨋든 좋은 영상 감사합니다!!!

[@영감-j3l]

좋네요 도움이되었습니다

[@duddn03]

선생님~ 좋은 강의 너무 감사합니다~ 질문이 있는데요~ sidebar 가 열렸을때~ 부모창에 스크롤을 막을려면 어떻게 해야하나요~? ㅠㅠ

[@정이-s2p]

대박

[@patienceee100]

나만 알고싶은 채널이다....

[@codingnam]

소장해 주세요 ㅠㅠㅠ ~

[@윤수정-d8e]

어떻게하는지 한참 헤맸는데 정말 너무 감사합니다!! ㅜㅜ

[@CatcherBB]

너무 많은 공부가 되었습니다 감사합니다 근데 a태그 메뉴를 클릭하고 난 후에 사이드바를 들어가게 할려면...html, css 만으로 어떻게 할 수 있을까요

[@codingnam]

a태그를 클릭하면 페이지가 이동하기 때문에 새로고침되어 사이드메뉴가 닫히게 되는데, 클릭해서 사이드바를 들어가게 하려면 input으로 만들어 졌기 때문에 a태그를 label로 만들어서 for 속성값으로 input에 각각 연결해주면 input이 해제 되면서 사이드바가 들어가게 될 것 같아요

[@hithere0929]

선생님 카카오맵api를 써서 혼자서 프로젝트 만들고 있는 학생인데요 위에 10분의 1은 nav바 나머지는 카카오맵에 마커를 띄우고 있는 형태 입니다. input태그는 nav바에 넣고 사이드바 div는 인접하지 않는 아래에 써야만 하는데 구글링을 해봐도 input[]:checked 항상 이 형태로 쓰던데 이 방식은 꼭 인접해야만 하나요??? 어딜 찾아봐도 시원하게 해결책이 나오지 않아서 혹시나하는 마음에 댓글을 달아봅니다. 인접하지 않은 상태에서는 label + div를 어떻게 변경해야할까요

[@Fledo_]

네이버 웨일 사이트에 들어가면 상단바에 가까이 가면 나오는 상단바를 만드는 방법도 강의를 통해 알려주시면 감사하겠습니다.

[@주성재-s9q]

안녕하세요 ㅠㅠ 정말궁금해서 여쭈어봅니다 transition 기능을 쓰려고 하는데 HTML 에서 그기능을 컨트롤 스페이스바해서 쓰려고 치는데 그 기능을 지원을안해주는데 이럴때 인포터라던지 그런게문제인가요?

[@최진호-w2k6c]

영상 정말 잘 봤습니다! 근데 이걸 반응형 웹 제작할 때 써도 상관없을까요??

[@codingnam]

직접 적용해보세요 ~ 저는 카페24쇼핑몰 커스텀 하면서 사용했는데 아직도 사용중이더라고요

[@로즈밍-g6m]

쵝오! 개발자 필수 영상...ㅎㅎ

[@codingnam]

개발자 필 .. 수 .. ? ㅋㅋ 가 .. 감사합니다 ~

[@아몽-h8k]

블로그에서 html파일 다운이 안되는데, 이제 막아놓으신건가용? ㅠㅠ

[@씨씨-q6w]

이미지슬라이드 탭메뉴 모달 드롭다운메뉴등등 실질영상코딩이많았으면좋겠습ㄴ다

[@응원더민주]

운영자님 도움되는 강좌 감사드립니다. 혹시 사이드메뉴에서 메뉴를 클릭하면 해당페이지가 보이는 영상도 부탁드려도 될까요? 코남님 강좌는 필요한 부분을 잘 설명해주셔서 잘보고 있습니다.

[@codingnam]

클릭하면 해당 페이지가 보인다는게 페이지 이동을 뜻하는지? 아니면 어느 영역에 특정 페이지가 노출되는걸 말씀하시는건가요? 저는 웹에서 비쥬얼적으로 보이는 효과들을 주로 제작하려고하는데 예시 사이트 경로를 공유해주시면 확인 후 알려드릴 수 있을것 같아요 ~

[@응원더민주]

먼저 바쁘실텐데 답글 주셔서 감사드립니다. 예를 들어 카톡 대화방 오른쪽 상단의 삼선메뉴를 누르면 알려주셨던 것처럼 사이드메뉴가 나오고 그중 뮤직(메뉴)를 누르면 뮤직페이지(내가만든페이지)로 다시 ← 누르면 삼선메뉴가 보이는 방법을 문의 드렸습니다. 질문이 잘 되었는지 모르겠습니다.

[@codingnam]

@@응원더민주 제가 잘 이해했는지는 모르겠지만 그렇게 하려면 사이드 바 영역내 메뉴버튼을 눌러서 팝업형식으로 띄우는 효과가 필요할 것 같습니다. 팝업이 띄워져서 닫기버튼을 누르면 팝업만 닫혀서 사이드바 있는 페이지가 다시 보여지는 형식으로 작업해야할것 같은데요? 팝업 효과는 kzbin.info/www/bejne/e5LRZ4OFiNNrpKM 이런형식이나 kzbin.info/www/bejne/nmicqn2ficqhe9E 이런형식을 이용해서 팝업을 띄웠다가 닫는 형태로 작업해보면 어떨까요?

[@jennifer6773]

감삼니다, js그러면 안써도 웹접근성이나 회사에서 괜챤을까요??

[@jimujjang]

찾던건데 너무 감사합니다ㅜㅜ!!! 한가지 질문이 있습니다만 이 효과와 반대로 평소에는 열려있다가 버튼을 누르면 닫히고 다시 누르면 열리는 건 참고 소스에서 어느부분을 수정하면 될까요? ^^

[@codingnam]

input을 사용하는 것이기에, 처음에 열어 놓으려면 input 태그에 checked 속성값을 부여해 놓으면 이미 체크되어있는 상태로 나타나기 때문에 팝업이 열려있습니다

[@jimujjang]

@@codingnam 감사합니다. 한번 해보겠습니다!!

[@Jay-jh9cm]

항상 좋은 영상 감사합니다!! 근데 relative는 릴레이티브가 아니라 "렐러티브",,,

[@ys-hd9ct]

메뉴 이외에 공간을 누르면 메뉴가 들어가게 할수도 있을까요?

[@codingnam]

kzbin.info/www/bejne/fKmTq6mfoLaMa5o 아마도 이게 해결책이 될것 같은데 한번 봐주세요 ~

[@No_Exit_KangMina]

2021.05.10

[@이희수-y9b]

근데 보통 스크립트를 써서 만들쥬?

[@kuhyeran]

버튼하나 눌렀을때 이렇게 나오게는 css로 할 수 없는걸까요?

[@codingnam]

label을 이용해서 버튼으로 만들고 id값으로 input을 연결해준다음 체크되는 속성값을 이용해 사이드 메뉴를 나오게 할 수 있습니다 kzbin.info/www/bejne/fKmTq6mfoLaMa5o 여기 한번 보시겠어요?

[@오용현-h9n]

z-index를 사이드바가 아닌 체크박스에 넣어야 되지않나요?

[@codingnam]

체크박스에 z-index를 넣은 결과가 어떠셨어요? 제 메일로 소스를 공유해 주실 수 있으세요?

[@이종법-o2m]

만약 -300px인데 화면 축소 시킨다면 안눌린 사이드바가 보이겠네요??! 혹시 그렇다면 축소시켜도 현재 화면을 유지시키는 방법이있나요?

[@codingnam]

화면을 축소시켜도 position:fixed로 인해 기준점이 브라우저 창에 고정되어있어서 사이즈를 축소시켜도 그 위치 그대로 있습니다. 소스를 직접 만들어서 테스트 해 보셨나요?

[@이종법-o2m]

@@codingnam 넵 정말 안보이내요. 감사합니다 죄송하지만 다른질문도 가능할까요? 어떤경우에는 css 백그라운드 배경을 통해 이미지를 삽입하던데, 이것이 반응형웹에서 어떤 기능을 하는것인가요?? 구글링을 해도 잘안나오더라구여 ㅠㅠㅠ 부탁드립니다

[@superpil2695]

대에에박

[@goyangyi]

형 ..... 왜케 영상 잘만드러 근데 체키드 아니고 쳌트 임 ㅋㅋㅋ checked ㅋㅋ

[@0z2ae]

흑흑 다 되는데...바가 나왔을 때 X 버튼이 바에 깔린 모양입니다 어떻게 해야할까유?

[@codingnam]

인풋이 체크 되었을 때 엑스 버튼에 z-index값을 바보다 높은 값으로 주어보세요

[@브라이언-l9i]

사이바에 글씨나 링크, 이미지는 어떻게 넣나요?

[@codingnam]

움직이는 사이드영역 DIV 안쪽에 텍스트를 넣으면 됩니다 이미지도 안쪽에 태그로 넣으면 됩니다 ~

[@브라이언-l9i]

감사합니다

[@야채튀김-o6d]

근데 하고나서 삼단메뉴아이콘이 안뜨는건 왜 그럴까요?ㅠ

[@codingnam]

예제파일을 받아서 소스 비교해 보세요 ~ 그랴도 안되면 이메일로 소스를 보내주세요 !

[@min_unseal]

@@codingnam 덕분에 겨우 해결됬습니당 ㅠㅠ 감사해요!

[@midnightwave86]

코막히는남자