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(자동완성)을 가능하게함
google tagmanager에 대해 강의 한번 해주시면 좋겠습니다. 사용방법이나 활용하는 곳이나 어느 때에 사용하는 지등을 설명해주세요. 그리고, 관련 소스코드 예제나 프로젝트 예제가 있는 사이트나 책 등도 소개해주시면 감사하겠습니다. 좋은 강의 항상 감사합니다!!!
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.
input type 시리즈는 IE 에서는 작동이 안되더군요 아마 소개해주신 대부분이 안될것으로 생각되서 가슴이 아픕니다 ㅠㅠ 정부 웹사이트나 웹 접근성 인증을 위해서는 IE를 사용해야하는데 IE를 사용하면 오히려 더 유저의 사용경험을 죽여버리는 놀라운... 일이 발생되어 슬픕니다. 마소가 언젠가는 IE를 강제로 삭제시켜주지 않을까 기대하고있습니다.
![N사 출신 개발자가 만든 한국형 스플릿 키보드 | [제작기 1탄]](http://i.ytimg.com/vi/qbYRLMHMjMc/mqdefault.jpg)
![N사 출신 개발자가 만든 한국형 스플릿 키보드 | [제작기 1탄]](/img/tr.png)
![[모던 애자일팀] 프론트엔드 맛보기💻 | 5강 | Fetch API를 활용한 데이터 불러오기](http://i.ytimg.com/vi/CV0WMzw_yPc/mqdefault.jpg)
![ARGENTINA vs. CHILE [3-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 7](http://i.ytimg.com/vi/De3AWmXzhuA/mqdefault.jpg)
📌 니콜라스와 무료로 코딩 공부하기
bit.ly/3zZKXgs
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(자동완성)을 가능하게함
0:53
1:20
2:19
3:13
4:12
5:58
datalist는 css적용이 안되기 때문에.. 기본 브라우저를 따라갑니다. 그래서 아직 안쓰이는거에요 . 뭐 몇줄안되는 코딩이지만 괜히 개발다해놓고 다시 갈아엎는 참사를 겪지마세요. 예전에 position:sticky도 그렇고. 설명이 좀 부족한느낌
ie에서도 지원이 된다는 점이 datalist 태그의 아주 아름다운 부분이죠
datalist가 개발자의 시간도 단축시켜 주지만 사용자의 시간도 단축시켜 줄 수 있어서 제일 좋아보이네요
맞아요!
호에.. 나도쓸랬는데 동일이름 개발자를 찾았다..
@@user-yu2re5do3m 엌ㅋㅋㅋㅋ 안녕하세욬ㅋㅋㅋㅋㅋ
@@user-ve5cw7jz9u 도플갱어 아님? 둘이 만나보셈 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
주홍 주홍이가 찐 주홍인듯
빨리 쓰고 싶네요
고맙습니다 ^^
와 ㄷㄷ 학교 행사에서 간단한 웹페이지 만들때 미디어 쿼리 css로 와리가리 치는거 불편했는데 저게 html 한번에 되네
니꼴라스 thx!
datalist의 option들은 input value에 맞춰서 디바운싱으로 업데이트 해주면 되겠네요!
datalist, picture 태그는 진짜 처음 봤습니다. 이런 태그가 있는 거조차도 몰랐습니다.
알아두면 유용하게 써먹을 수 있겠네요
고맙습니다!
방금 노마드 코더 영상 다시 봤는데 새로고침하니까 또 나왔네요!
details 기능 진짜 감동임.. 이거 때문에 자바스크립트 겨우겨우 입문했는데.. 앞으로도 html 힘내라..!
이 영상을 보고 '주소 입력 input'의 퀄리티를 향상시킬 아이디어가 떠올랐어요. 감사합니다 :)
Datalist 를 쓰면 맨 처음 아무것도 입력하지 않았을때 리스트를 랜더하지 안도록 해주는것도 필요할거같아요. 만약 수만개의 데이터가 있을경우를 생각해보면요
오늘도 이렇게 짧은 시간에 엄청난걸 또 하나 배워갑니다! 감사합니다!
prgress 도 좋고 input 의 달력 시간도 짱이고 대박이네요
I love tag... It's powerful~ haha!
google tagmanager에 대해 강의 한번 해주시면 좋겠습니다. 사용방법이나 활용하는 곳이나 어느 때에 사용하는 지등을 설명해주세요. 그리고, 관련 소스코드 예제나 프로젝트 예제가 있는 사이트나 책 등도 소개해주시면 감사하겠습니다.
좋은 강의 항상 감사합니다!!!
datalist 미쳤다... 진짜 좋은 정보 감사드려요 니꼬쌤!
보이야~~ supersuper cool~~ 좋은정보 감사합니다
와우 항상 어지는 강의 니껄라쓰!!!믿고있엄ㅅ다구
와 빨리 써보고 싶네요 내일은 좀 늦게 오면 좋겠지만요 😂😂
지금까지도 많은 도움이 됬는데 이번 영상도 정말 좋은 내용이네요. 얘기해주신 태그들을 어떻게 써볼지 생각좀 해봐야겠네요. 항상 감사합니다 ㅎㅎ
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.
헐 니코 사랑해요!!!!!!!! 아코디언 메뉴 만들어야 해서 골머리 앓고 있었는데!!!!
와.. detail - summary랑 picture, datalist는 대박... 이걸 이제 알았다니
datalist 미쳤네요... 감사합니다 사랑해요
카카오클론 코딩 공부중인데 이 태그들고 한번씩 써서 구현해 봐야겠네요.
항상 유익한 영상 고맙습니다!!
datalist 랑 picture 정말 좋네요,, 이런거 처음봤음,, 허허
picture태그 사용방법 보자마자 switch가 생각난 저는....
와.. 진짜 다 알면 써야하는 태그밖에 없네요.
감사합니다!! 지금 vscode 에서 실험해보았는데 정말 신기하네요! 앞으로도 좋아요 많이 누르겠습니다 ㅎㅎㅎ
Detail 태그는 마크다운 파일로 readme를 작성할때나 블로그 글을 작성할 때 등 매우 유용하게 쓰고 있어요!
datalist는 처음 알았네요. 감사합니다!
와 웹퍼빌리싱 배우는중인데 datalist는 정말 신박하네요
좋은 정보 정말 감사합니다!
저는 가 제일 좋아보이네요!
끝내주네요!
와우. 감사합니다. 다음 개발건에 바로 적용해서 사용해봐야 겠네요.
프로그래스하고 디테일리스트는 당장 적용할 만한 곳이 떠오릅니다.
짧으면서도 알찬 내용이네요!
영상 잘 보고 갑니다.
중간 중간 한국말을 하는 거 보고 깜짝 놀랐습니다.
앞으로도 좋은 영상 많이 부탁합니다.
구독하고 갑니다. ^________^
엄청 대단하네요. html만에서 이게 된다니. datalist랑 detail/summary 이 두개가 제일 마음에 듭니다.
meter 태그로 현재 작업중인 화면을 근사하게 업그레이드 시킬 수 있게 되었어요. 고마워요!
datalist가 진짜 대박이네요감사해요 니코쌤!!
datalist, details/summary 매우 유용하군요...
I am never come across these tags, I will definitely implement in my coming project. Thanks for making great video.😊
니콜라스 천재🤓
오 대박이네요 details 태그 좋아요! 오늘도 많이 배우고 갑니다! 감사합니다 🙏🏻
알고 있다고 생각하고 넘어 간 부분에 그토록 원하던 효율적인 방법이 있음을 깨닫습니다..
니콜라스 선생님 덕분에 시간을 절약하는 코딩을 배워갑니다
datalist태그 유용하네요! 잘 보고 가여
Thank you Nico!!! Take care of you in covid always
코딩 시작할 준비하는데
파이썬부터 시작할려고 합니다.
datalist가 디자이너 입장에서 js없이 프로토타입같은 느낌이네요. 굉장합니다, 알려주셔서 감사해요 ㅎㅎ 검색하러갑니다.. 새해 복 많이받으세요!
저런거 때문에 레퍼런스 없으면 개발이 어려워요.
이미 있는데 따로 만들기도 해서요 ㅋㅋㅋ;;
다른 태그도 좋지만 "write less, do more"에 가장 어울리는 가 제 원픽입니다. 😊
유용한 정보 감사합니다. 새해 복 많이 빋으세요.
Amazing!
datalist도 감명 깊었지만 새삼 input type이 이렇게 다양한줄 몰랐네요! ㅎㅎ 맨날 쓰는 것만 쓰다보니.. 잘 보고 갑니다
Detail tag는 리드미 쓸때는 잘썼는데 코드짤때는 사용안해봤네요..
Datalist tag도 신세계입니다 감사합니다^^
1:07 progress
1:55 meter
5:19 picture
6:37 datalist
6:49
7:14
Datalist가 너무 강력하네요!
콤보박스 구현할 때 datalist가 엄청 편하겠네요. 좋은정보 감사합니다!
Summary와 picture는 몰랐는데 정말 신박하네요. Datalist는 option때문에 같이 알게 된건데 이것도 대박이긴 합니다
직접 입력하는 select 태그는 뭔가 했는데 저런거였군요
오늘 영상은 특히 유익하네요. 항상 영상 잘 보고 있습니다.
datalist 유용하겠어요 ㅎㅎㅎ 개인 프로젝트에 한번 적용해봐야겠네요 영상 감사합니다 :)
그냥 배추김치랑 볶은 김치중에 뭐를 더 좋아하시나요?
잘들었습니다!
이 좋은게 있어도 몰라서 못쓰고 있었는데 니콜라스 덕분에 잘 배워갑니다
1:43 귀에 쏙 박히는 Misaemeongee ㅋㅋㅋㅋㅋ
html은 멋진 프로그래밍 언어입니다
My favorite is meter tag I didn't know it exists. Thank you for making this kind of video ❤️
고민하던 지점이 여기에 있네요!!!!! 감사합니다
디테일이였나? 첨에 제목만 보여주고 클릭하면 내용 보여주는거, 그게 저는 가장 마음에 드네요.
input week는 당장 써봐야겠네요
와우 datalist 태그는... 짱이네요!
감사합니다~ 한땀 한땀 정성어리군요
다 첨보는 것들이네 써봐야겠다 ㅎㅎ
감사합니다 👍
오 대박... 자동완성은 초보인 제가 머리로만 생각해도 고려해야할 변수가 엄청 많은데 태그하나로 뚝딱?
그리고 picture는 웹 반응형 최적화에 엄청 좋아보이네요
와 이거 너무 유용하네요! 니콜라스님 채널은 안 볼 수가 없음ㅎㅎ
좋게 봐주셔서 감사해요!
니꼴라스님 2022년 새해에는 하시는 일마다 잘 이루어지시고, 코로나도 걸리지않게 건강하시고 행복하세요.
datalist가 진짜 혁신수준이네 당장 갖다써야지 ㄷㄷ
정말 훌륭한 기능들이네요. 당연히 태그가 코딩량을 줄여주니까 가장 좋은 것 같네요. 아주 감사합니다.
오 정말 유용한 HTML 태그들이네요 감사합니다!
신입개발자인데 정말 많은 도움이 됬어요 고마워요
오늘도 감사합니다~!
Thank you so much for letting me know your precious knowledge
와 자동완성기능 대박이다! JS보다 최첨단 기술이네
고마워요 니콜쌤 ㅎㅎ
와 대박.... 형님의 영상을 보고 이제부터 HTML은 프로그래밍 언어가 맞다고 말하겠습니다
와 좋은정보 감사합니다!!
시청해주셔서 고맙습니다 :)
좋은 정보 감사합니다~ 과제할 때 좀 더 쉽게 할 수 있겠네요
예전에 한번씩 봤었던 태그들이긴한데 영상을 보니까 진짜 써야겠다고 느껴지네요
개꿀팁!!
와 대박. 언제 생긴거지?! 감사합니다!🤩
I like JS but I like more more Nomad Coders video!XD thank u Shared Tip!😉👍
detailist 너무 좋네요 감사합니다 ~
고맙습니다^^
유용한 정보 고맙습니다!!
시청해주셔서 고맙습니다
thank you so much! datalist will be very useful for me.
아주머니, 오늘도 많이 배워갑니다. 감사해요. : -)
Datalist 만큼은 꼭 써야 되겠네요! 진짜 깜짝 놀랐습니다. ㅠㅠ
제가 몰랐던 유용한 태그가 많군요
input type 시리즈는 IE 에서는 작동이 안되더군요 아마 소개해주신 대부분이 안될것으로 생각되서 가슴이 아픕니다 ㅠㅠ
정부 웹사이트나 웹 접근성 인증을 위해서는 IE를 사용해야하는데 IE를 사용하면 오히려 더 유저의 사용경험을 죽여버리는 놀라운... 일이 발생되어 슬픕니다. 마소가 언젠가는 IE를 강제로 삭제시켜주지 않을까 기대하고있습니다.
토닥토닥 마소가 올해 중순부터 지원 안해준다고 선언하기는 했는데 과연 우리나라 공무원들이 고집을 꺾을지ㅠ
와 html 진짜 깊게 파봐야겟다 그게 안되면 js 로 넘어가야지
역시 html은 좋은 언어야!