웹퍼블리셔를 위한/매거진10 크롬 개발자 도구로 자바스크립트 이벤트 확인하기 (디버깅) 타 사이트에서 자바스크립트 기능을 확인하고 활용하는 방법 사이트를 살펴보다 보면 이런 기능은 어떻게 구현했을까? 어떤 식으로 만들었을까? 자바스크립트 코드를 살펴보고 싶은 때가 많이 있죠? 나름대로 각자의 방법들이 있겠지만 이 영상에서는 크롬 개발자 도구를 활용하는 방법을 알려주고 있습니다. 참고로 에지, 웨일에서도 크롬 개발자 도구와 비슷한 기능이 있으므로 사실상 대부분의 브라우저에서 이 기능을 이용할 수 있는 것이죠. 그럼 아래 영상을 확인해보세요~ 2021. 4. 10. 일반인들도 코딩없이 앱,홈페이지 개발이 가능할까? 과연 개발자들의 일자리는 어떻게 될까? 디자인 AI에 포스팅에 이어서 이번에는 코딩 자동화 서비스에 관련 된 동영상을 소개 해드리려 합니다. 코딩없이 웹사이트를 구축하는 툴/서비스로는 이미 1997년도 드림위버나 나모웹에디터와 같은 툴이 있었습니다. 하지만 이 툴을 이용한다 하더라도 코딩 지식없이 제대로 된 사이트를 구축하는건 사실상 불가능했었죠. 이후 10년이 넘게 지난 지금의 2020년는 상황이 많이 달라졌습니다. 물론 아직까지는 내가 원하는 홈페이지나 앱을 코딩지식 없이 만든다는 건 불가능하지만 실사용이 가능한 수준의 결과물을 만드는 수준까지는 도달했으며, 이미 많은 사용자들이 이 서비스의 편리함을 누리고 있습니다. 대표적인 예로는 유튜브광고로 한번쯤은 보셨을 윅스(WIX) 웹빌더 서비스가 있습니다. 광고의 슬로건도 "일반인들도 쉽게 만.. 2020. 9. 3. 신입 웹디자이너를 위한 크롬 개발자도구 활용법 개발자도구는 크게 패널 메뉴와 패널 영역으로 나누어져 있습니다. 우리는 주로 패널메뉴 앞단의 내용을 가지고 작업하게 될 것입니다. 패널 메뉴 중 디자이너들이 가장 눈여겨볼 만한 네 가지 기능을 소개하겠습니다. ➊ 검사도구(Inspect) : 검사하고 싶은 영역을 선택하게 도와주는 도구입니다. ➋ 디바이스 모드(Device mode) : 화면을 디바이스별로 확인하도록 도와주는 도구입니다. ➌ Elements 패널 : 태그를 분석하고 실시간으로 수정할 수 있도록 도와주는 도구입니다. ➍ Dock side : 개발자의 취향이나 편의에 따라 원하는 방식대로 Dock 위치를 지정하여 사용할 수 있습니다. [더보기 ▼] PART 1 http://blog.rightbrain.co.kr/?p=11693 신입 웹디자이너.. 2020. 8. 4. 라이브러리? 프레임워크? 차이점 아직도 모름? 5분 순삭. 리액트는 라이브러리일까? 프레임워크일까?...자주 나오는 용어인데 은근 헷갈려서 물어봤습니다. 아..그리고..영상 끝에는.....!!!! 2020. 6. 18. 5 CSS Tips to Improve Your Dev Skills Useful CSS Tips that I frequently used in my projects and tutorial videos. You can find related CSS tutorials shown in the video below. Realistic Business Card: Neon Text Effect: https://youtu.be/BDO_xNCw6wU Infinity Effect: https://youtu.be/s05vBlszF-I Realistic Snow Effect: https://youtu.be/8eyAoBBucHk 8-bit Pokeball: https://youtu.be/6oSU0bn_Gik Neumorphic Login Form: https://youtu.be/_mR_dxy.. 2020. 6. 16. 프론트엔드 개발자로 커리어 키우기 - 개발16년차가 말하는 프론트엔드의 과거, 현재 그리고 미래 프론트엔드 개발자로 커리어 키우기 - 개발16년차가 말하는 프론트엔드의 과거, 현재 그리고 미래 본격적인 첫 영상으로, 많은 개발자들이 고민할만한 내용을 주제로 이야기 해봤습니다. 우리가 과연 프론트엔드 개발자로 얼마나 어떻게 버틸수 있을까? 계속 젊은 피들이 올라오고있는데, 난 10년 20년 평생 개발자로 살수 있을까? 생각만해도 끔찍하지요? 이부분을 이야기해보면서, 프론트엔드가 그동안 어떤과정을 통해 지금 현재 여기까지 오게 되었는지도 짚어보고, 앞으로 우리가 나아가야 할길을 개인적인 각도에서 풀어보았습니다 2020. 6. 11. 프론트엔드 개발자 백엔드 개발자 무엇을 선택할까? 공부 방법은? (Frontend vs Backend) 프론트엔드 개발자와 백엔드 개발자는 무슨 일들을 하고, 나는 어떤것을 선택해야 할까요? 그리고 각각 어떤 부분을 더 공부해 나가면 좋을까요? 여러분들이 주신 질문들을 모아서 알렉스와 함께 영상을 찍어 보았어요 ⭐️ 프론트엔드 관련 영상 ⬇️ 2020. 6. 10. 반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 웹개발시 반응형으로 만드는것이 굉장히 중요합니다. 반응형이 무엇이고 왜 중요하고 어떻게 잘 만들수 있는지 얘기해봤어요 :) 현업팁을 배우면서 조금더 체계적으로 공부해 보고 싶다면 드림코딩 아카데미를 확인해 보세요 ❤️ 드림코딩 아카데미: http://academy.dream-coding.com/ 2020. 6. 9. 프론트엔드 공부 순서, 높은 연봉 받는 프론트엔드 개발자 되기 | 해외 개발자 선배가 알려드려요 ⭐️ (웹개발 공부 순서) 프론트엔드 로드맵은 여기를 참고해 주세요 :) https://github.com/kamranahmedse/developer-roadmap kamranahmedse/developer-roadmap Roadmap to becoming a web developer in 2020. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub. github.com 2020. 6. 9. 개발자가 쓰면 좋은 디지털 노트는? 개발자 경력을 상승 시켜준 완소아이템 ⭐️ (에버노트, 원노트, 베어노트, 노션 전격 비교) 디지털 노트를 잘 활용하면 일정관리 뿐만 아니라 프로젝트 관리도 할 수 있어서 자기개발에도 좋지만 경력관리에도 엄청만 도움이 된답니다 :) 당연히 아날로그 노트도 개발자의 필수 아이템이죠! 🙌 오늘 영상에서는 제가 주로 사용하고 있는 아이들을 소개해 보았어요 :) 🌐 프론트엔드 개발자 되기 입문자편 영상 목록: https://www.youtube.com/playlist?list... 💰개발자 경력 관리 영상 목록: https://www.youtube.com/playlist?list... 📄 이력서 작성 방법 https://www.youtube.com/playlist?list... 📈 IT 트렌드 https://www.youtube.com/playlist?list... 📷 개발자 브이로그 https://w.. 2020. 6. 9. 이전 1 다음
