스크립트 없이 만드는 슬라이드 효과 [HTML+CSS{코남}]

[@codingnam]

위 컨텐츠에서 이미지에 링크를 활용하기 위해서는 li 바로 안에 있는 a태그를 div로 바꾸고 img 태그 앞에 img 태그 뒤에 이렇게 넣어서 사용해야 합니다 !! 이렇게 바꿔야 하는 이유는 a태그 안에 좌우로 슬라이드 되는 버튼이 함께 들어있어서 이미지를 클릭하면 링크로 사용하고 싶은 분들은 태그를 바꾸고 추가해서 사용하셔야 할 것 같습니다 !

[@dlsrkswhqto4]

안돼용~

[@sookis1715]

와... 잘보고갑니다~!!!

[@jeanmmm]

이런 걸 배워야하느넫...ㅋㅋㅋㅋ감사합니다

[@saewoocrackers]

감사합니다 정말 도움이 많이 되었어요!!~~~

[@복숭아-d5r]

최곱니다 ! 명강의 ... 이직 준비를 위해 열심히 복습해봅니다

[@codingnam]

감사감사 또 감사 ~

[@user-ix6fw9gt9z]

왜 사진이 아래로 주르륵일까요? ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

[@영석-g3d]

선생님 진짜 감사합니다 이 새벽까지 일주일동안 머리쥐어뜯다가 겨우 찾아냈네요 감사합니다 구독박을게요

[@soonupy]

swiper.js로 구현해서 사용하고 있는데 물론 본인이 편한 방법이 좋겠지만, 강의해주신 내용와 swiper.js 라이브러리중에 어떤 것이 더 효율적이라고 생각하시나요?! 강의 내용이 너무 좋아서 뭐가 더 나을지 생각이 참 많아지네요...

[@ShibaHyvaa]

우와. 이거 만드시느라 고생 많이하셨을 듯하네요. 엄청 자세해서 도움 많이 되었습니다. 혹시 네이버 모바일에서 손가락 두 개로 페이지 이동하면 탑 메뉴에 있는 것도 같이 움직이던데 이것도 슬라이드 효과인건가요?

[@로또1등당첨자나]

정말 대단하세요 넘넘 감사드립니다 ~!!

[@김순대-x7f]

바로 구독했어요...말만 하는게 아니라 영상으로 설명하는거 엄청 노가다실텐데 감사합니다 ㅠㅠ

[@siyoonjung2879]

설명 도랏네 굿굿

[@codingnam]

감사합니다 ~

[@Happiness-s5v]

와 대박 ㅠㅠ 국비수업으로 첨 배우고 있는데 진짜 머리털 뜯을만큼 스트레스 만땅받았었거든여... 이 강의 들으니까 정리랑 복습과 이해안되던것도 싹 잡히네요 👍😊 구독박습니다

[@워니-i4p]

정말 도움이 많이 되었어요!!구독해야겠어요ㅠㅠ!!최고

[@codingnam]

정말정말 감사합니다 ~

[@동뎅-i5f]

혹시 보실지모르겠지만 ㅠ 슬라이드를 하나더추가하려고하는데 아이디만바꿔서생성했더니 (css도 다바꿔줌) 한개만작동되고 이름바꾼건작동이안되는데 여러개를 쓸수있는 방법은 없을까요..?ㅠㅠ

[@codingnam]

음 ;; 코드를 이메일로 보내주시면 확인해서 답변드릴 수 있을 것 같아요~

[@SPECIAL_TEAM]

오!!!! 안그래도 올려주시길 바라고 있었는데!!! (자동 슬라이드 기다리고 있겠습니닿ㅎㅎㅎㅎㅎㅎㅎㅎㅎ)

[@인이-h3w]

진짜 설명을 너무 잘해주시는거 같아요 내용이 딱딱들어와서 따라하기에도 딱 좋습니다 코남님꺼보고 코딩하니까 도움많이되네요

[@codingnam]

도움이 되었다니 크흑 ㅠ 감사합니다 ~

[@고양이정배]

유용한 팁 감사드리고 새해 복 많이 받으셔요^^ 혹시 네이버 블로그 상단탑도 이렇게 프로그래밍 가능할까요?

[@hyunew]

jQuery 같은걸로 함수화할수는 없을까요? 사진 개수가 다를때마다 다르게 해야하니 불편하네요

[@codingnam]

제이쿼리를 쓸 줄 안다면 함수화 해서 쓰기 보다는 플러그인을 사용하는게 훠어어어어어얼씬 편하고 쉽지요 ~ 단순히 html과 CSS 만으로 만들었는데 그 안에 들어가는 레이아웃과 스타일의 이해를 돕기위해 제작한 컨텐츠라 생각해주세요 ~

[@hyunew]

@@codingnam 아하 감사합니다. 그리고 또 slick이란 것도 있네요! 이거 쓰니깐 완전 편해요! ㅎㅎㅎ

[@codingnam]

@@hyunew slick 도 있고 swiper도 있고 bxslider 도 있어요 ~

[@hyunew]

@@codingnam 오~ 이제 막 웹쪽을 공부하고 있어서 새롭게 알게되는 것이 많네요. 이번에 깃허브 블로그를 시작하면서 이것저것 보고있습니다. 그러다가 이렇게 좋은 채널 알게되었네요.

[@domgo241]

저는 요즘 JQuery에서 퓨어 JS및 CSS로 교체하고 있는 상황이라 골치가 아프네요 ㅠㅠ

