검색 자동 완성 UI 만들기(With Vanilla JS) - p-iknow's devlog

Vanila JS로 검색 자동완성 라이브러리를 만든다. 코드의 재사용을 고려하여 객체를 설계했고 설계과정에서 MVC 패턴을 적용했다. 사용자와 성능을 고려하여 debounce, throttle 등의 UI 제어 기술을 사용하였다.


검색 자동 완성 UI 만들기(With Vanilla JS) - p-iknow's devlog

[JS]디바운스와 쓰로틀

올 해 초에 경험 삼아 프로그래머스의 코딩 및 과제 테스트를 봤습니다. 지금까지 공부해온 길이 맞는지 글고 부족한 점이 무엇인지에 대해 알고 싶었고 결과적으로 부족한 부분이 아주 많았고 그것을 느끼게 해준 점 하나가 바로 디바운스입니다. debounce 기법을 사용하여


[JS]디바운스와 쓰로틀

HTML Tutorial for Beginners

Learn HTML FAST from a professional developer. This course will get you into the career of web development. You'll learn HTML, CSS, & Javascript using modern tools so you won't be embarrassed on your first job interview! IMPORTANT! If you ONLY want a website for yourself or your business, DO NOT learn all this stuff...it's a waste of your time. Instead, click here: to go to WIX ADI https://bit.ly/2LQYBf7. Wix is by far the easiest and cheapest way to get a website up and running without learning the skills of a web developer. Note, that's an affiliate link, so feel free to snoop around on their site to find the Wix ADI on your own if you don't want to support this channel. In this video, we're going to learn how to build a website with HTML. In this tutorial html is the hero and we'll learn just how simple it is to get started...you really only need to learn a few words! The whole course: Web Dev 1: How to set up your computer for web development https://www.youtube.com/watch?v=gQojMIhELvM&list=PLoYCgNOIyGABDU532eesybur5HPBVfC1G&index=2&t=0s -~-~~-~~~-~~-~- Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device" https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-


HTML Tutorial for Beginners

Web Development Tutorial For Beginners 2018 / 2019 - how to make a website

Learn Web Dev the way professionals do! This FULL course covers it all. We'll learn HTML, CSS, Javascript and the workspace/computer setup that professionals use. IMPORTANT! If you ONLY want a website for yourself or your business, DO NOT learn all this stuff...it's a waste of your time. Instead, click here: to go to WIX ADI https://bit.ly/2LQYBf7. Wix is by far the easiest and cheapest way to get a website up and running without learning the skills of a web developer. Note, that's an affiliate link, so feel free to snoop around on their site to find the Wix ADI on your own if you don't want to support this channel. This first video will get you setup for how to make a website by first setting up your computer for web development. Next up, we'll learn HTML for beginners, then start baking in CSS to our HTML! https://www.youtube.com/watch?v=RjHflb-QgVc&index=3&list=PLoYCgNOIyGABDU532eesybur5HPBVfC1G&t=4s -~-~~-~~~-~~-~- Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device" https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-


Web Development Tutorial For Beginners 2018 / 2019 - how to make a website

Axios를 사용하여 HTTP요청하기

Axios소개Axios는 HTTP통신을 하는데 매우 인기있는 Javascript라이브러리입니다. Axios는 브라우저와 Node.js 플랫폼에서 모두 사용할 수 있습니다. 또한 IE8이상을 포함한 모든 최신 브라우저를 지원합니다. Axios는 Promise를 기반으로하여 async/await문법을 사용하여 XHR요청을 매우 쉽게 할 수 있습니다. Fetc


Axios를 사용하여 HTTP요청하기

파워포인트 (Power point) 365 강좌 #027 JS Everywhere 발표ppt 템플릿 따라 만들어보기

