Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
데모링크 요기 👇🏼-Demo Scroll:codepen.io/serranoarevalo/pen/xxdYBxZ-Demo Sticky:codepen.io/serranoarevalo/pen/YzVeMyJ-📌 니콜라스와 무료로 코딩 공부하기 nomadcoders.co
무료로 공부하는 법을 몰르겠어요ㅠㅠ
감사합니다!
sticky를 사용할때 높이나 폭이 선언된 부모와 sticky를 사용하는 자식 사이에 overflow가 선언된 element가 있다면 sticky가 적용되지 않습니다. 사용하실 분들은 참고하시면 좋을것 같습니다.
감사해요!
썸네일 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 요즘 뉴스 콘텐츠도 너무 좋고 더 재밌어짐 !
와 진짜 대부분 반응형을 만드려고 JS로 고통받던 부분들이 해결이 되어서 너무 좋습니다. 😄 특히 저 페이지 스크롤은.. ㅎㅎ 모바일에서는 어떻게 되는지 테스트 해봐야겠네요
썸넬 한사랑..산악회인가요ㅋㅋ
한코딩 산악회 입니당...-0- ㅎㅎㅎㅎ
@@nomadcoders 열쩡! 열쩡! 열쩡!
IE 빨리중지되야 한국 실무에서 신규기능 써볼듯
0:23 이츠 수폴트! 꿀팁 감사합니다🚀
퍼블리셔 겸 프론트엔드 개발자인데 좋은 정보 얻었습니다! 감사합니다.
아 ㅋㅋㅋㅋㅋ썸넬에 이끌려서 클릭했어요! 꿀기능 좋네요 얼른 써봐야겠어여!
썸넬에 끌려서 왔다가 니코샘의 배려심에 무릎을 탁치고 갑니다
죄다 ie 지원이 안되네요 ㅠㅠㅠㅠie지원해야하는 곳은 너무 슬프다
니콜라스 이런 최신 기법을 어떻게 이렇게 주기적으로 학습하실 수 있는지? 학습법과 참고할 만한 사이트 알려주는 컨텐츠도 좋을 것 같아요!!
부수입 끊는 소리 아님?
그건..... 영업기밀이죠....
근데 사이트는 어렵지 않게 찾을 수 있어요..연결의 연결이 발생하는 곳이 인터넷이니깐...
와 엄청 유용하네요 잘쓰겠습니다!
flex gap..! 초보 입장에서도 좋은 기능이네요 좋은 영상 감사합니다!
진짜 여기만큼 재밌게 설명해주는 곳 없는거 같아요 ㅋㅋㅋ임베 개발잔데 여기서 배워서 이직해야징
임베 안하시고 왜 웹을 하시려고하나요?
@@어슬렁-g9l 웹에도 관심이 생겨서 일단 공부를 해보려고 합니다!
position sticky 는 모바일 브라우저에서 지원안되는 폰이 몇개 있더군요.. 제가 저거썼다가 다시 뜯어고치고 다시 디바이스테스트 하러가고.
니꼬쌤 윈도우10이 11로 업데이트 되는건 알고있나요? 니꼬쌤의 강의를 보며 윈도우 세팅을 하였는데 업데이트 된다면 문제 없을까요? 나중에 이것에 대한 영상 올려주십쇼......ㅠㅠ😂😂
아조씨 요새 썸넬 찰지네요
니콜라스쌤 커엽고 편집자님도 열일해서 구독하자너,,🌹🌹
Thank you! I like you from all other youtubers because you explain things really well and keep things straightforward! Keep it up! Thanks!
니콜라스 쌤 최고!!! 감사합니다😍🥰
이렇게 깔끔하게 보기좋게 정리해주셔서 감사합니다!
시간 여유 없을 때 잠깐 보고 넘겼다가.다시 생각나서 찾아왔어요.언제나 감사합니다.:isposition: sticky이 두개가 충격적이에요.
니꼬 학습력이 놀랍네요 ㅠ
진행하려던 프로젝트에서 바로써먹아볼수있겠네요 감사합니다!!☆
감사합니다. 항상 유용한 정보 입니다.
깨알같이 익스플로러는 제약이있네ㅋㅋㅋㅋㅋㅋ
버려진 브라우저는 무시하세용 ㅋㅋ
@@xellosslee7204 무시하고싶지만 현업에선 무시 불가..
gap!!! css 배울때 flex 사이즈 재는거 너무 힘들었는데 최고 ㅠㅠ
scroll snap 은 carousel 구현할 때 편해요.
이런 영상들은 보통 백엔드 개발 혹은 영어, 이탈리어어 같은.. 외국어가 많던데.. 한국어로 볼 수 있는 게다가 프론트쪽.. 넘 좋아요!
와 전부다 유용하고 지금 js나 라이브러리에서 쓰고있는거네요 scroll snap은 바로 써봐야겠어요 니콜라스 최고👍👍
ㅋㅋㅋㅋㅋㅋㅋ썸네일 너무 웃겨서 들어왔는데 너무 유용하네요! 감사합니다
유용한 기능이 많아서 좋네요! 🧑🔧
진짜 너무너무 유용해요!!!! Advanced css 많이 올려주세요!!!
진짜 좋은 기능들 알려줘서 사..사.. 좋아합니다!
헐 유용한 정보 얻었네요!!
도움이 되셨다니 감사합니다~!
너무 유용해요ㅎㅎ
CSS속에서도 이런 기능이 있는 줄은 몰랐네요 CSS를 다시 보게 되는 좋은 영상입니다. 굿乃!
오 이런 CSS 공법은 처음보네요. 확실히 이런거는 활용하기 되게 좋은 코드들이 많겠네요. ㅋㅋ 잘 보고 갑니다. 감사해요 니꼴라스~
고마워요 :)
헐;; 누구보다 빠르게.. 짱이다 고마워요
scroll-snap, aspect-ration 따라해봤는데 엄청 좋네요😆
항상 고마워요 노마드형 :)
이런 꿀 팁 너무 고마워요! ; )
와 is랑 gap 정말 몰랐네 이거 진짜 어마어마하게 필요하다고 느낀건데 와... 진짜 감사합니다 좋은거 알았어요!
gap은 알고 있었는데 나머지는 진짜 유용하네요! 니콜라스 감사!
오우.. 다 모르는거야.. 감사합니다
오 짱짱이에용👍👍
flex gap이랑 페이지 스크롤 스냅 이거 둘 진짜 와 .....
꿀팁이네영
당신은 천사...💕
이야 최신기능 추천 감사합니다~
대박 휴가 끝나고 바로 적용해봐야지 ㅋㅋㅋ
ㅜㅜㅜㅜㅜ 너무좋네요
개발자 아닌데 홀린듯이 보고있네 ㅋㅋㅋㅋㅋ 재미있고 유용한 기능들이 많네요!! 궁금한게 있는데 저 기능 지원안하는 브라우저에서 페이지 보려면 두번 코딩해야해요?
하 대박… 평소에 생각했었던 기능들이 진짜로 나오다니 ㅠㅠ
사랑해요...
Css 업데이트도 좋은데브라우저 다 사라지고 통일되었으면…
와 바로 구독
모바일 기기를 이용해 서비스를 소비하는 사용자가 많다보니, 모바일 기기를 대상으로 개발할 때 도움되는 기술들이 많이 생기네요. 오늘도 좋은 정보 감사합니다!
신세계네요 특히 margin part is bratiful
와 좋다..👍
헐 이걸 딱 2달 전에 알았더라면.. 넘 감사합니다ㅠㅠ
감사합니다 사랑해요
언빌리버블 video Thank you
열정! 열정! 열정!
Thank You! very much!
와 sticky 구현할려고 js로 높이랑 스크롤 을 얼마나 했는지 다 계산해줬어야 했는데 겁나 신기하군요.. AWESOME!
와 대박이다
스티키 쓰러간다잇 🤩
배경이 핑쿠핑쿠한거보니 이것은 니꼬선생님이 강조하시는것
와 형 진짜 고마워요 나도 배울거야
요즘 프론트를 거의 안만지게 됐는데엄청 편리한것들이 추가되었군요
와 감사합니다
1분전 못참지
대부분 css측에서 구현이 되면 성능측면에서 이점이 있나요??
썸넬 니코쌤이 귀여워서 또 봅니다 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ썸넬 ㅋㅋㅋㅋㅋㅋ오예시~🍑
훌륭한 썸네일, 높이 평가
고수님들, 코린이 질문드립니다. Live server 자동 새로고침 사용할 때, 윈도우? viewport?를 고정해놓고 보고 싶은데 새로고침 될 때 마다 스크롤이 상단으로 올라가서 불편하네요오.. 해결방법 없을까요.
헐 대박~~~~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 각 브라우저별로 어느 버전까지 지원되는지 모르겠다만.. 그래도 대박 ㅋㅋㅋㅋㅋㅋ
노마드 만세~🙌🏼
이러나 인풋이나 셀렉트 옵션도 자유롭게 css로 수정하면 ㄹㅇ 개꿀일듯
체신기술 특 사파리에서 안댐즉 쓸꺼면 사파리용으로 하나 더만들어야함
너무 좋다.
이런 최신 CSS기능은 어디서 알아낼 수 있을까요? Javascript는 ECMA262에서 매년6월에 새로운 버전 나오는걸 보면 되는데 CSS도 혹시 어디서 최신기능을 알 수 있을까요? 답변해주시면 감사합니다.
sitcky가 적용이 안되는 경우도 있던데, 혹시 따로 설명 되어있는 영상 있을까요?
와 데모도 넣어주고 감사합니다~
5가지??? 굳!!!
Css 까지 담백.. (2개월 코린이)
꿀팁 감사 김치워리어!!!
시청해 주셔서 감사합니다 😊
:is 진짜 대박이네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이와중에 노익스플로러 ㅋㅋㅋㅋㅋㅋㅋ 역시 무쓸모 브라우저 😅
정말멋지다 상줘야해..
와진짜 개꿀띠♡
sticky와 fixed가 비슷한 역할을 하는 것 같은데 두 position 속성에 차이점이 있을까요?
fixed는 그 포지션에 아예 고정되는거고 sticky는 단어 그대로 껌처럼 달라붙는 느낌..? 같은 수치로 해두고 스크롤링만 해봐도 차이점이 느껴질거에요
안녕하세요 니꼴라스(?)님 혹시 카톡 봇, 디스코드 봇을 만드는 강의(?) 를 만들어 주실 수 있나요?
thank you so much 🤍🤍
어 뭐야 왜 외국인이 한사랑산악회 섬네일이야 했는데 이게 뭐야 외국인이 한국에서 css 강좌를...뭐야 혼란스러 어쨋든 방송 잘볼게요;;
아내가 한국인. 말 다했지?
썸네일 너무 유쾌 ㅋㅋㅋㅋㅋ
데모링크 요기 👇🏼
-
Demo Scroll:
codepen.io/serranoarevalo/pen/xxdYBxZ
-
Demo Sticky:
codepen.io/serranoarevalo/pen/YzVeMyJ
-
📌 니콜라스와 무료로 코딩 공부하기
nomadcoders.co
무료로 공부하는 법을 몰르겠어요ㅠㅠ
감사합니다!
sticky를 사용할때 높이나 폭이 선언된 부모와 sticky를 사용하는 자식 사이에 overflow가 선언된 element가 있다면 sticky가 적용되지 않습니다. 사용하실 분들은 참고하시면 좋을것 같습니다.
감사해요!
썸네일 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 요즘 뉴스 콘텐츠도 너무 좋고 더 재밌어짐 !
와 진짜 대부분 반응형을 만드려고 JS로 고통받던 부분들이 해결이 되어서 너무 좋습니다. 😄 특히 저 페이지 스크롤은.. ㅎㅎ 모바일에서는 어떻게 되는지 테스트 해봐야겠네요
썸넬 한사랑..산악회인가요ㅋㅋ
한코딩 산악회 입니당...-0- ㅎㅎㅎㅎ
@@nomadcoders 열쩡! 열쩡! 열쩡!
IE 빨리중지되야 한국 실무에서 신규기능 써볼듯
0:23 이츠 수폴트! 꿀팁 감사합니다🚀
퍼블리셔 겸 프론트엔드 개발자인데 좋은 정보 얻었습니다! 감사합니다.
아 ㅋㅋㅋㅋㅋ썸넬에 이끌려서 클릭했어요! 꿀기능 좋네요 얼른 써봐야겠어여!
썸넬에 끌려서 왔다가 니코샘의 배려심에 무릎을 탁치고 갑니다
죄다 ie 지원이 안되네요 ㅠㅠㅠㅠ
ie지원해야하는 곳은 너무 슬프다
니콜라스 이런 최신 기법을 어떻게 이렇게 주기적으로 학습하실 수 있는지? 학습법과 참고할 만한 사이트 알려주는 컨텐츠도 좋을 것 같아요!!
부수입 끊는 소리 아님?
그건..... 영업기밀이죠....
근데 사이트는 어렵지 않게 찾을 수 있어요..
연결의 연결이 발생하는 곳이 인터넷이니깐...
와 엄청 유용하네요 잘쓰겠습니다!
flex gap..! 초보 입장에서도 좋은 기능이네요 좋은 영상 감사합니다!
진짜 여기만큼 재밌게 설명해주는 곳 없는거 같아요 ㅋㅋㅋ
임베 개발잔데 여기서 배워서 이직해야징
임베 안하시고 왜 웹을 하시려고하나요?
@@어슬렁-g9l 웹에도 관심이 생겨서 일단 공부를 해보려고 합니다!
position sticky 는 모바일 브라우저에서 지원안되는 폰이 몇개 있더군요.. 제가 저거썼다가 다시 뜯어고치고 다시 디바이스테스트 하러가고.
니꼬쌤 윈도우10이 11로 업데이트 되는건 알고있나요? 니꼬쌤의 강의를 보며 윈도우 세팅을 하였는데 업데이트 된다면 문제 없을까요? 나중에 이것에 대한 영상 올려주십쇼......ㅠㅠ😂😂
아조씨 요새 썸넬 찰지네요
니콜라스쌤 커엽고 편집자님도 열일해서 구독하자너,,🌹🌹
Thank you! I like you from all other youtubers because you explain things really well and keep things straightforward! Keep it up! Thanks!
니콜라스 쌤 최고!!! 감사합니다😍🥰
이렇게 깔끔하게 보기좋게 정리해주셔서 감사합니다!
시간 여유 없을 때 잠깐 보고 넘겼다가.
다시 생각나서 찾아왔어요.
언제나 감사합니다.
:is
position: sticky
이 두개가 충격적이에요.
니꼬 학습력이 놀랍네요 ㅠ
진행하려던 프로젝트에서 바로써먹아볼수있겠네요 감사합니다!!☆
감사합니다. 항상 유용한 정보 입니다.
깨알같이 익스플로러는 제약이있네ㅋㅋㅋㅋㅋㅋ
버려진 브라우저는 무시하세용 ㅋㅋ
@@xellosslee7204 무시하고싶지만 현업에선 무시 불가..
gap!!! css 배울때 flex 사이즈 재는거 너무 힘들었는데 최고 ㅠㅠ
scroll snap 은 carousel 구현할 때 편해요.
이런 영상들은 보통 백엔드 개발 혹은 영어, 이탈리어어 같은.. 외국어가 많던데.. 한국어로 볼 수 있는 게다가 프론트쪽.. 넘 좋아요!
와 전부다 유용하고 지금 js나 라이브러리에서 쓰고있는거네요 scroll snap은 바로 써봐야겠어요 니콜라스 최고👍👍
ㅋㅋㅋㅋㅋㅋㅋ썸네일 너무 웃겨서 들어왔는데 너무 유용하네요! 감사합니다
유용한 기능이 많아서 좋네요! 🧑🔧
진짜 너무너무 유용해요!!!! Advanced css 많이 올려주세요!!!
진짜 좋은 기능들 알려줘서 사..사.. 좋아합니다!
헐 유용한 정보 얻었네요!!
도움이 되셨다니 감사합니다~!
너무 유용해요ㅎㅎ
CSS속에서도 이런 기능이 있는 줄은 몰랐네요 CSS를 다시 보게 되는 좋은 영상입니다. 굿乃!
오 이런 CSS 공법은 처음보네요. 확실히 이런거는 활용하기 되게 좋은 코드들이 많겠네요. ㅋㅋ 잘 보고 갑니다. 감사해요 니꼴라스~
고마워요 :)
헐;; 누구보다 빠르게.. 짱이다 고마워요
scroll-snap, aspect-ration 따라해봤는데 엄청 좋네요😆
항상 고마워요 노마드형 :)
이런 꿀 팁 너무 고마워요! ; )
와 is랑 gap 정말 몰랐네 이거 진짜 어마어마하게 필요하다고 느낀건데 와... 진짜 감사합니다 좋은거 알았어요!
gap은 알고 있었는데 나머지는 진짜 유용하네요! 니콜라스 감사!
오우.. 다 모르는거야.. 감사합니다
오 짱짱이에용👍👍
flex gap이랑 페이지 스크롤 스냅 이거 둘 진짜 와 .....
꿀팁이네영
당신은 천사...💕
이야 최신기능 추천 감사합니다~
대박 휴가 끝나고 바로 적용해봐야지 ㅋㅋㅋ
ㅜㅜㅜㅜㅜ 너무좋네요
개발자 아닌데 홀린듯이 보고있네 ㅋㅋㅋㅋㅋ 재미있고 유용한 기능들이 많네요!! 궁금한게 있는데 저 기능 지원안하는 브라우저에서 페이지 보려면 두번 코딩해야해요?
하 대박… 평소에 생각했었던 기능들이 진짜로 나오다니 ㅠㅠ
사랑해요...
Css 업데이트도 좋은데
브라우저 다 사라지고 통일되었으면…
와 바로 구독
모바일 기기를 이용해 서비스를 소비하는 사용자가 많다보니, 모바일 기기를 대상으로 개발할 때 도움되는 기술들이 많이 생기네요. 오늘도 좋은 정보 감사합니다!
신세계네요 특히 margin part is bratiful
와 좋다..👍
헐 이걸 딱 2달 전에 알았더라면.. 넘 감사합니다ㅠㅠ
감사합니다 사랑해요
언빌리버블 video Thank you
열정! 열정! 열정!
Thank You! very much!
와 sticky 구현할려고 js로 높이랑 스크롤 을 얼마나 했는지 다 계산해줬어야 했는데 겁나 신기하군요.. AWESOME!
와 대박이다
스티키 쓰러간다잇 🤩
배경이 핑쿠핑쿠한거보니 이것은 니꼬선생님이 강조하시는것
와 형 진짜 고마워요 나도 배울거야
요즘 프론트를 거의 안만지게 됐는데
엄청 편리한것들이 추가되었군요
와 감사합니다
1분전 못참지
대부분 css측에서 구현이 되면 성능측면에서 이점이 있나요??
썸넬 니코쌤이 귀여워서 또 봅니다 ㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ썸넬 ㅋㅋㅋㅋㅋㅋ오예시~🍑
훌륭한 썸네일, 높이 평가
고수님들, 코린이 질문드립니다.
Live server 자동 새로고침 사용할 때, 윈도우? viewport?를 고정해놓고 보고 싶은데 새로고침 될 때 마다 스크롤이 상단으로 올라가서 불편하네요오.. 해결방법 없을까요.
헐 대박~~~~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 각 브라우저별로 어느 버전까지 지원되는지 모르겠다만.. 그래도 대박 ㅋㅋㅋㅋㅋㅋ
노마드 만세~🙌🏼
이러나 인풋이나 셀렉트 옵션도 자유롭게 css로 수정하면 ㄹㅇ 개꿀일듯
체신기술 특 사파리에서 안댐
즉 쓸꺼면 사파리용으로 하나 더만들어야함
너무 좋다.
이런 최신 CSS기능은 어디서 알아낼 수 있을까요? Javascript는 ECMA262에서 매년6월에 새로운 버전 나오는걸 보면 되는데 CSS도 혹시 어디서 최신기능을 알 수 있을까요? 답변해주시면 감사합니다.
sitcky가 적용이 안되는 경우도 있던데, 혹시 따로 설명 되어있는 영상 있을까요?
와 데모도 넣어주고 감사합니다~
5가지??? 굳!!!
Css 까지 담백.. (2개월 코린이)
꿀팁 감사 김치워리어!!!
시청해 주셔서 감사합니다 😊
:is 진짜 대박이네요ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이와중에 노익스플로러 ㅋㅋㅋㅋㅋㅋㅋ 역시 무쓸모 브라우저 😅
정말멋지다 상줘야해..
와진짜 개꿀띠♡
sticky와 fixed가 비슷한 역할을 하는 것 같은데 두 position 속성에 차이점이 있을까요?
fixed는 그 포지션에 아예 고정되는거고 sticky는 단어 그대로 껌처럼 달라붙는 느낌..? 같은 수치로 해두고 스크롤링만 해봐도 차이점이 느껴질거에요
안녕하세요 니꼴라스(?)님 혹시 카톡 봇, 디스코드 봇을 만드는 강의(?) 를 만들어 주실 수 있나요?
thank you so much 🤍🤍
어 뭐야 왜 외국인이 한사랑산악회 섬네일이야 했는데 이게 뭐야 외국인이 한국에서 css 강좌를...뭐야 혼란스러 어쨋든 방송 잘볼게요;;
아내가 한국인. 말 다했지?
썸네일 너무 유쾌 ㅋㅋㅋㅋㅋ