[@rickedward4871]

코드가 없는데 다운받아서 어케쓰죠?

[@jenniekim7366]

영상 너무 잘 만들어주셔서👍🏻👍🏻전 학원다니고 있는데 왜 영상보고 더 이해가 잘 갈까요...🤔

[@codingnam]

앞으로도 쉬운 컨텐츠로 만들어 보겠습니다!!!

[@유민수-i7s]

white-space nowrap가 안벅는데 뭐가 문제일까요 가로로 안되고 세로로 쭉쭉 됩니다. 도와주세요

[@몰랑-q3d]

헐...이렇게 간단하게 만들 수 있다니... 감사합니다.

[@codingnam]

컨텐츠 봐주셔서 감사합니다 ~

[@EZGardening]

잘 배웠습니다.,, 오토플레이 저도 기대합니다 ^^;;;

[@scipioafricanusyang6289]

다운로드는어디서받나요?

[@codingnam]

내용 더보기에 블로그 링크로 이동하시면 원본 파일 첨부해두었습니다 !

[@이경호-f7s]

진짜 대단한거 같아요 쉽게 설명도 해주시고 ㅋㅋ 항상 신청하고 있습니다.

[@남의집구경용]

정말 감사합니다 ㅠㅠ

[@codingnam]

컨텐츠 봐주셔서 감사합니다 ~

[@똥꼬똥-g1e]

코남 형.... 나또 왔어... 슬라이더만 사용하는게 아니라 어떠한 글 바로 밑에 슬라이더를 주고싶은데 그럴때는 무슨 코드를 넣어야해?...

[@똥꼬똥-g1e]

지금 공부하고있는데 계속 공백이 생겨서 미칠거같아 ㅠㅠㅠ

[@codingnam]

@@똥꼬똥-g1e 또 왔구나 오징이 ~ 요새 자주 오네 !! 노력하는 모습이 보기 좋다 ! 어떠한 글 바로 밑에 슬라이더를 주고 싶은데 그럴때는 무슨코드? 그냥 저기 슬라이드 예제파일 받아서 어떠한 글 바로 밑에 넣으면 안될까?

[@육군키우기]

다 너무좋은데 화살표가 사라진걸 찾을수가없어요 ㅜ 예제랑 똑같이해도 사라지네요 어디간걸까요..

[@codingnam]

예제랑 똑같이 하셨다고요? 그럼 예제파일을 다운받으셔서 비교해보세요 !! 예제파일에서는 제대로 나오거든요 ㅠ

[@육군키우기]

@@codingnam 답변감사합니다 네 예제 비교해서했었어요 답은 좌우로 넘기는 LABEL버튼에 대한 스타일이 css로 넘어가면 사라지고 html로 추가하면 보이더라구요..!

[@user-md4lp9gl2p]

사진을 세로로 키울 수는 없나요?

[@jjiking]

흐앙 너무 좋은 강의 감사합니다!! 따라해보았는데 완성된 모습은 완벽한데, 화살표를 클릭하면 다른 사진으로 넘어가지가 않아요 ,,, 또르륵

[@codingnam]

내용글에 블로그 링크로 이동하시면 예제파일 받으실 수 있으니 코드를 비교해보시면 좋을 것 같아요 ! 감사합니다

[@띠쁘-x6g]

방향버튼 바깥에 있는 슬라이드는 어케 만드나요ㅠㅠ?

[@okohjiae_story]

우와!! 퇴근하고 봐야겠어요👻👻👻

[@domic93]

.section [id="slide01"]:checked ~ .slidewrap .slidelist > li { transform: translateX(-0%); } 다른 부분은 괜찮은데 이 CSS 때문에 확장성이 떨어지는데 어떤 방법이 없을까요? 그냥 이미지 주소가진 배열만 던져주면 사용할수잇게 컴포넌트로 만들려고 하고 잇거든요

[@codingnam]

스크립트를 적용할 꺼라면 굳이 CSS를 이렇게 적용안해도 됩니다. 이 컨텐츠는 스크립트 없이 만드는 슬라이드 효과라 .. 원하는 방법과 맞지 않을 수도 있습니다 ㅠ

[@domic93]

@@codingnam 진짜 힘들게 어떻게든 만들엇어요 ㅠㅠ 코남님 도움을 가장 크게 받앗습니다 css가 어렵네요 좋은 강의 감사합니다

[@scriptnoob134]

항상 좋은 교육 감사합니다

[@이승훈-q1k]

슬라이드 이미지 각각에 이미지맵을 만들어서 특정 영역을 클릭하면 사이트로 연결되게 하려 합니다. 어떻게 구현할 수 있나요? 맨 첫 이미지에 이미지맵을 설정하니 나머지 이미지에도 동일 위치에 이미지맵이 설정되네요

[@이승훈-q1k]

아 방금 이미지맵 설정할 때 id값, name 등을 다르게 설정해주니까 올바르게 적용되는군요..! 좋은 영상 감사합니다.

[@codingnam]

@@이승훈-q1k 감사합니다 ; )

[@user-mq4wh4iw7w]

가로길이 말고 세로길이는 어떻게 줄이나요?ㅜㅜ

[@codingnam]

세로길이는 따로 정의하지 않았기 때문에, 이미지의 높이값으로 높이조절된다고 보시면 됩니다! 부모요소 중 최대 넓이인 1200px을 슬라이드로 사용할 이미지 넓이값으로 수정하면 됩니다.

[@cozyansound]