이번 시간에는 JSEverywhere에서 발표된 PPT 템플릿의 첫 장을 따라 만들어 볼 겁니다. 최근에 받은 피드백에 따라 강의 진행 속도를 조금 늦췄습니다. 많은 시청 바랍니다! * 대본 안녕하세요 여러분! 이번 시간에는 JAVASCRIPT IS EVERYWHERE에 나온 템플릿을 만들어 볼 겁니다. 우선 화면에 있을 필요가 없는 개체들을 전부 지워주세요. 그리고는 편집화면을 오른쪽으로 클릭하여 배경 서식을 눌러주도록 합니다. 오른쪽에 뜬 서식 창이 보이시죠? 단색 채우기를 할 테니 색 항목을 눌러줍니다. 여기서 다른 색을 선택해주시면 색 팝업이 화면에 뜰 겁니다. 사용자 지정 탭을 눌러주시고, RGB를 모두 50으로 세팅해주세요. 다 됐으면, 확인을 눌러주도록 합니다. 이번에는 사각형을 하나 큼지막하게 만들어줘야 하는데요. 삽입 탭 – 이미지 그룹 – 도형을 선택해서 직사각형을 화면에 크게 그려줍니다. 다 그렸으면 사각형을 클릭해주고 도형 서식 탭으로 이동해줍니다. 일단 도형 윤곽선은 ‘없음’으로 해주시고, 도형의 높이는 14cm, 너비는 11cm로 맞춰줍니다. 색깔도 조정해줘야 하는데요. 사각형을 선택한 뒤, 도형 서식 탭 – 도형 스타일 그룹 – 도형 채우기를 선택합니다. 여기서 다른 채우기 색을 눌러주시면, 위에서 봤던 색 팝업창이 뜨게 됩니다. 마찬가지로 사용자 지정 탭으로 이동해준 뒤, RGB값을 240, 220, 30으로 맞춰주고 확인을 해줍니다. 이렇게 만들어진 노란 사각형은 화면상의 오른쪽에 두되 중간에 약간 걸쳐진 느낌으로 배치해주시면 됩니다. 이제 텍스트를 입력할 차례입니다. 가로 텍스트 상자를 3개 만들어줄 텐데요. 우선 1개를 만든 뒤, 발표자료의 제목을 입력해줍니다. 이때 가능하면 제목은 간결한 한글을 사용하거나 영어로 작성하는 것이 좋습니다. 글자의 색은 흰색으로 적용해주도록 합니다. 제목은 샤프한 느낌을 주면서 명확하게 보여야 하므로 저는 서울남산체 세로쓰기 폰트를 사용할 겁니다. 폰트 변경을 끝냈으면 크기도 36포인트로 변경해주도록 합니다. 이렇게 되면, 글자의 크기가 커지면서 줄 바꿈 등이 일어나게 될 텐데요. 제목이 한글이든 영어든 2줄을 초과하지 않게끔 하는 것이 중요합니다. 방법은 글 상자의 가로 길이를 늘이거나, 내용 자체를 더 짧게 입력하는 방법 등이 있죠. 또한, 정렬 방식을 손보는 방법도 있습니다. 다 됐으면, 텍스트 상자를 선택한 뒤 도형 서식 탭 – 도형 스타일 그룹 – 도형 채우기를 눌러주세요. 스포이트를 누른 뒤, 배경 색을 선택해주도록 합니다. 그러면 이런 식으로 나타나게 되죠. 두 번째 텍스트 상자를 만들 차례입니다. 위에서 설명한 방식대로 가로 텍스트 상자를 만들어주세요. 여기에다가는 부제목을 적어주도록 하고 가능한, 한 줄로 끝날 수 있도록 짧게 해주세요. 다 적었으면, 폰트는 제목과 똑같이 서울남산체 세로쓰기를 사용해주세요. 그리고 크기는 24포인트를 적용하도록 합니다. 글자색은 나중에 수정하도록 할게요. 우선 텍스트 상자의 시작점을 제목 텍스트 상자와 같게 해주세요. 그리고 부제의 위치를 제목보다는 아래에 두되 어느 정도 공간을 두게끔 해줍니다. 여기까지 잘 따라오셨다면, 부제의 위치가 사각형의 왼쪽 모서리에 나뉘는 형태로 있을 겁니다. 텍스트 상자를 누르지 말고 텍스트를 블록 지정하는 식으로 왼쪽은 흰색으로 오른쪽은 배경 색을 적용해주도록 합니다. 배경색 적용 방법은 스포이트를 쓰면 됩니다. 여기까지 했으면 이제 마지막 차례입니다. 사각형 오른쪽 아래에 2글자의 알파벳 약어를 적어주면 됩니다. 여기 적는 약어는 가급적 제목의 키워드를 이용해서 써주는게 좋습니다. 저는 Software의 S와 W를 적어놓겠습니다. 다 적었다면, 글자색은 검은색으로 지정해주시고 크기는 115로 맞춰주세요. 폰트는 제목과 부제와 다르게 Tmon몬소리 Black으로 지정해주도록 합니다. 이 상태에서 글자 위치만 조금 조정해주면, 이와 같은 제목 템플릿이 완성됩니다. 템플릿 따라 만들기 JAVASCRIPT IS EVERYWHERE 편 강의는 여기까지입니다. 시청과 구독, 좋아요. 감사드립니다. 좋은 하루 보내세요! * 참고 영상 - 썸네일 따라 만들기 part.2 (동물여행 컨셉) : https://www.youtube.com/watch?v=B5HsTUlx4ZE - 채널아트 제작 준비하기 : https://www.youtube.com/watch?v=5V0boTnS1k8 - 도형 복사하기 : https://youtu.be/v9VXnWKQuRk?list=PLFkkxbBMEC46O4NL1oBTN2xfejyHfUYun - 스마트 가이드 알아보기 : https://www.youtube.com/watch?v=VPdLSbkbdXw - 글 상자 만들기 : https://www.youtube.com/watch?v=m51zBPRcNZE - 인터페이스는 알고가자 part. 1 : https://www.youtube.com/watch?v=qJH6x8jI0mU - 인터페이스는 알고가자 part. 2 : https://www.youtube.com/watch?v=WKGoay0CSnY - 썸네일 따라 만들기 part.0 (썸네일 제작 틀 공유) : https://www.youtube.com/watch?v=wDoPj1NkJ5E - 썸네일 따라 만들기 part.1 (동물여행 컨셉) : https://youtu.be/B5HsTUlx4ZE - 썸네일 따라 만들기 part.2 (어두운 컨셉) : https://youtu.be/nldgXSlkmOQ * 예시 영상 - * 모든 강의는 정품 소프트웨어를 사용하여 제작됩니다. * 사용된 소프트웨어 : 한컴오피스 한글 2018, Power point 365, Premiere Pro CC 2018, MOVAVI Slideshow maker Track : Let's Go Music by 브금대통령 Music provided by 브금대통령 Watch : https://youtu.be/3JQ8f1SSIbc Ending Track : Audionautix의 Country Cue 1은(는) Creative Commons Attribution 라이선스(https://creativecommons.org/licenses/by/4.0/)에 따라 라이선스가 부여됩니다. 아티스트: http://audionautix.com/


