프론트엔드66 [자바스크립트] form, input 이벤트 핸들링 목표 입력된 값을 console에 뽑아 보기 html 파일 이벤트 헨들링 html 결과 JavaScript 파일 // input 창에 입력된 값 읽어와 주게 설정을 해주었다. function App() { document.querySelector('#menu-name').addEventListener('keypress', (e) => { console.log(e.key); }); } // document.querySelector('') -> html에 있는 element를 찾을 수 있다. // addEventListener('', (e)=>{}) -> 찾은 element에서 이벤트를 받아 올 수 있다. 입력창에 입력을 해도 console에 나타나지 않는다. 그 이유는 function App을 선언만하고 .. 2022. 3. 12. [자바스크립트] async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 async, await란? 기존의 콜백 함수와 promise의 단점을 보완한 비동기 처리 방식이다. async, await의 필요성 JavaScript는 싱글 스레드 기반 언어이기 때문에 비동기 처리가 필수적이다. JavaScript의 일부인 async 그리고 await 키워드는 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 쉽도록 만들어준다. 비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다. 대표적으로 promise, callback이 있다. async와 await는 기존 동기식 처리의 단점을 보완하고 가독성을 높여주는 코드를 작성할 수 있다. 사용방법은 function() 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 a.. 2022. 3. 8. [CSS] box-sizing 속성 box-sizing padding 과 border 을 width 와 height 에 속하게 할지 설정해주는 기능입니다. 문법 box-sizing: content-box | border-box | initial | inherit content-box : box-sizing의 기본값으로 content 영역의 너비만 포함합니다. border-box : content , padding , border 영역이 너비에 포함됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성 값을 상속받습니다.. 예제 box-sizing 의 content-box , border-box 차이점. See the Pen box-sizing by heerachoi (@heerachoi) on CodePen... 2022. 3. 5. [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 2 앞전에는 Formsubmit으로 백엔드 없이 이메일 보내는 방법을 알려드렸습니다. 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 포트폴리오를 만들다 보면 연락처 부분이 필요하게 됩니다. 이때 백엔드 없이 HTML안에서 만든 form으로 당신에게 이메일을 보낼 수 있는 두 가지 방법이 있습니다. 1. FormSubmit을 사용하기 2. Get form codesign.tistory.com Formsubmit은 이미 지정된 이메일을 다른 웹사이트에서 이메일과 연결시키려 아니까 안돼서 오늘은 다른 방법을 써봤습니다. Getform Getform 역시 무료로 사용 가능합니다. 다만, 한 달에 50개의 제출만 받습니다. .. 2022. 3. 3. [ 웹 기능 구현 ] Getform에서 연락받을 때 이메일 알림 설정 방법 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 2에서 getform을 사용하여 백엔드 없이 HTML 문서 양식에서 무료로 이메일 보내는 기능을 만들어 보았습니다. 오늘은 연락이 보내졌을 때 내 이메일로 알림이 오게끔 설정을 해 보겠습니다. STEP 1 홈 페이지에서 "Account"를 눌러주세요. Getform STEP 2 이메일 알림을 받고 싶은 프로젝트를 선택해주세요. STEP 3 "Automation"을 눌러주세요. STEP 4 "Send an email notification"을 눌러주세요. STEP 5 알림을 받을 이메일을 적어 주세요. EXTRA 메일이 보내지고 나서 "Thank you" form도 추가할 수 있습니다. 2022. 3. 2. [자바스크립트] 기본 강화_변수 [1] 자바스크립트 기본을 다지기 위해 정리를 시작했습니다. 연습 코드들은 Codepen을 사용하여 연습했습니다. Codepen은 무료로 HTML, CSS, JS 등을 온라인에서 작성하고 결과물을 확인할 수 있는 기능을 제공해주는 사이트입니다. 코드가 공유 가능하며 다른 사람들이 개발한 프로젝트들도 볼 수 있습니다. Codepen Create a New Pen ... codepen.io 오늘은 변수에 대해 알아 보았습니다. 변수란? 어떤 정보에 이름을 붙여서 저장하고 싶을 때 사용됩니다. 변수를 선언하는 방법 name=”Mike”; 자바스크립트에서 문자는 항상 따옴표(””, ‘’)로 감싸줘야 합니다. 그리고 변수를 선언하는 데는 몇 가지 규칙이 있습니다. 예제) name=”Mike”; alert(name); c.. 2022. 3. 1. [ 웹 기능 구현 ] 백엔드 없이 HTML 문의 양식에서 이메일 보내는 방법 1 포트폴리오를 만들다 보면 연락처 부분이 필요하게 됩니다. 이때 백엔드 없이 HTML안에서 만든 form으로 당신에게 이메일을 보낼 수 있는 두 가지 방법이 있습니다. 1. FormSubmit을 사용하기 2. Get form을 사용하기 https://formsubmit.co/ FormSubmit | Easy to use form backend - form endpoints for your HTML forms FormSubmit is a form backend, API and email service for HTML forms. It sends your site's form submission directly into your inbox without a need for any backend code or .. 2022. 2. 28. [ 웹 기능 구현 ] Boxicons 사용해서 무료 아이콘 사용 방법 웹 개발을 하다 보면 메뉴 바가 접혔을 때 사용할 아이콘 또는 무언가를 넘길 때 사용할 화살표 아이콘 등 아이콘을 사용할 일들이 생깁니다. 많은 사이트들이 무료로 아이콘을 제공해줍니다. 오늘은 그중 Boxicons를 사용해 봅시다. Boxicons Boxicons : Premium web friendly icons for free Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines boxicons.com STEP 1 위에 제공된 링크로 들어가서 "Usage"를 눌러주세요. STEP 2 왼쪽에 "Import the C.. 2022. 2. 27. [ 웹 기능 구현 ] Swiper Demos 사용법 - 슬라이드 만들기 Swiper Demos란? Swiper Demos를 사용해서 마우스로 쉽게 슬라이드 가능한 스와이프를 만들 수 있다. 데모 보기 STEP 1 홈페이지로 들어가서 "Get Started"를 선택합니다. Swiper Demos Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com STEP 2 Swiper Demos를 사용할 수 있는 방법에 두 가지가 있습니다. 1. CDN을 링크로 slider 삽입하여 사용하기 2. Swiper Demos에서 .js .. 2022. 2. 26. 이전 1 ··· 4 5 6 7 8 다음 728x90