버튼은 버튼대로 넘어가면서 / 손으로 사진을 쓸면 사진이 넘어가게는 어떻게 해야하나용ㅠㅠ

[@codingnam]

그건 커서의 클릭과 이동하는 좌표에 따라 계산해서 슬라이드 적용하는 것이기에 스크립트를 이용해서 만들어야 합니다

[@Ozee486]

드디어!! 퍼블리셔로 취업했는데 슬라이드 만들다 생각나서 들렸습니다!! 요즘은 많이 바쁘신가요?? 코남님의 깔끔한 설명과 영상 더 보고싶슴니다.. 마니 올려주세요‧⁺◟( ᵒ̴̶̷̥ ·̫ ᵒ̴̶̷̣ ) 항상 감사합니댯•┈┈┈•┈┈┈•┈┈┈

[@전상진-n4k]

버튼을 눌러도 전환이 안되요

[@숨덕탈출]

궁금했던건데 우왕

[@황준영-x9k]

예제도 다운받아봤구 예제이용해서 오류까지 다 잡아내서 처음사진이랑 화살표까지 잘나오는데 그이후에 화살표를 누르면 사진이 이동하질 않습니다.. 뭐가문제일까요?

[@codingnam]

테스트를 두가지를 진행해보세요 ~ input에 display를 가리지 말고 block 처리 해서 꺼낸다음에 화살표를 클릭했을 때 다음 input이 체크가 되는지, 만약 체크가 된다면 :checked ~ 로 슬라이드 페이지 이동 스타일에 적용된 animation이 제대로 적혀있는지 확인해 보면 될 것 같아요 ~

[@KimJadu-e8h]

이미지를 어디칸에 넣어야되여? 이미지를 silde01.jpg라고두면되나요..?

[@codingnam]

이미지를 덮어 씌워도 되고 코드에 img 파일을 빼고 만든 이미지를 넣으면 됩니다

[@plmx21]

코남님 영상 잘보고있습니다 부탁드릴게있는데 웹?을 만들어서 console alert창을 (예로)10번정도 뜰수있게는 못하나요?

[@codingnam]

웹?을 만들어서 console alrt창을 ??? 이게 무엇을 의미하는지 이해가 잘 안가요 ~ alert 은 스크립트 영역이예요 ~

[@codingnam]

@@plmx21 이건 제이쿼리로 가능합니다. alert('hi'); 이런식으로 사용할 수 있는데 그럼 hi 팝업이 나타나요 그럼 저 구문을 복사해서 계속 다른 문구로 사용하면 얼럿창으로만 계속 띄워지게 됩니다.설명이 부족할 수 있으니 구글검색창에 'alert 띄우기' 라고 검색해보세요 ~

[@plmx21]

@@codingnam 감사합니다!!~

[@luullluul]

모바일로도 자동 적용 될까요 ? (클릭대신 터치)

[@codingnam]

네 모바일에서도 작동 됩니다 ^-^

[@efefaw457]

영상하고 똑같이 했는데 자꾸 이미지의 왼쪽이랑 윗부분에 공간이 생겨요 div를 만들어놓고 그 안에 이미지를 놨는데 이미지가 div안에 꽉 안차는 느낌이에용 아무리 해도 공백이 없어지질 않네요 왜 이런 걸까요 ㅠㅠ

[@codingnam]

혹시, 이 컨텐츠 파일만 작업하시는 건가요? 리셋 CSS를 적용해서 브라우저의 기본 패딩과 마진을 없애는 값을 줘 보세요 ~ 예를 들면 * {margin:0;padding:0;} 이렇게요 ~

[@min_unseal]

제가 만들고있는 웹에 적용해봤는데요ㅠㅠ 화살표는 사진보다 위로 가고 슬라이드가 되지를 않네요,, 그리구 화살표가 지맘대로 위쪽에 고정되어서 클릭도 안되는데 왜그럴까요,,ㅠㅠ흑

[@codingnam]

으악 ㅠ 혹시 작업한 코드를 이미지 파일과 함께 메일로 보내주실 수 있나요?

[@min_unseal]

@@codingnam 정말 감사합니다! 지금 보내드렸습니당 ㅠㅠ

[@codingnam]

@@min_unseal 답변 드렸습니다 이메일 내용글과 소스를 확인해보시기 바랍니다 부디, 원하는 부분에 대한 효과가 적용되길 바라요

[@min_unseal]

@@codingnam 방금 확인했는데요 ㅠㅠ 진짜 최고세요! 친절하시구 설명도 쏙쏙들어와요ㅠㅠ흥하세요!!!~감사합니다 ㅎ

[@김지은-n6m9v]

와! 제가 너무 구현하고 싶었던 ui입니다ㅠ pyQT로는 구현할 수 없을까요?

[@codingnam]

음 ㅠ 그것까진 잘 모르겠네요 ~

[@hun1548]

선생님 ! 아직도 댓글을 보시는지는 잘 모르겠지만 궁금한게 있어 댓글 남기게 되었습니다. 아이디 만 바꿔서 여러 슬라이드를 생성하면 한개만 작동하고 다른 슬라이드는 작동을 하지 않습니다 . 여러개 의 슬라이드를 사용하려면 어떻게 해야되나요 ?

[@codingnam]

안녕하세요 제가 생각했을 때에도 아이디만 바꿔서 여러 슬라이드를 생성하려 할 것 같은데, 무엇이 문제인지는 코드를 봐야 알 것 같거든요? 이메일로 해당 파일과 스타일을 보내주시면 확인해보고 답변드릴게요 !!