파워포인트 (Power point) 365 강좌 #027 JS Everywhere 발표ppt 템플릿 따라 만들어보기

Dart Programmer 되기 [42]

< Web 개발 – Dart for Web > 이 글에서 설명하는 기술은 Flutter를 사용하지 않고, Dart언어의 Core 라이브러리인 dart:html을 사용하는 방법 입니다. 이는 HTML/CSS/JavaScript의 조합에서 JavaScript에 상응하는 역할을 Dart 언어 그리고 dart:html의 코어 라이브러리 기능이 수행 한다고 보면 됩


Dart Programmer 되기 [42]

Dart Programmer 되기 [41]

< Web 개발 – Flutter for Web : Login UI Example > 지금까지 Flutter for Web를 개발하기 위하여, 기술의 연혁과 도구 설치, 그리고 간단한 예제 프로그램을 실행하고 이해하여 보았습니다. 앞서 dart2js 등에서 본 것처럼, Flutter for Web은 HTML/CSS/JavaScript와 같은 표준 웹 기술을


Dart Programmer 되기 [41]

Dart Programmer 되기 [35]

< Flutter 활용하기 - Skeleton Program for Future Usage > Flutter가 강력하다고 느낀다면 다행이지만, 처음 모바일 프로그래밍을 cross-platform으로 시도한다면, 뭐가 좋은건가 싶을 것 입니다. 아마도 '왜 이렇게 복잡한거야?'하고 의문을 가질수도 있습니다. 개인적으로 JavaScript 기반의 corss-p


Dart Programmer 되기 [35]

정적 웹은 뭐고 동적 웹은 뭔가요?

#정적웹 #동적웹 #PHP 우리가 인터넷에서 보는 웹사이트들은 정적 웹이나 동적 웹, 또는 이 둘의 혼합으로 구분될 수 있어요. HTML, CSS, JavaScript 편에서 살펴봤던 정적 웹과는 동적 웹이 어떻게 다른지, 그리고 어떻게 구현할 수 있는지 PHP를 사용해서 간단한 동적 웹의 예시를 살펴보고, 정적 웹과 동적 웹이 각각 어떤 용도에 적합한지 알아봅니다. = = = 🏠 얄코사이트: https://www.yalco.kr 🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers 🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI 🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY 🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04 🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE 🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y 🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI 🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM 🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U 🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ 🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ = = = 🎬 영상 주요 포인트 📦 정적 웹 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. 이전의 이 영상에서 어떻게 HTML, CSS, Javascript로 어떻게 웹사이트를 만들 수 있는지 보여드렸죠? 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. ... 결국 정적 웹의 기준은 접속할 때마다 받게 되는 HTML, CSS, Javascript 코드들, 그리고 동봉된 이미지, 동영상 등의 파일들이 같은가에요. 좀 더 정확히는, 서버에서 이걸 매 번 가공해서 제공하는게 아니라 프로그래머가 작성해서 갖다 준 제품들이 진열되어 있는 걸 그대로 가져가게 하냐는 거죠. 접속 시마다 내용이 변할 필요가 없는 사이트들 예를 들어 어떤 회사나 학교의 소개 페이지라던가 댓글 기능이 없는 블로그 페이지 등에 사용될 수 있겠죠. 🥛동적 웹 한편, 사용자들이 글을 올리는 게시판은 어떨까요? 글 열 개가 있던 게시판이 HTML 파일로 진열돼 있어요. 그런데 누가 글을 하나 더 올리면, 그때마다 개발자가 글이 열 한 개 있는 페이지를 새로 코딩해서 가져다 놓을 수는 없잖아요. 하물며 끊임없이 정보들이 올라오는 SNS 웹페이지 같은 곳은 말할 곳도 없겠죠. 그런 사이트는 편의점이 아닌 식당으로 만들어서 서버가 그때그때 요리를 하도록 해야 하는 거에요. ⭐️ 영상에서 코드 예제와 함께 살펴보세요! = = = 🎵 엔딩송 : 권민호, 김한영 - Let's Dance 🎼 자료출처 : https://gongu.copyright.or.kr 🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw


정적 웹은 뭐고 동적 웹은 뭔가요?
< 1 2 3 4 5 6 7 8 9 10 ... 43 44 >