1. CSS를 적게 작성하는데 도움을 주는 태그 ▶ progress 태그 : 현재 진행상태를 알려주기 좋은 태그 2. JS로의 기능을 수행할 수 있는 태그 ▶ detail,summary 태그 :유저의 클릭으로 정보를 보여주고. 숨기는 패턴 클릭 전 보여질 내용 클릭 후 보여질 내용 ※open이라는 CSS선택자를 통해 스타일 변경가능 3. input type "week", "time" :달력을 만들 때 편리한 input type ※윈도우 환경에 따라 위젯의 형태는 달라짐 4. picture태그 : 각기 다른 버전의 이미지를 표시가능 ex)PC에서는 그림이 고화질로 웹에서 보여지나, 모바일에서는 빠른 실행 속도를 위해 저사양으로 보여지도록 설정가능 5. datalist태그 : JS작성 없이 Auto complete(자동완성)을 가능하게함
Wow so useful, thank you. Been using HTML since 1998. Amazing to see things you can do today. Before this video didn't know about datalist and the details and summary toggle behavior. Been using date input for a while. Quite a neat way to let mobile devices implement their own gui approach to such elements.
google tagmanager에 대해 강의 한번 해주시면 좋겠습니다. 사용방법이나 활용하는 곳이나 어느 때에 사용하는 지등을 설명해주세요. 그리고, 관련 소스코드 예제나 프로젝트 예제가 있는 사이트나 책 등도 소개해주시면 감사하겠습니다. 좋은 강의 항상 감사합니다!!!
I knew I had subscribed to this channel, but I had forgotten why. Now that I've watched this one, I remember. Very concise and useful presentation. I'm glad I watched this. Of course, now I know that my old html and JavaScript references are probably out of date.
📌 니콜라스와 무료로 코딩 공부하기
bit.ly/3zZKXgs
0:53
1:20
2:19
3:13
4:12
5:58
1. CSS를 적게 작성하는데 도움을 주는 태그
▶ progress 태그 : 현재 진행상태를 알려주기 좋은 태그
2. JS로의 기능을 수행할 수 있는 태그
▶ detail,summary 태그 :유저의 클릭으로 정보를 보여주고. 숨기는 패턴
클릭 전 보여질 내용
클릭 후 보여질 내용
※open이라는 CSS선택자를 통해 스타일 변경가능
3. input type "week", "time" :달력을 만들 때 편리한 input type
※윈도우 환경에 따라 위젯의 형태는 달라짐
4. picture태그 : 각기 다른 버전의 이미지를 표시가능
ex)PC에서는 그림이 고화질로 웹에서 보여지나, 모바일에서는 빠른 실행
속도를 위해 저사양으로 보여지도록 설정가능
5. datalist태그 : JS작성 없이 Auto complete(자동완성)을 가능하게함
datalist는 css적용이 안되기 때문에.. 기본 브라우저를 따라갑니다. 그래서 아직 안쓰이는거에요 . 뭐 몇줄안되는 코딩이지만 괜히 개발다해놓고 다시 갈아엎는 참사를 겪지마세요. 예전에 position:sticky도 그렇고. 설명이 좀 부족한느낌
빨리 쓰고 싶네요
고맙습니다 ^^
ie에서도 지원이 된다는 점이 datalist 태그의 아주 아름다운 부분이죠
datalist가 개발자의 시간도 단축시켜 주지만 사용자의 시간도 단축시켜 줄 수 있어서 제일 좋아보이네요
맞아요!
호에.. 나도쓸랬는데 동일이름 개발자를 찾았다..
@@이주홍-l4k 엌ㅋㅋㅋㅋ 안녕하세욬ㅋㅋㅋㅋㅋ
@@마이티-t4o 도플갱어 아님? 둘이 만나보셈 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
주홍 주홍이가 찐 주홍인듯
1:07 progress
1:55 meter
5:19 picture
6:37 datalist
6:49
7:14
datalist의 option들은 input value에 맞춰서 디바운싱으로 업데이트 해주면 되겠네요!
오늘도 이렇게 짧은 시간에 엄청난걸 또 하나 배워갑니다! 감사합니다!
prgress 도 좋고 input 의 달력 시간도 짱이고 대박이네요
와 ㄷㄷ 학교 행사에서 간단한 웹페이지 만들때 미디어 쿼리 css로 와리가리 치는거 불편했는데 저게 html 한번에 되네
니꼴라스 thx!
와우 항상 어지는 강의 니껄라쓰!!!믿고있엄ㅅ다구
헐 니코 사랑해요!!!!!!!! 아코디언 메뉴 만들어야 해서 골머리 앓고 있었는데!!!!
details 기능 진짜 감동임.. 이거 때문에 자바스크립트 겨우겨우 입문했는데.. 앞으로도 html 힘내라..!
Wow so useful, thank you. Been using HTML since 1998. Amazing to see things you can do today. Before this video didn't know about datalist and the details and summary toggle behavior. Been using date input for a while. Quite a neat way to let mobile devices implement their own gui approach to such elements.
datalist, picture 태그는 진짜 처음 봤습니다. 이런 태그가 있는 거조차도 몰랐습니다.
알아두면 유용하게 써먹을 수 있겠네요
고맙습니다!
이 영상을 보고 '주소 입력 input'의 퀄리티를 향상시킬 아이디어가 떠올랐어요. 감사합니다 :)
I love tag... It's powerful~ haha!
끝내주네요!
와 빨리 써보고 싶네요 내일은 좀 늦게 오면 좋겠지만요 😂😂
datalist 미쳤다... 진짜 좋은 정보 감사드려요 니꼬쌤!
지금까지도 많은 도움이 됬는데 이번 영상도 정말 좋은 내용이네요. 얘기해주신 태그들을 어떻게 써볼지 생각좀 해봐야겠네요. 항상 감사합니다 ㅎㅎ
좋은 정보 정말 감사합니다!
저는 가 제일 좋아보이네요!
카카오클론 코딩 공부중인데 이 태그들고 한번씩 써서 구현해 봐야겠네요.
항상 유익한 영상 고맙습니다!!
datalist 랑 picture 정말 좋네요,, 이런거 처음봤음,, 허허
방금 노마드 코더 영상 다시 봤는데 새로고침하니까 또 나왔네요!
Datalist 를 쓰면 맨 처음 아무것도 입력하지 않았을때 리스트를 랜더하지 안도록 해주는것도 필요할거같아요. 만약 수만개의 데이터가 있을경우를 생각해보면요
정말 훌륭한 기능들이네요. 당연히 태그가 코딩량을 줄여주니까 가장 좋은 것 같네요. 아주 감사합니다.
Detail 태그는 마크다운 파일로 readme를 작성할때나 블로그 글을 작성할 때 등 매우 유용하게 쓰고 있어요!
보이야~~ supersuper cool~~ 좋은정보 감사합니다
알고 있다고 생각하고 넘어 간 부분에 그토록 원하던 효율적인 방법이 있음을 깨닫습니다..
니콜라스 선생님 덕분에 시간을 절약하는 코딩을 배워갑니다
유용한 정보 감사합니다. 새해 복 많이 빋으세요.
와.. detail - summary랑 picture, datalist는 대박... 이걸 이제 알았다니
오늘 영상은 특히 유익하네요. 항상 영상 잘 보고 있습니다.
google tagmanager에 대해 강의 한번 해주시면 좋겠습니다. 사용방법이나 활용하는 곳이나 어느 때에 사용하는 지등을 설명해주세요. 그리고, 관련 소스코드 예제나 프로젝트 예제가 있는 사이트나 책 등도 소개해주시면 감사하겠습니다.
좋은 강의 항상 감사합니다!!!
오 대박이네요 details 태그 좋아요! 오늘도 많이 배우고 갑니다! 감사합니다 🙏🏻
오늘도 감사합니다~!
와우. 감사합니다. 다음 개발건에 바로 적용해서 사용해봐야 겠네요.
프로그래스하고 디테일리스트는 당장 적용할 만한 곳이 떠오릅니다.
meter 태그로 현재 작업중인 화면을 근사하게 업그레이드 시킬 수 있게 되었어요. 고마워요!
datalist가 진짜 대박이네요감사해요 니코쌤!!
datalist 미쳤네요... 감사합니다 사랑해요
Thank you Nico!!! Take care of you in covid always
다 첨보는 것들이네 써봐야겠다 ㅎㅎ
감사합니다 👍
다른 태그도 좋지만 "write less, do more"에 가장 어울리는 가 제 원픽입니다. 😊
고민하던 지점이 여기에 있네요!!!!! 감사합니다
I am never come across these tags, I will definitely implement in my coming project. Thanks for making great video.😊
니꼴라스님 2022년 새해에는 하시는 일마다 잘 이루어지시고, 코로나도 걸리지않게 건강하시고 행복하세요.
감사합니다!! 지금 vscode 에서 실험해보았는데 정말 신기하네요! 앞으로도 좋아요 많이 누르겠습니다 ㅎㅎㅎ
오 대박... 자동완성은 초보인 제가 머리로만 생각해도 고려해야할 변수가 엄청 많은데 태그하나로 뚝딱?
그리고 picture는 웹 반응형 최적화에 엄청 좋아보이네요
니콜라스 천재🤓
datalist는 처음 알았네요. 감사합니다!
짧으면서도 알찬 내용이네요!
영상 잘 보고 갑니다.
중간 중간 한국말을 하는 거 보고 깜짝 놀랐습니다.
앞으로도 좋은 영상 많이 부탁합니다.
구독하고 갑니다. ^________^
콤보박스 구현할 때 datalist가 엄청 편하겠네요. 좋은정보 감사합니다!
와 좋은정보 감사합니다!!
시청해주셔서 고맙습니다 :)
예전에 한번씩 봤었던 태그들이긴한데 영상을 보니까 진짜 써야겠다고 느껴지네요
개꿀팁!!
잘들었습니다!
datalist 유용하겠어요 ㅎㅎㅎ 개인 프로젝트에 한번 적용해봐야겠네요 영상 감사합니다 :)
엄청 대단하네요. html만에서 이게 된다니. datalist랑 detail/summary 이 두개가 제일 마음에 듭니다.
html은 멋진 프로그래밍 언어입니다
감사합니다~ 한땀 한땀 정성어리군요
와....이런게 있었네요!! 고마워요~!!니콜라스
와... 와...... 정말 유익하다. 잘 보고 갑니다.
datalist가 디자이너 입장에서 js없이 프로토타입같은 느낌이네요. 굉장합니다, 알려주셔서 감사해요 ㅎㅎ 검색하러갑니다.. 새해 복 많이받으세요!
와 웹퍼빌리싱 배우는중인데 datalist는 정말 신박하네요
Thank you so much for letting me know your precious knowledge
유용한 정보 고맙습니다!!
시청해주셔서 고맙습니다
datalist, details/summary 매우 유용하군요...
datalist도 감명 깊었지만 새삼 input type이 이렇게 다양한줄 몰랐네요! ㅎㅎ 맨날 쓰는 것만 쓰다보니.. 잘 보고 갑니다
그냥 배추김치랑 볶은 김치중에 뭐를 더 좋아하시나요?
My favorite is meter tag I didn't know it exists. Thank you for making this kind of video ❤️
이 좋은게 있어도 몰라서 못쓰고 있었는데 니콜라스 덕분에 잘 배워갑니다
datalist태그 유용하네요! 잘 보고 가여
와우 datalist 태그는... 짱이네요!
Detail tag는 리드미 쓸때는 잘썼는데 코드짤때는 사용안해봤네요..
Datalist tag도 신세계입니다 감사합니다^^
Datalist vino a salvar mi vida, muchas gracias por compartir tu conocimiento! :D me encantan tus vídeos
1:43 귀에 쏙 박히는 Misaemeongee ㅋㅋㅋㅋㅋ
너무 좋아요 ㅎ
Summary와 picture는 몰랐는데 정말 신박하네요. Datalist는 option때문에 같이 알게 된건데 이것도 대박이긴 합니다
좋은 정보 감사합니다~ 과제할 때 좀 더 쉽게 할 수 있겠네요
와 너무 좋아
picture태그 사용방법 보자마자 switch가 생각난 저는....
와.. 진짜 다 알면 써야하는 태그밖에 없네요.
와 대박. 언제 생긴거지?! 감사합니다!🤩
와 이거 너무 유용하네요! 니콜라스님 채널은 안 볼 수가 없음ㅎㅎ
좋게 봐주셔서 감사해요!
대박정보!
신입개발자인데 정말 많은 도움이 됬어요 고마워요
코딩 시작할 준비하는데
파이썬부터 시작할려고 합니다.
Datalist가 너무 강력하네요!
고마워요 니콜라스:)
감사합니다 니코!
오오 유용한 정보 잘봤습니다!! 혹시 메모용으로 출처올리고, 블로그에 올려도될까요?
굉장히 유용하네요 감사합니다 ㅋㅋㅋ
굿굿굿!!!!! 정말 좋아요 goooooooood🥰🥰
detailist 너무 좋네요 감사합니다 ~
고맙습니다^^
Thanks bro!
I knew I had subscribed to this channel, but I had forgotten why. Now that I've watched this one, I remember. Very concise and useful presentation. I'm glad I watched this. Of course, now I know that my old html and JavaScript references are probably out of date.
html에도 정말 많은 기능이 있었네요!! 니꼬쌤이 알려준 태그들을 따로 적어놓고 필요할때 적용 해봐야겠습니다 ㅎㅎ
which framework you would choose now for creating web application? (Larave, Django .......)
디테일이였나? 첨에 제목만 보여주고 클릭하면 내용 보여주는거, 그게 저는 가장 마음에 드네요.
Datalist 만큼은 꼭 써야 되겠네요! 진짜 깜짝 놀랐습니다. ㅠㅠ
datalist가 진짜 혁신수준이네 당장 갖다써야지 ㄷㄷ