[@keepitbrief.staycalm]

캬 이번팁도 진짜 유용하네요. css만으로 가능한게 신기합니다 ㅋㅋ 진행하면서 ul li 정렬도 그렇고 radio label 응용법도 많이 배우고 갑니다

[@codingnam]

배움이 되는 컨텐츠라니 크흑 앞으로 더 많은 컨텐츠를 다룰 수 있도록 노력하겠습니다 ~

[@고훔]

안녕하세요 코드 보고 감사히 쓰고있습니다. html에 코드를 적고 태그 안에 코드들을 css파일로 연결하여 사용할려고 하는데 css파일이랑 연결이 안되는것 같습니다 css파일 이름을 slide.css라고 했을때 로 적었습니다 해결법을 아실까요..?

[@카인0416]

안녕하세요! 웹 이제 막 시작한 초보인데 영상을 보고 많은 도움을 받았습니다! 혹시 슬라이드 이미지가 한 이미지가 아닌 태그 에 있는 이미지들을 통째로 다음 태그로 넘길 수 있는 방법은 없을까요?ㅠㅠ

[@박찬영-z5r]

저만 헷갈린건지 모르겠는데 css 스타일 지정할 때 첫부분 *{ margin:0; padding:0;} 설정이 동영상화면에서는 안보여서 많이 헤멨어요 ㅠㅠ 그래도 동영상 완전 도움되었습니다!

[@codingnam]

동영상에서는 기본사항들은 다 거르고 핵심만 다루기에 기본패딩과 마진에 대한 리셋 CSS는 다루지 않았어요 ~ 혼동이 되었다면 죄송합니다. 그래도 이번기회에 이 부분에 대해 왜 안되었는지 기억이 되셨으리라 생각이 들어지네요 ~

[@수경-d9f]

우선 좋은강의 올려주셔서 정말 감사합니다 ㅠㅠ 덕분에 잘 배워가고 이해도 했습니다! 근데 여기서 이미지 하단에있는 동그란거? 있잖아요 그걸 이미지안에 넣고싶은데 absolute를해도 안되더라구요 이거 어떻게하는지 아실까요..ㅠㅜㅜ

[@codingnam]

absolute를 주고 z-index도 주셨나요? z-index가 없으면 우선순위가 밀려 아래로 깔릴 수도 있어요 ~

[@수경-d9f]

@@codingnam 답변감사합니다!! 둘 다 줬는데도 안되네요..ㅠ...

[@codingnam]

@@수경-d9f ㅋㅋ 혹시 코드를 그 부분만 이메일로 (CSS도 함께)보내주실 수 있으세요?

[@SPECIAL_TEAM]

코남님! 질문 있는데요. 이번에 업로드하신 자동 슬라이드 영상에서는 왜 6:49와 같이 '>'를 사용하지 않으신건가요...?

[@codingnam]

지금 코드만 보았을 때 사용하나 안하나 똑같습니다. 하지만 6:49 와 같이 > 는 li 안에 또 ul 과 li 가 있을 때 자식요소 만 선택할지 자손요소를 선택할지를 구분해서 스타일을 주기 위해 쓰는 겁니다. 이 컨텐츠에 사용된 > 자식요소 선택자를 안써도 상관없습니다. 왜 쓰이는지를 더 잘 알 필요가 있을 것 같아 이 컨텐츠에는 사용하고 자동 슬라이드에는 사용 안한건데, 스페셜팀님이 제대로 집어 주신거예요 ~

[@SPECIAL_TEAM]

@@codingnam 오 그렇군요!! 덕분에 하나 더 배워갑니다ㅎㅎ 친절한 답변 감사드립니다:D

[@w34dfkgnrirtkldfgi3user]

어제부터 보는데 ㅠㅠ 화살표를 맨 끝으로 둘 순 없나여ㅠㅠㅠ? 사진과 겹치는데

[@codingnam]

이미지를 담고 있는 틀 밖으로 화살표를 내보내고 싶단 말씀인가요?

[@w34dfkgnrirtkldfgi3user]

@@codingnam 넵!

[@codingnam]

@@w34dfkgnrirtkldfgi3user 블로그 링크로 이동하면 업로드된 파일 중 두번째 압축파일에 바깥에 방향버튼이 있는 파일을 업로드했습니다 파일을 받아서 확인해 보세요 ~ 슬라이드에 적용된 소스는 다를 수 있습니다. 참고하세요

[@학성준]

저 화살표가 이미지에 표시가 되지 않아요..

[@codingnam]

예제파일을 받아서 작성하신 코드와 비교해 보세요 ~

[@Seoul_KNPA]

슬라이드의 위치를 바꾸고 싶은데 어떻게 해야 하나요 ? 예) 오른쪽 하단에 배치

[@codingnam]

슬라이드의 위치? 슬라이드 되는 버튼의 위치를 말씀하신건가요?

[@Seoul_KNPA]

@@codingnam 아뇨 말그대로 사진이 나오는 슬라이드 화면의 위치를 바꾸고 싶습니다.

[@codingnam]

@@Seoul_KNPA li안에 들어있는 이미지를 바꾸면 서로 위치를 바꾸게 되는 것 같은데 이걸 말씀하시는건가요?

[@king_daehan]

슬라이드의크기를 좀 작게 하고싶은데 어떻게 해야하나요??

[@codingnam]

가로사이즈를 줄이면 되지 않을까요? 위 컨텐츠로 보면 .slidewrap 클래스에 max-width 값이 1200px로 되어있는데 원하는 가로 사이즈로 바꾸시면 될거예요

[@박수훈-t7e]

@@codingnam 계정을 바꾸고있어서 알림이 왔는지도 몰랐네요 덕분에 잘알아갔습니다 다음영상도 잘 부탁드려요!

[@mchs9698]

웹페이지 만드는것도 부탁드립니다!!

[@codingnam]

지금 컨텐츠를 만들 수가 없어서 ㅠ 시간이 된다면 도움이 되는 영상을 준비해볼게요 ~ 감사합니다

[@김희석-u3o]

안녕하세요, 질문이 있어 덧글 남깁니다. 한장씩 슬라이드가 아닌, 많은 이미지들이 있어 5~6장 이미지를 기본으로 놓고, 클릭하면 3~4장씩 넘어가게 하려면 어떻게 코드를 조정해야 할까요?

[@codingnam]

위 동영상 코드에는 li가 슬라이드 한장을 의미하죠? 그 안에서 또 리스트 태그로 4분할한 요소를 만들면 한 페이지에 4개 이미지가 보이고 4개 이미지가 전환되는 효과가 나오지 않을까요?

[@박세준-t7o]

#slide01 :checked ~ [class 명]{ transfomr: translateX(-100%);} 이 문법이 계속 적용이 안되는데 왜 그런지 알 수 있을까요..ㅠㅠ label로 체크 넘어가는것도 잘되는데 말이죠ㅠㅡㅠ

[@codingnam]

CSS로 작성한걸 그대로 옮기신거 맞나요? 일단 :checked가 떨어져 있어요 그리고 트랜스폼 스펠링에 오타가 있어 보이는데 이걸 수정해 보시겠어요?

[@박세준-t7o]

@@codingnam 답글 너무 감사합니다. 오랜 사투 끝에 해결 했었는데요. 정말 :checked 가 떨어져있으면 작동하지 않더라구요. 또 class 명에 대문자나 언더바 같은게 들어있어도 작동이 안되던데 이건 일시적인 오류인건지는 모르겠습니다. 또 태그와 태그 사이가 다른 태그로 묶여있어도 작동하지않고 같은 같은 영역에 있을 때 정상적으로 작동하더라구요.. 구글에 검색해도 잘 나오지 않아 적용해보는데 많이 애먹었던 것 같습니다. 영상 잘 보고 있습니다 항상 코남 같은 분 들이 있어 힘이 됩니다:)

[@codingnam]

@@박세준-t7o 클래스나 아이디를 만들 때에도 법칙이 있어요 첫글자는 a-z A-Z 로 된 문자로 시작해야하고 등등 ~ 구글에서 찾아보시면 어떻게 사용해야하는지 바로 알 수 있습니다

[@박세준-t7o]

@@codingnam 또 하나 알아갑니다😄

[@blairekim2272]

알려주신대로 css와 html만으로 슬라이딩 화면을 구현했는데요 화살표 div를 함께 보여주신 예제처럼 모션을 주려면 뭘 건들여야할까요?ㅠㅠㅠㅠㅠ

[@codingnam]

예제파일 받아서 비교해 보셨을까요? 아니면 제 메일로 작성한 코드를 보내주세요 ~

[@blairekim2272]

예제파일로 확인했습니다 감사합니다~ 근데 역시나 어렵네요ㅠㅠㅠㅠ

[@codingnam]

@@blairekim2272 수고하셨어요 ㅠ

[@귤-p2k]

어느정도 잘 따라했는데 첫 번째 슬라이드 사진을 제외한 나머지 슬라이드들에는 앞에 슬라이드 사진이 보여요 ㅠ 그리고 슬라이드 안에서 화살표가 같이 움직이면서 슬라이드 밖에도 화살표가 있네용 ㅠㅠ 해결 방법 없을까요? ㅠㅠ

[@codingnam]

예제파일 업로드 되었는데, 내용글에 블로그 링크를 통해서 다운 받아서 비교해보시기 바라요 ~

[@Jerry-e7p]

영상 감사합니다~

[@codingnam]

고맙습니다 ~

[@soon-rt9tg]

대박 감사합니다!!!!!!

[@codingnam]

오 1등 댓글!!! 감사감사 또 감사 ~

[@soon-rt9tg]

@@codingnam 아.. 이렇게 댓글 남겨주실줄 알았으면 더 정성껏 쓸껄.. ㅋㅋ;; 코남님 궁금한게 있습니다. html, css 공부 어떻게 하셨나요?? 지금 웹디자인 일을 하고 있는데 css 기술이 너무 부족하네요ㅠㅠ

[@codingnam]

@@soon-rt9tg 저는 ... 음 .. 유명 사이트에 들어가서 소스보기 해서 어떻게 스타일줘서 레이아웃 구성되어있는지 같이 남의 코드들을 분석하는 것부터 했어요 지금도 그러고 있고, 이렇게 하면 이런형태가 되는구나 하는 식으로 이해하고 기억하는 방식으로? 그러다 보니 똑같이 코딩하게되고 똑같이 코딩하다 보니 이렇게 하니까 더 편하다는 것들이 생기게 되고 그랬던거 같아요, 저도 진행중이에요 ㅋㅋ 웹코딩에 완결은 없어요

[@달콤한소금-c7u]

"노 랩"(W는 묵음, 감싸지 않는다 라는 뜻)입니다!!

[@codingnam]

감사합니다! 노랩(nowrap)!! 잘 알겠습니다 ~

[@0z2ae]

요소가 내려가면서 없어지고 올라오면서 생기는 애니메이션 쉽고 빠르고 HTML CSS 만으로 해주실 수 있나욧?

[@codingnam]

제가 댓글을 확인못했었네요 ~ 내려가면서 없어지고 올라오면서 생긴다는건 if 처럼 만약이라는 가정이 들어가는데 이런경우에는 CSS로만 제작하기에는 어려워요, 그런건 스크립트로 제작을 해야할것 같습니다. 하지만, 웹 UI로 많이 사용되는 거라 컨텐츠로 만들어 보겠습니다. 혹시나 참고할 수 있는 사이트주소를 알려주시면 참고해볼게요 ~

[@HhY-tp6tp]

화살표이미지가 적용이안돼요 ㅠㅠ 혹시 소스코드 얻을수있는 방법이 있을까요?

[@codingnam]

내용글에 블로그 주소로 링크가 걸려있는데 확인해보세요 예제파일 업로드 되어있어요

[@sleeveswet.282]

포트폴리오 만드는 게 꿈이라 하나씩 배우는 와중에 진짜 단비같은 영상이네요, 정말 너무 감사해요ㅠㅠ 혹시 이런 슬라이드를 여러 개 만들기 위해선 어떤 id들을 바꾸고, 또 어떤 것들을 놔둬야 할까요? 통째로 복제한 다음 name, id와 slidewrap, slidelist, slide-control, control 등의 클래스를 개명or숫자 추가했는데 이미지에 화살표까지만 나오고 동작이 안 되네요... 지금도 댓글을 읽으실지 모르겠지만 정말 궁금해서 여쭤봐요...!!

[@codingnam]

안녕하세요 ~ name값은 한개 섹션안에서 작동할 버튼들이기 때문에 각각 슬라이드마다 특정이름을 공통으로 주면 됩니다 예로, slide01 을 name값으로 줬다면 slid01에서만 작동하는 input이 되는 겁니다. 이런식으로 slide01, slide02 추가해서 사용하시면 됩니다. id는 슬라이드 안에서 작동하는 한개 슬라이드 장면으로 이동하는 버튼이기 때문에 같은게 있으면 안됩니다. 비슷한 이름으로 만들어서 주어줘야 합니다. 예를 들어 slide01-01, slide01-02 이렇게 id값을 줬다면 첫번째 슬라이드에 첫번째 버튼(label)에준 id 이런식으로요. name값과 id 값으로 label과 input 그리고 css 선택자를 잘 사용하면 슬라이드 섹션은 두개 세개 그 이상 넣어 사용할 수 있습니다.

[@codingnam]

이해가 잘 안되신다면 일단 작성한 코드를 메일로 보내주세요 ~

[@sleeveswet.282]

@@codingnam 아니 이 늦은 시간에 답글을… 진짜 너무 감사합니다..!! 내일 꼭 시도해보겠습니다ㅠㅠ

[@sleeveswet.282]

@@codingnam 다시 뜯어봤는데 제가 이름을 이상하게 바꾼 건지 정말 모르겠어요... 일단 메일로 보내드릴게요, 천천히 여유 있으실 때 살펴봐주세요...! 감사합니다.

[@codingnam]

@@sleeveswet.282 답장 보내드렸습니다. 메일 확인해보세요 ~

[@vhsshdlajs16]

background center / 100%은 어떤 의미인가요?

[@codingnam]

background 속성에 대한 함축값입니다. url() 은 이미지 경로 center center 는 배경이미지를 요소에 대해 어떻게 보여줄지 인데 앞에는 가로 뒤에는 세로에 대한 값입니다. center center 이기 때문에 요소의 중앙에 맞춰 배경이미지가 가운데에 나타납니다. 그리고 / 100% 를 요소에 대해 이미지를 가로로 100% 맞춘다는 의미입니다.

[@vhsshdlajs16]

@@codingnam 답변 감사합니다.근데 이해가 잘 되지 않습니다.center center는 가운데 인건 알겠는데 / 100%에서 /의 의미는 순수하게 나누기 인건지?아니면 다른 의미가 있는건지?이해가 잘 되지 않네요.ㅎㅎ제가 이해력이 많이 부족한 듯 합니다.

[@codingnam]

@@vhsshdlajs16 / 이건 나누기가 아니고 구문이라고 이해하시는게 좋을것 같아요 함축으로 작성할 때 이걸 써야 위치 / 크기 이런식으로 작성한다고 보시면 될것 같아요~ 정어려우시면 구글에 " background 속성 " 이라고 검색하시면 많은 유저분들이 정보를 올려놓은 자료들이 많아요 그걸 참조해 보시는게 좋을것 같아요

[@byul-hana]

우와 대박 ㅋㅋㅋㅋㅋ 감사합니다!!!

[@codingnam]

대박 ~ 대 to the 박 ~ 대 투더 박 투더 대 두터 박 !! 그렇습니다 저는 아재 입니다.

[@user-zr2sz3xb4t]

그럼 아레로 슬라이드 안되게하는 코드 있나요?

[@codingnam]

CSS로 하려면 overflow:hidden;을 사용해보세요 영역을 벗어나면 가리는 효과라 스크롤은 안될겁니다 (다만, 드레그나 마우스 휠 클릭으로 이동은 될거예요)

[@seubo3o]

Gif로 해봤는데 계속 반복이 되요ㅠ 한번만 재생되게 할려면 어떻게 해야되나용?

[@codingnam]

gif가 한번만 재생이 되게 하려면 gif 저장 시 옵션설정하여 저장해야합니다. gif 저장시 무한반복 1번만 재생 등 설정할 수 있습니다. default가 아마 무한재생으로 되어 저장되는 것 같아요 ~

[@seubo3o]

@@codingnam 감사합니당!

[@avelim5673]

안녕하세요 코딩남님, 슬라이드 만드신거 따라서 만들어 봤는데, 슬라이드 버튼을 눌렀을시 전 사진과 그다음사진 왼쪽으로 한 20px정도 갭이 생기고 그전사진이 그 갭 사이로 보입니다 ㅠㅠ 뭐가 잘못된걸까요.. 두번째 사진 그리고 세번째 사진이 포지션이 바뀌는것 같아요ㅠㅠ

[@avelim5673]

Html에 사진사이즈를 같은 비율로 작성을 했는데도 두번째 사진부터 옆으로 20px정도 밀리고, 그 갭사이로 첫번째 사진이 보입니다 ㅠㅠ

[@codingnam]

혹시 작업하신 파일 이메일로 보내주실 수 있어요? 아니면 예제파일 받아서 비교해 보셨나요?

[@avelim5673]

@@codingnam 혹시 repl.it 주소 공유해드려도 될까요 ㅠㅠ 도저히 고칠 자신이 없어서... Transform:translateX(-5%) 로 바꾼뒤 right.png 포지션을 right:100px 로 바꿨어요 ㅠㅠ

[@avelim5673]

@@codingnam 이메일 conam@naver로 repl code보냈습니다 감사합니다 ㅠㅠ

[@avelim5673]

@@codingnam 예제파일 비교해 봤어요 ㅜㅜ 그리고 예제 파일 양식대로 다시 코드 썼는데... 오류가 또 생기더라고요ㅜㅜㅜㅜ 어디서부터 오류가 생긴건지.. html 초심자라서... 모르는게 너무 많아서 죄송해요 ㅠㅠ

[@우현우-t7o]

코남님 영상 보면서 열심히 배워가고 있습니다. 제가 포트폴리오를 만들려고 합니다. 막대바를 animation을 사용하여 구현을 하였습니다. 그런데 animation이 특정영역에 화면이 도착하면 시작을 할 수 있게 하고 싶은데 어떻게 해야할까요? 젤 윗 화면이 로드되고 난 후 animation이 바로 실행되서 내리고 나면 이미 막대바가 퍼센트를 나타내고 있습니다.

[@codingnam]

CSS에서는 화면 스크롤 이슈에 반영된 애니메이션을 적용할 수 없는걸로 알고있어요 ~ 스크롤되면 스크롤의 위치값과 요소의 위치값을 계산해서 클래스가 적용되 애니메이션이 작동되도록 하는 방식으로 제작해야하는데, 구현하려면 제이쿼리를 사용하셔야 합니다. 구글에서 'scrollTop 클래스 추가'로 검색하시면 많은 결과를 확인하실 수 있을거예요

[@efefaw457]

자네.. 프론트 엔드 해볼 생각 없나.....?

[@codingnam]

컨텐츠를요? 직업을요?

[@신은서-p9e]

슬라이드 이미지의 위치는 어떻게 조정하나여 ㅜㅜ

[@codingnam]

이미지의 위치 조정? 자세히 어떻게 하고 싶은지 .. 위치조정한다는게 이해가 안되는데 좀 자세히 부탁드려요 ~

[@kyungjunlee197]

뭐죠 이 엄청난 채널을 발견한 것 같은 느낌은?!?! 감사합니다!

[@codingnam]

엄청난 댓글을 발견한 것 같은 느낌? 감사합니다

[@pantor2021]

강의 영상 아주아주 감사합니다.~조그만한 질문한 하나 드립니다.^^ 위 코드를 적용해서 실행 해 봤는데, 왼쪽 부분이 짤리는 현상이 발생 하는데, 혹시 제가 잘 못 코드를 입력 했지는 궁굼합니다. 그래서 오른쪽으로 넘기면 기존 이미지가 조금 왼쪽 나오는 증상입니다.^^

[@remoo_dvie]

영상 감사합니다! 근데 혹시 저번에 올리신 화살표말고 이름을 클릭하는 것으로 이동하는 슬라이드 탭으로 하려면 어떻게 작성을 하면 좋을지 알 수 있을까요??

[@codingnam]

페이징으로 만든 동그라미에 스타일을 제거하고 텍스트를 넣으면 될 것 같은데요? 텍스트를 label로 감싸고 라벨에 for 속성으로 슬라이드 페이지에 연결하는 거죠!!!

[@항상긍정적으로-q4z]

코남님! 질문이 있습니다! 혹시 저 슬라이드 화면을 세로를 그대로 두고 가로를 넓힐려면 어떻게 해야하는지 알 수 있을까요? ㅠㅠ

[@대너리스-g4d]

css로 가능한건 스크립트로 안하고 css로 만드는게 더 좋은가요?

[@codingnam]

CSS로 가능한거라 .. 가능하다면 CSS로 하는게 좋을것 같아요! 태그도 직접 수정 및 삽입할 수 있어서 표준웹이랑 반응형 맞추기도 쉽고, 가볍고, 스크립트는 엔진을 돌려서 기어를 맞춰 동작시켜야 한다고 하면 CSS는 내가 옷을 직접 짜서 입으면 되는거니까 .. 적절한 예는 아닌것 같지만, 그렇지만 스크립트 없이 CSS로만 하려고 하면 조금더 복잡해지고 코드도 더 많이 사용하게 될 수 있어요 ~

[@김병수-p7t]

태그 아래에 태그를 사용하신 이유가 특별히 있나요? 태그에 href 속성을 부여하지 않으면... 그냥 태그처럼 사용하는 것인가요?

[@codingnam]

네 맞아요! 기본적으로 배너를 사용할 때 a태그의 링크형식으로 사용하는 걸 참조해서 예시코드를 만든 것 입니다. div로 하든 다른 요소로 하든 이후에 짜집기는 각자 필요에 맞게 만들어가시면 됩니다 ~

[@김병수-p7t]

@@codingnam 한가지만 더요! css에서 .section .slide_control [class*="control"] 에서 *= 연산자의 의미는 class값에 "control"을 포함하는 모든 애들을 의미하는 것인가요?

[@codingnam]

@@김병수-p7t 네 맞습니다. 속성 선택자 입니다. 속성 선택자에 대한 설명은 kzbin.info/www/bejne/Z2azYmlphpxlaqs 여기서 확인하실 수 있습니다

[@김병수-p7t]

@@codingnam 감사합니다. 사랑합니다 센세

[@똥꼬똥-g1e]

질문 이있습니다 코남 형! 1. 사진 8개로 슬라이더를 진행할려고하는데 무슨 코드가 필요한가요 ? 2. 사진 크기가 너무커서 사진이 짤리거나 엄청 크게 되는데 조절하는 코드가 무엇인가요 ? 제발 부탁드려요 ㅠㅠ

[@codingnam]

어 ~ 오징이 동생!! 사진 크기가 너무 커서 짤리면 부모 요소에 가득채울 수 있도록 을 줘봐 이렇게 스타일로 처리 할 수도 있어 ~

[@똥꼬똥-g1e]

@@codingnam 와.... 코남형 답글 ... 나진짜 이영상보자마자 바로 구독했어요 형 진짜 영상항상 보고 댓글 달게요!! 마지막 질문! 반복적으로 움직이는 동영상을 (gif)를 넣으려면 뒤에 img 말고 gif를 넣으면 되나요 ?

[@codingnam]

@@똥꼬똥-g1e 야하!!! 맞어 ~ src="이미지주소.gif" 요렇게 넣으면 끄읏!!! 그리고 이걸 또 가득 채우려면 아까처럼 스타일 주면 되고!!

[@SuccessShelf0103]

늘 좋은 강의 감사해요 ! 질문이 하나 있는데 label 안의 화살표 이미지가 padding : 30px 을 하지 않으면 보이지 않는데 그 이유가 뭔가요 ㅠㅠ ? 포지션:absolute랑 left, right 위치로만으로도 보여야 하는데 padding을 넣지 않으면 안보여요.

[@codingnam]

label을 화살표속성으로 사용할 때, 화살표 이미지를 background속성으로 주었기 때문에 배경이미지가 나타날 수 있도록 padding을 넣어야합니다

[@ソンチャンド]

안녕하세요. 예전부터 계속 코남님 영상 보면서 참고 했었는데요...완전 html과 css만 사용해서 다양한 기능 구현잘해주시는거 같아요!! 항상 감사합니다^^

[@codingnam]

참고가 되는 채널이라니 .. 뿌듯! 항상 와주셨군요 ㅠ 항상 감사합니다

[@쿠쿠는내사랑]

안녕하세요 영상 보고 많이 도움이 됬습니다!! ㅎㅎ 감사합니다 정말로 근대 한가지 궁금한점이 텍스트가 추가된 슬라이드 에서 이 슬라이드를 화면에 꽉차게는 못하나요? 슬라이드가 가운데에 존재하면서 양옆으로 공백이 존재하자나요? 저는 공백없이 높이만 조절하면서 양옆으로는 꽉찬 슬라이드를 구현하고 싶었거든요 ㅠㅠ 혹시나 어떤걸 수정하면 가능한지 알려주시면 감사하겠습니다!

[@codingnam]

동영상에서 보면 CSS 에서 .slidewrap 에 준 max-width:1200px; 이라고 되어있는 부분을 max-width:100%;로 바꿔보세요 ~ 최대 가로 넓이를 설정한 거라 최대 크기 1200px 로 잡혔는데 이걸 100%로 하면 가로로 가득 채워질 것으로 보임니다 ~

[@aaa-up9oq]

감사합니다. 근데 실무에서도 css로 만드시나요?

[@codingnam]

당연히 실무에서는 제이쿼리를 주로 사용합니다. 당연한건 아니고 무조건 ? .. 그리고 스크립트 슬라이드 기능들을 CSS에서 다 커버할 수 없어요. 저는 메인 슬라이드 말고 간단한 슬라이드 이벤트 배너형식같은건 CSS로도 작업합니다 이 컨텐츠도 가장기본요소의 슬라이드만 할 수 있기에 CSS로 만들어본거에요 ~

[@KimJadu-e8h]

왜안되지.. ㅜㅜ

[@codingnam]

예제파일 받아서 비교해보세요 ㅠ

[@jh.h92]

믿지마세요 하란대로 코딩하면 전혀 안됩니다

[@Ibk-c3x]

오토플레이 기대합니다 ㅠ

[@박정우-u1v6p]

ㄴㅇㄱ

[@codingnam]

나선환인가요? ㅋㅋ 정답!! "상상도 못한 정체"